SScale Themedocs
FR

Section for injecting custom Liquid and HTML code, intended for developers and advanced customizations.

Custom Liquid

The Custom Liquid section allows you to inject raw Liquid and HTML code into any page of your store. Intended for developers and advanced users, it offers complete flexibility to create custom content that is not covered by other sections.

How It Works

The Liquid/HTML code entered in the section field is rendered as-is on the page. You have access to all Shopify Liquid variables (products, collections, settings, etc.) and can create dynamic content.

Main Settings

SettingDescriptionOptions
Liquid codeCode input fieldTextarea (HTML + Liquid)
ContainerContainer widthNarrow / Normal / Full / Full padded

What You Can Do

UsageExample
Static HTMLBanners, iframes, third-party embeds
Dynamic LiquidDisplay product data, collections, variables
Inline CSSStyles specific to the section
JavaScriptCustom scripts (use with caution)
Third-party embedsWidgets, maps, calendars, external forms
SnippetsCall your own snippets via {% render %}

Code Examples

Display a Specific Product

{%- assign product = all_products['product-handle'] -%}
<div class="custom-product-card">
  <img src="{{ product.featured_image | image_url: width: 400 }}" alt="{{ product.title }}">
  <h3>{{ product.title }}</h3>
  <p>{{ product.price | money }}</p>
</div>

HTML Banner with Style

<div style="background: rgb(var(--color-accent-1)); padding: 2rem; text-align: center; border-radius: 8px;">
  <h2 style="color: rgb(var(--color-background)); margin: 0;">
    Free shipping on orders over $50
  </h2>
</div>

Embed Iframe (Video, Map)

<div style="position: relative; padding-bottom: 56.25%; height: 0;">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
    loading="lazy">
  </iframe>
</div>

Conditional Content

{%- if customer -%}
  <p>Welcome {{ customer.first_name }}! You have {{ customer.orders_count }} orders.</p>
{%- else -%}
  <p>Log in to access your loyalty benefits.</p>
{%- endif -%}

Use Cases

Third-Party Widget Embed

  • Chat widget, booking calendar, TypeForm form
  • HTML/iframe code provided by the third-party service
  • Full padded container for full-width display

Custom Dynamic Content

  • Conditional display based on customer (logged in/logged out)
  • Recommended products based on tags
  • Personalized messages by geolocation

Unique Custom Section

  • Unique design that does not exist in any other section
  • Quick prototype before creating a dedicated section
  • Integration of custom snippets

Structured Data (SEO)

  • Custom JSON-LD for specific pages
  • Additional schema.org markup
  • Dynamic meta tags
💡Use the theme's CSS variables (var(--color-accent-1), var(--font-heading-family), etc.) in your inline styles to stay consistent with the theme design, even in custom code.
⚠️Injected code is not automatically validated. A Liquid error can break the page rendering. Always test your code in the editor preview before publishing. Avoid blocking JavaScript that could impact performance.
ℹ️This section is intended for technical users. For merchants without coding skills, the other Scale Theme sections cover the majority of needs without writing a single line of code.
PreviousPopupNextOverview