Help! Why the liquid tags are not working in .html() in javascript?!

Technical Q&A

Topic summary

A Shopify developer encountered an issue where Liquid tags ({% for %}, {% if %}, {{ variant.price }}) were not rendering when used inside jQuery’s .html() method within a JavaScript snippet.

Root Cause Identified:
The problem stemmed from Shopify’s section architecture. When a section is referenced in a template, JavaScript in rendered snippets cannot access Liquid variables created outside that section. Liquid variables are scoped to their sections and aren’t accessible across boundaries.

Solution:
The developer resolved this by moving the snippet inside the section file itself, allowing Liquid variables to work properly. For JavaScript code within sections, it must be wrapped in {% javascript %} tags.

Key Takeaway:
Shopify documentation states: “Variables created outside of sections aren’t accessible within sections.” The only exception is when referencing section/block objects from within a snippet that’s rendered inside that same section.

Related Discussion:
Another user (Erald_1) faced a similar issue with a gift-wrap cart feature. The original poster advised placing the snippet in the cart template file (not a section) and ensuring all variables like gift_wraps_in_cart and id are properly assigned before use.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

Hello dear community, have any of you had this issue with liquid tags??

I have no idea how come it is possible but liquid tags are not working for me when I use .html() with jQuery in a javascript code. I am using a custom theme and I 've created a price table in html / liquid that shows the price for each variant and works fine. Now I to give the option to show only the variant selected and for this I figured i would use javascript to replace the content of the price table with an ‘onclick’ event.

But when trying to replace the content of the table, first attempt failed and I have no idea why: I see the html being rendered but the liquid tag such as {% for …%} and {% if … %} and even simple liquid objects such as {{ variant.price}} are absolutely not working!!!. Any idea why ?
here is the piece of code that is not working , I shortened it for debugging purpose but this code works correctly in another theme when placed in a file named snippet-js-footer:

{% if product.available %}
			{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>
				var selectCallback = function( variant, selector) {

if ( variant && variant.available ){
<----- This is when the code for the button goes ----> 
                        jQuery('#latest-sales-table').html('<thead><tr style="text-align:right"><th class="col-sm-2 col-xs-9">Marchand</th><th class="col-sm-2 col-xs-6">Prix/Taille</th><th class="col-sm-4 col-xs-1 info-list" >Info Release</th><th class="col-sm-3 col-xs-1">Lien</th></tr></thead><tbody id="body"><tr id="paid_shipping" class="paid"><td style="padding:0px!important;overflow:hidden;border:none"><div class= "shop-table_shop" >{{ variant.price }}{% for collection in product.collections %}{% assign collection_title = collection.title | downcase %}{% assign variant_option = variant.option2 | downcase %}{% if variant_option == collection_title %}{% assign product_collection = collection %}{% assign partner =  collection.metafields.custom_fields.partner.value  %}{% endif %}{% endfor %}{% unless product_collection == blank %}<div class="retailer_logo" style="overflow:none">helloworld<a href="{{product_collection.url}}"><img src="{{ product_collection.image.src | collection_img_url:'150x150', crop:'center', scale: 0 }}" alt="{{ product_collection.image.alt }}"></a></div>{% endunless %}</div></td></tr></tbody>');
                  } 
};
jQuery(document).ready(function($){
					new Shopify.OptionSelectors( "product-select",
					{
						product: {{ product | json }},
						onVariantSelected: selectCallback,
						enableHistoryState: true 
					});
				});p 
2

I have lots of questions to help get some context (and to save guessing).

  • What type of file has this been added to? In other words is this a html liquid file or one that creates a js file?
  • And define not working - as in they are being skipped, you see an error, something else?
  • Do you have a link to the page that you can share?
3

Hi Jason!
This code has been added to a .liquid snippet file called ‘snippet-js-footer’, I am using an old theme which doesn’t use sections. So all the important features using javascript and liquid such as cart, variant selector, wishlist , image gallery and quickview belong in this file and they work fine. “” tags have been added before and after each code.

By not working I mean that the liquid reference have no effect : it seems they are been skipped. On the screenshot below, in the table - highlighted in yellow marker - where there should be an image, there is nothing. I even tried placing a simple reference such as {{variant.price}} or {{product.title}}, …nothing.

Joiakim_2-1673874822175.png
Joiakim_2-1673874822175.png1966×891 78.4 KB

I am trying this new feature on a backup of my current theme, to not mess up the live theme; but here is the link to the website: https://sneakerdrop.fr/collections/

4

@Jason I was able to reproduce the bug, by:

Step 1 - using {% render %} to include the snippet in the theme file

Step 2 - using {% render %} to include the price table in the product file

Step 3 - reference the product file as a section in the product template

I think that what is causing the problem is the {% section %} tag, when a section is referenced in the template , javascript in the rendered snippet has no effect. I was trying to use sections in a non-sectioned theme.

5

I found the solution : I had to add the snippet inside the section for the liquid variables to work.

As reference, the documentation on section in themes reads : "Aside from global objects, variables created outside of sections aren’t accessible within sections.

The section and block objects, as well as variables created within sections, aren’t available outside of their respective section. The only exception is when you reference section and block objects within a snippet that’s rendered inside the section you’re referencing."

For anyone having issues with sections and how to insert them in template file : find the docs here

Thank you for looking into it. All best

6

Hello @Joiakim !

Can you give an example because I also have the same problem?

7

Hello!
Which problem are you having ? Using render tags in a section is not possible.

8

I have built a file in the snippets directory, which also contains the js script. When I call this file to another file located in the sections directory, the js script does not work.

9

Well it’s not going to work: you need to include any js code in between
{% javascript %} in the section file/

{% javascript %}
  javascript_code
{% endjavascript %}
10

Again this doesn’t work. Can you see my code?

11

Sure post your section’s code.

12
This is my script in the snippets file except for the rest of the code.

{% render ‘gift-wrapping’ %} → I called the snippets file in the sections file.

13

Hey Erald,
First, you’re adding this script in the wrong place. The functions you are calling cannot be triggered from a section itself. You’ll have to add your snippet to your theme file or to your cart template.

Then I noticed you’ve added attributes and variables which aren’t assigned :

gift_wraps_in_cart

and

id

If the variables are assigned in your cart file then you should place the snippet in your cart template not in a section file. You might want to you review your cart template code for it to work properly. If you need further help on this I think you should open a new thread.