How to manually integrate Fodane with a Shopify theme?

Upon installing the Fodane app in a Shopify store, we insert a file in your theme. But sometimes (significantly less often), our automatic system fails to integrate with the theme.


So in this article, we guide you step-by-step on how to integrate Fodane manually with a theme.


Step 1: Edit " Theme Files"


You can edit your theme files in Shopify admin by clicking Online Store > Themes > Actions > Edit code.




Step 2: Add a new snippet in the theme.


Create a new snippet in the theme under Snippets folder by clicking "Add a new snippet" button.




Step 3: Give a name to that snippet


After clickng the "Add a new snippet" button provide a name to the snippet fodane.liquid




Step 4: Add Code in the "Fodane snippet"


After creating the snippet, paste the below-given code into the snippet.


`<script>

window.shopifyMultiCurrencies = [];

{% assign fodane_currencies = shop.enabled_currencies | map: 'iso_code' | join: ',' %}

window.shopifyMultiCurrencies = ("{{ fodane_currencies }}").split(",");

window.shopFormat = {{ shop.money_format | json }};

window.shopCurrency = "{{ shop.currency }}";

{% if product %}

window.productJSON = {{ product | json }};

window.productJSON.options_with_values = {{ product.options_with_values | json }};

{% for variant in product.variants %}

window.productJSON.variants[{{ forloop.index }} - 1].inventory_quantity = {{variant.inventory_quantity}};

{% endfor %}

{% assign fodane_collectionIds = product.collections | map: 'id' | join: ',' %}

window.productJSON.collectionIds = [{{ fodane_collectionIds }}];

{% endif %}

{% if cart %}

window.cartJSON = {

"products": [],

"totalPrice": {{cart.total_price}}

};

{% for item in cart.items %}

window.cartJSON.products.push({

productId: '{{ item.product.id }}',

variantId: '{{ item.variant_id }}',

collectionIds: ["{{ item.product.collections | map: 'id' | join: '", "' }}"],

properties: {{ item.properties | json }} || [],

quantity: {{item.quantity}},

key: '{{ item.key }}',

title: '{{ item.title }}',

quantity: '{{ item.quantity }}',

handle: '{{ item.url }}',

featured_image: '{{ item | img_url: '100x' }}',

price: '{{ item.price }}',

});

{% endfor %}

{% endif %}

{% if content_for_header contains 'previewBarInjector' or content_for_header contains 'adminBarInjector' %}

window.isAdminLoggedIn = true;

{% endif %}

</script>

{% if content_for_header contains 'fodane.app' %}

{% assign scriptParams = content_for_header | split: 'fodane.app' | last | split: '"' | first | split: "v=" | last %}

{% assign shopId = content_for_header | split: 'fodane.app' | last | split: '"' | first | split: '\' | slice: 2 | first | replace: '/' %}

<script src="https://testing-cdn1.fodane.app/assets/{{shopId}}/bundle.js?v={{scriptParams | replace: '\u0026' : '&' }}" async></script>

{% endif %}`


Step 5: Add "Fodane Code" in the theme.liquid


Now go to "Layout > theme.liquid" file and add this code {% render 'fodane' %} before </head>



If you face any difficulty with this manual integration, please chat with us or reach us at support@fodane.app.




Updated on: 18/05/2022

Was this article helpful?

Share your feedback

Cancel

Thank you!