Shopify Liquid Tags Visible in Rendered HTML

In Shopify Admin → Online Store → Themes → Edit code, use the search function (if available in your theme editor) to search across all files for the literal text you saw in the page source. Identify which .liquid file the code belongs to.

If Liquid syntax exists in a .js file, the fix is to move the code into a .liquid file (a snippet or section) where Shopify can process it, then render the .js file's functionality from there.

<!-- WRONG: Liquid in a .js file (won't be processed) -->
var productTitle = {{ product.title }};

<!-- RIGHT: In a .liquid file, output JS variables using | json filter -->
<script>
  var productTitle = {{ product.title | json }};
  var productPrice = {{ product.price | json }};
</script>

If code referencing {{ product }} appears in a page or collection template, either remove it or pass the product explicitly. For snippets, use {% render %} with explicit variable passing:

{%- comment -%} Wrong: using product in a non-product context {%- endcomment -%}
{% include 'product-card' %}  {%- comment -%} product may not exist here {%- endcomment -%}

{%- comment -%} Right: use render with explicit variable passing {%- endcomment -%}
{% assign featured = collections['frontpage'].products.first %}
{% render 'product-card', product: featured %}

{% include %} is deprecated and can cause variable scope leakage. {% render %} uses an isolated scope. Replace all {% include 'snippet' %} with {% render 'snippet' %} and explicitly pass any variables the snippet needs.

{%- comment -%} Deprecated (variable scope bleeds in) {%- endcomment -%}
{% include 'product-card' %}

{%- comment -%} Modern (sandboxed, explicit variable passing) {%- endcomment -%}
{% render 'product-card', product: product, show_vendor: section.settings.show_vendor %}

If an app installation caused the issue, check theme.liquid and other modified files for the app's injected code. If malformed, either remove it and re-install the app, or contact the app developer with a screenshot of the rendering failure.

Liquid rendering failures are often conditional - they only appear on specific pages. Test your product pages, collection pages, homepage, and blog posts separately to identify which template types are affected.

Q: Can Google still rank my page if it has visible Liquid tags?

Google will index and potentially rank the page, but the raw Liquid text ({{ product.title }}) is treated as your content. This means your product name in Google's index might literally be "{{ product.title }}" - not your actual product name. CTR and relevance are severely impacted.

Q: My store looks fine in preview mode - why are Liquid tags showing?

Shopify's theme editor preview renders Liquid. The issue may only appear in specific conditions: on a particular template type (collection vs product), when a specific variable is null, or in contexts where the Shopify editor simulates data that isn't available in live rendering.

Q: A third-party app caused this - what should I do?

Screenshot the visible Liquid tags, note which page type shows them, then contact the app developer with this evidence. If the developer can't fix it quickly, locate the app's injected code in your theme (usually in theme.liquid or a snippet) and remove it temporarily until the fix is available.

Q: Is {% include %} really deprecated? My theme uses it everywhere.

Yes, {% include %} was deprecated by Shopify in favour of {% render %}. While {% include %} still works, it shares the parent template's variable scope which can cause subtle rendering failures. {% render %} is sandboxed, faster, and is the officially supported approach. Modern OS 2.0 themes use {% render %} exclusively.

Q: How do I search across all my theme files for a specific Liquid variable?

In Shopify's theme code editor, use the search icon (if available) to search across all files. Alternatively, download your theme as a ZIP (Themes → (...) → Download theme file) and search the extracted files with any code editor or grep.