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>

Updated on: 19/09/2022