+880 1756-702340 +880 9613-842340

shopifyengine.com@gmail.com

Purbo Kamal Kasna Rangpur, Bangladesh.

Shopify Theme Specific Liquid Tags

Shopify theme-specific Liquid tags are designed to work within Shopify themes and provide functionality tailored to e-commerce stores. These tags help you manage content, include reusable snippets, and control the structure of your theme.


Shopify Liquid content_for tag

The content_for tag allows you to define content that can be rendered in a specific location in your theme layout.

Definition

{% content_for 'header' %}
  <h1>Welcome to My Store</h1>
{% endcontent_for %}

Calling

{{ content_for_header }}


Shopify Liquid javascript tag

The {% javascript %} tag is used to load JavaScript code in Shopify themes while ensuring optimization and security.

Syntax

{% javascript %}
  javascript_code
{% endjavascript %}

Example

{% javascript %}
  console.log("Hello, Shopify!");
{% endjavascript %}


Shopify Liquid layout tag

The {% layout %} tag is used to specify which layout file should wrap the content of a given template.

Syntax

{% layout name %}

Here, name is the name of the layout file (without the .liquid extension) located in the layout/ directory.

By default, the theme.liquid layout is used. The layout tag allows you to specify an alternate layout, or use no layout.

{% layout 'full-width' %}
{% layout none %}


Shopify Liquid render tag

The {% render 'filename' %} tag is used to include a snippet (or partial) into a Shopify theme, creating a new isolated variable scope.

{% render 'product-card', product: product %}

In this example, the snippet snippets/product-card.liquid receives a variable named product.


render with for parameter

{% render 'filename' for array as item %}

  • You can render a snippet for every item in an array using the for parameter.

  • You can also supply an optional as parameter to be able to reference the current item in the iteration inside the snippet.

  • Additionally, you can access a forloop object for the loop inside the snippet.


Shopify Liquid section tag

The {% section 'name' %} tag is used to include a dynamic section in your Shopify theme. This tag loads a section file from your theme’s sections/ directory, allowing for modular, customizable components that merchants can edit via the Shopify Theme Editor.

{% section 'header' %}


Shopify Liquid stylesheet tag

The {% stylesheet %} tag is a Liquid tag introduced in Shopify’s Online Store 2.0 to add CSS styles in an optimized way.

{% stylesheet %}
  body {
    background-color: #f5f5f5;
  }
{% endstylesheet %}
Share