Articles on: Get Started

How to manually insert ReelUp files in a theme

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

So in this article, we will guide you step-by-step on how to manually insert ReelUp files in 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 reelUp.liquid




Step 4: Add Code in the "reelUp.liquid

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

<script>
window.shopFormat = {{ shop.money_format | json }};
window.shopCurrency = "{{ shop.currency }}";
{% if product %}
window.reelUp_productJSON = {{ product | json }};
{% assign reelUp_collectionIds = product.collections | map: 'id' | join: ',' %}
window.reelUp_productJSON.collectionIds = [{{ reelUp_collectionIds }}];
{% if shop.metafields.reelUp.productReels.value.product_page_reels == 1 %}
window.reelUpProductReels = {{ product.metafields.reelUpProductReels.reels.value | json }};
{% else %}
window.reelUpProductReels = [];
{% endif %}
{% endif %}
</script>
<script>
window.reelUpVideos = {{ shop.metafields.reelUp.reels.value | json }};
window.reelUpPlaylists = {{ shop.metafields.reelUp.playlists.value | json }};
window.reelUpDesign = {{ shop.metafields.reelUp.design.value | json }};
window.reelUpSettings = {{ shop.metafields.reelUp.settings.value | json }};
</script>
{% if content_for_header contains 'reelup.io' %}
<script src="https://cdn.reelup.io/js/bundle.js?shop={{ shop.permanent_domain }}" async></script>
{% endif %}


Step 5: Call "reelUp file" in the theme.liquid

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



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

Updated on: 19/09/2022

Was this article helpful?

Share your feedback

Cancel

Thank you!