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