Store Tags

These tags are used for accessing and displaying store-related data in Liquid templates. They help you render store information, product details, and other dynamic store content. Use these tags to build dynamic storefronts and display store data.

block

Include blocks in sections. Static include using name as id

Input

{% block 'name' %}

Static multiple include using custom ids for settings

Input

{% block 'name' id:'custom-id' %}

The id can also be a variable, resolved from context like any other attribute (e.g. a value assigned earlier so a shared snippet can parameterize its block id):

Input

{% assign cardId = 'section-product-card' %}
{% block 'name' id:cardId %}

Inline block for side-by-side layout in the editor

Input

{% block 'name', display: 'inline' %}

container

Wraps a block container. To create a default container just use the plain container tag without the name.

Input

{% container %}

A named container matches blocks assigned to that container and, for statically imported sections without stored configuration, seeds the container’s preset blocks from the section schema:

Input

{% container 'content' %}

You can also create block containers dynamically. Give the container a schema name (for preset lookup) and a per-instance id so repeated (looped) instances match their own stored blocks:

Input

{% for i in (1..10) %}
  {% assign cid = 'content-' | append: i %}
  {% container 'content', id: cid %}
{% endfor %}

form

Forms are an important piece of Finqu theme development. You can add forms with the form tag. You can read more about different types of forms and how to use them from the general guide for forms.

Input

{% form 'product', product %}
  <input type="hidden" name="quantity" value="1">
  <button type="submit">{{ 'add_to_cart' | t }}</button>
{% endform %}

Input

{% form 'contact' %}
  <input type="email" name="contact[email]" placeholder="Your email">
  <textarea name="contact[body]"></textarea>
  <button type="submit">{{ 'send' | t }}</button>
{% endform %}

javascript

With javascript tag you can be sure that your script is only included once in the page. This is very useful when a shared script is needed between sections or blocks. The tag body cannot contain Liquid.

Input

{% javascript %}
  document.addEventListener('DOMContentLoaded', function() {
    console.log('Section loaded');
  });
{% endjavascript %}

Output

<script>document.addEventListener('DOMContentLoaded', function() { console.log('Section loaded'); });</script>

section

Renders a section from the sections folder of the theme. Sections are always wrapped inside of a parent element.

Input

{% section 'my-section' %}

Output

<div id="finqu-section-my-section">
    <!-- section content here -->
</div>

sections

Renders a section group — an ordered collection of sections that can be managed by the store editor. Section groups are defined in the theme’s section-groups folder as JSON files. Sections restricted to specific groups declare "section_groups": ["group-name"] in their schema.

Input

{% sections 'header-group' %}

Output

<div id="finqu-section-group-header-group">
    <!-- sections rendered in order -->
</div>

stylesheet

With stylesheet tag you can be sure that your styles are only included once in the page. This is very useful when shared styles are needed between sections or blocks. The tag body cannot contain Liquid.

Input

{% stylesheet %}
  .my-section { color: red; }
{% endstylesheet %}

Output

<style>.my-section { color: red; }</style>