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: '/' %}

{% 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?

Thank you!