Content Block Templates

These pre-built templates allow you to quickly put together your site so you can start selling faster! When placing Content directly on a page, depending on how you want your content to show, best results may come from placing your blocks inside one or more Container Blocks and placing the containers on your page.

If you want your content to cover the entire screen, such as when using hero banners or images, do not place your content block inside a container. Being inside a container, content blocks will be assigned a maximum width along with padding and margins.

Available Templates


New Feature: You can now change or extend the functionality of content blocks using the Theme Builder. You will find the source liquid code on each tab below the template description. To Learn more please go to the Theme Builder Reference.


Container Block

A Container block can contain one or more child Content Blocks of any type. Containers are the foundation to great looking content as they help you to lay it out on your page

Container - Theme Template Code

Theme Template Key: blocks/container

 
 <section
  class="SC-ContentBlockContainer"
  id="{% if content_block.identifier != blank %}SC-ContentBlockContainer-{{ content_block.identifier }}{% endif %}"
  data-cb="{{ content_block.identifier }}">

  {% if content_block.title != blank or content_block.subtitle != blank %}
    <header class="SC-ContentBlockContainer_header">
      {% if content_block.title != blank %}
        <h2>{{ content_block.title }}</h2>
      {% endif %}
      {% if content_block.subtitle != blank %}
        <div class="sc-font-medium sc-shade-neutral">
          {{ content_block.subtitle }}
        </div>
      {% endif %}
    </header>
  {% endif %}

  <div class="SC-ContentBlockContainer_body{% if content_block.layout_style != blank %} sc-{{ content_block.layout_style }}{% endif %}{% if content_block.sub_type != blank %} sc-{{ content_block.sub_type }}{% endif %}">
    {% for child in content_block.children %}
      {{ child.render }}
    {% endfor %}
  </div>

  {% if content_block.link_label != blank and content_block.link_target != blank %}
    <footer class="SC-ContentBlockContainer_footer">
      <a class="SC-Button SC-Button-primary" href="{{ content_block.link_target }}">
        {{ content_block.link_label | escape }}
      </a>
    </footer>
  {% endif %}
</section>


No Added Styling Block

This block has no styling at all and can be used for your sites head and body content or you can use it to display content on your site with your own styling. Using this block to display your content requires some skill with CSS and HTML.

Fields Usage Input
Content The text content Plain Text, Markdown, HTML

No Added Styling - Theme Template Code

Theme Template Key: blocks/html


<!-- CB '{{ content_block.identifier }}' -->
{{ content_block.content }}


Text Block

Text blocks can be used for much more than just displaying text. You can add HTML and CSS to the content to produce web-to-lead and web-to-case forms along with tables and a whole lot more using Markdown or HTML.

Fields Usage Input
Title H1 heading for block Plain Text
Subtitle Medium sized subtitle for block Plain Text
Content The main text content Plain Text, Markdown, HTML

Text - Theme Template Code

Theme Template Key: blocks/text


<div
  class="SC-ContentBlock SC-Text"
  id="{% if content_block.identifier != blank %}SC-ContentBlock-{{ content_block.identifier }}{% endif %}"
  data-cb="{{ content_block.identifier }}">

  {% unless content_block.title == blank %}
    <h1>{{ content_block.title }}</h1>
  {% endunless %}

  {% unless content_block.subtitle == blank %}
    <p class="sc-font-medium sc-shade-neutral">{{ content_block.subtitle }}</p>
  {% endunless %}

  {% unless content_block.content == blank %}
    {{ content_block.content }}
  {% endunless %}
</div>


Single Image Block

This block displays a single image using an HTML <img> tag.

Field Usage Input
Image The image for the block Lookup to Media records with the file type of Image
Link Target If provided, the image becomes a clickable link URL
Link Label If provided and is a clickable link, the link’s tooltip will be set to the provided value Plain Text

Single Image - Theme Template Code

Theme Template Key: blocks/image


<div class="CB-Component" data-cb="{{ content_block.identifier }}">
  <div class="Image"
       data-alignment="{{ content_block.alignment }}"
       data-alignment-target="{{ content_block.identifier }}">

    {% unless content_block.link_target == blank %}
      <a class="ImageLink" href="{{ content_block.link_target }}" title="{{ content_block.link_label | escape }}">
        {% unless content_block.image == blank %}
          <img loading="lazy"
            src="{{ content_block.image.massive_url }}"
            {% if content_block.title != blank %}
              alt="{{ content_block.title | escape }}"
            {% else %}
              alt="{{ content_block.image.alt_text | escape }}"
            {% endif %}/>
        {% else %}
          <svg class="Placeholder" width="800" viewBox="0 0 1 1">
            <rect width="100%" height="100%"></rect>
            <circle cx="50%" cy="50%" r="20%" fill="rgba(0,0,0,0.05)"/>
          </svg>
        {% endunless %}
      </a>

    {% else %}
      {% unless content_block.image == blank %}
        <img loading="lazy"
          src="{{ content_block.image.massive_url }}"
          {% if content_block.title != blank %}
            alt="{{ content_block.title | escape }}"
          {% else %}
            alt="{{ content_block.image.alt_text | escape }}"
          {% endif %}/>
      {% else %}
        <svg class="Placeholder" width="800" viewBox="0 0 1 1">
          <rect width="100%" height="100%"></rect>
          <circle cx="50%" cy="50%" r="20%" fill="rgba(0,0,0,0.05)"/>
        </svg>
      {% endunless %}
    {% endunless %}
  </div>
</div>


Image with Text Overlay Block

The purpose of this block is to provide a large, full-width background image with some simple content and a call to action button. The background image is given a CSS filter to reduce its brightness so to allow the text and button to show better against it. The image is all aligned to the left and is cropped or stretched to the full width of the block. The default position of the text and button is centre of the block but can be moved to the left or right edge. The text and button remain justified to the left regardless of alignment.

Field Usage Input  
Alignment Defines how the text and button are aligned in the block Picklist Centre, Left, Right
Image The background image for the block Lookup to Media records with the file type of Image  
Link Label If provided, displays as a call to action button Plain Text  
Link Target If provided, gives the button a target URL URL  
Title H2 heading for block Plain Text  
Subtitle Medium sized subtitle for block Plain Text  
Content Main text content Plain Text, Markdown, HTML  

Tip: Use a suitable background image to allow for cropping. Images wider that the block will be centred and cropped, and smaller images will be stretched to fit the width of the page. The block will be narrower on smaller screens so your image will be cropped further.

Image with Text Overlay - Theme Template Code

Theme Template Key: blocks/image_text_overlay


<div
  class="SC-ContentBlock SC-ImageTextOverlay"
  id="{% if content_block.identifier != blank %}SC-ContentBlock-{{ content_block.identifier }}{% endif %}"
  data-cb="{{ content_block.identifier }}">
  <div class="SC-Banner"{% if content_block.image != blank %} style="background-image: url('{{ content_block.image.massive_url }}')"{% endif %}>
    <div class="SC-Banner_container{% if content_block.alignment != blank %} sc-{{ content_block.alignment }}{% endif %}">
      <div class="SC-Banner_content">

        {% unless content_block.title == blank %}
          <h2 class="SC-Banner_heading">
            {{ content_block.title }}
          </h2>
        {% endunless %}

        {% unless content_block.subtitle == blank %}
          <div class="SC-Banner_subheading">
            {{ content_block.subtitle }}
          </div>
        {% endunless %}

        {% unless content_block.content == blank %}
          <div class="u-s-mt-small">
            {{ content_block.content }}
          </div>
        {% endunless %}

        {% unless content_block.link_label == blank and content_block.link_target == blank %}
          <a class="SC-Banner_cta" href="{{ content_block.link_target }}">
            {{ content_block.link_label }}
          </a>
        {% endunless %}
      </div>
    </div>

    <div class="SC-Banner_overlay"></div>
  </div>
</div>


Image Beside Text Block

This block allows you to easily provide some text to the left or right of an image. The default is for the image to display on the left, but you can use the Left and Right Alignment values to move it to either side. Despite the Alignment setting, the image will always appear on top of the text when on a small screen.

Field Usage Input Available Options
Alignment Defines how the content is aligned in the block Picklist Left, Right
Image The image for the block Lookup to Media records with the file type of Image  
Link Label If provided, displays as a call to action link Plain Text  
Link Target If provided, gives the link a target URL URL  
Title H2 heading for the block Plain Text  
Subtitle Medium sized subtitle for block Plain Text  
Content Main text content Plain Text, Markdown, HTML  

Tip: Keep your image width around 640px or less. If it is too wide, there will be no room for the text content

Image Beside Text - Theme Template Code

Theme Template Key: blocks/image_beside_text


<div
  class="SC-ContentBlock SC-ImageBesideText{% if content_block.alignment != blank %} sc-align-{{ content_block.alignment }}{% endif %}"
  id="{% if content_block.identifier != blank %}SC-ContentBlock-{{ content_block.identifier }}{% endif %}"
  data-cb="{{ content_block.identifier }}"
  data-alignment="{{ content_block.alignment }}"
  data-alignment-target="{{ content_block.identifier }}">

  {% if content_block.image != blank %}
    <img
      class="SC-ImageBesideText_image"
      src="{{ content_block.image.medium_url }}"
      alt="{{ content_block.image.alt_text | escape }}"
      loading="lazy">
  {% else %}
    <svg class="SC-ImageBesideText_image" width="400" viewBox="0 0 600 600">
      <rect width="100%" height="100%"></rect>
      <circle cx="50%" cy="50%" r="20%" fill="rgba(0,0,0,0.05)"/>
    </svg>
  {% endif %}

  <div class="SC-ImageBesideText_content">

    {% unless content_block.title == blank %}
      <h2 class="SC-ImageBesideText_headline">
        {{ content_block.title | escape }}
      </h2>
    {% endunless %}

    {% unless content_block.subtitle == blank %}
      <p class="SC-ImageBesideText_subheadline">
        {{ content_block.subtitle }}
      </p>
    {% endunless %}

    {% unless content_block.content == blank %}
      <div class="sc-rich-text">
        {{ content_block.content }}
      </div>
    {% endunless %}

    {% unless content_block.link_label == blank and content_block.link_target == blank %}
      <a href="{{ content_block.link_target }}" class="SC-ImageBesideText_cta">
        {{ content_block.link_label | escape }}
      </a>
    {% endunless %}
  </div>
</div>


Slideshow Block

A slideshow is a series of content blocks shown via a carousel. The Links in your slides allows each slide to direct your audience to different pages and products within your store. Be careful with using small images as it will stretch them out to the full width of the block.

To create your slideshow:

Slideshow - Theme Template Code

Theme Template Key: blocks/slideshow


{% capture children_content %}
  {% for child in content_block.children %}
    {% capture child_content %}{{ child.render }}{% endcapture %}
    {% if child_content != blank %}<div>{{ child_content }}</div>{% endif %}
  {% endfor %}
{% endcapture %}

<section class="CB-Slideshow" data-cb="{{ content_block.identifier }}">
  {% if children_content != blank %}
    <div class="Slider" data-slideshow="{{ content_block.identifier }}">
      {{ children_content }}
    </div>
  {% else %}
    <div class="Fallback">
      <div class="u-text-align-center">
        <div class="u-s-mb-base"><strong>Slideshow</strong></div>
        <div>No content blocks have been selected to be present in this slideshow</div>
      </div>
    </div>
  {% endif %}
</section>


Media Reference Block

This block is used to present a link to a document or file with the option of text content displaying below it. The link text comes from the name of the media record you are referencing. When the link is clicked, the document or file will either show on your browser or download depending on your browsers default behaviour for that file type.

Field Usage Input
Document The document to link to Lookup to Media records with the file type of Document
File The file to link to Lookup to Media records with the file type of File
Content Main text content Plain Text, Markdown, HTML

For instructions on how to upload your files and Documents to StoreConnect, see Uploading Media.

Media Reference - Theme Template Code

Theme Template Key: blocks/media


<div class="CB-Component" data-cb="{{ content_block.identifier }}">
  {% if content_block.document %}
    <a href="{{ content_block.document.url }}">{{ content_block.document.name }}</a>
  {% endif %}

  {% if content_block.file %}
    <a href="{{ content_block.file.url }}">{{ content_block.file.name }}</a>
  {% endif %}

  {% if content_block.medium %}
    <a href="{{ content_block.medium.url }}">{{ content_block.medium.name }}</a>
  {% endif %}

  {{ content_block.content }}
</div>


This block displays articles in two columns on small screens and four columns on larger screens and wraps to the next row as needed. The articles hero image is used as the image and the articles title is used for the Label that sits below the image. When adding related products to this block, set the Usage Type to Featured Article.

Field Usage Input
Title H1 heading for the block Plain Text

Featured Articles - Theme Template Code

Theme Template Key: blocks/featured_articles


<div
  class="SC-ContentBlock SC-FeaturedArticles"
  id="{% if content_block.identifier != blank %}SC-ContentBlock-{{ content_block.identifier }}{% endif %}"
  data-cb="{{ content_block.identifier }}">

  {% unless content_block.title == blank %}
    <h2>{{ content_block.title }}</h2>
  {% endunless %}

  {% if content_block.articles.size > 0 %}
    <div class="SC-CardGrid SC-CardGrid-prominent">
      {% for article in content_block.articles %}
        <div class="SC-CardGrid_item">

          <a class="SC-ArticleCard" href="{{ article.path }}">
            {% if article.hero_image %}
              <div class="SC-ArticleCard_image">
                <img src="{{ article.hero_image.large_url }}" loading="lazy"/>
              </div>
            {% endif %}
            <div class="SC-ArticleCard_heading">
              {{ article.title }}
            </div>
            <div class="SC-ArticleCard_date">
              {{ article.publish_on | date: '%B %-d, %Y' }}
            </div>
          </a>

        </div>
      {% endfor %}
    </div>
  {% endif %}
</div>


This block lists all associated pages as a list of links to the pages. The page Title field is used as the link text. When adding related pages to this block, set the Usage Type to Featured Page.

Field Usage Input
Title H1 heading for the block Plain Text

Featured Pages - Theme Template Code

Theme Template Key: blocks/featured_pages


<div
  class="SC-ContentBlock SC-FeaturedPages"
  id="{% if identifier != blank %}SC-ContentBlock-{{ identifier }}{% endif %}"
  data-cb="{{ content_block.identifier }}">

  {% unless content_block.title == blank %}
    <h1>{{ content_block.title }}</h1>
  {% endunless %}

  {% if content_block.pages.size > 0 %}
    <ul>
      {% for page in content_block.pages %}
        <li><a href="{{ page.path }}">{{ page.title }}</a></li>
      {% endfor %}
    </ul>
  {% else %}
    <div class="SC-Fallback">
      <div class="sc-text-center">
        <div class="sc-mb">
          <strong>Featured Pages Content Block</strong>
        </div>
        <div>No pages have been selected to be featured</div>
      </div>
    </div>
  {% endif %}
</div>


This block displays product cards in two columns on small screens and four columns on larger screens and wraps to the next row as needed. The cards are similar to what you would see in a product category page. When adding related products to this block, set the Usage Type to Featured Product.

Field Usage Input
Title H1 heading for the block Plain Text

Featured Products - Theme Template Code

Theme Template Key: blocks/featured_products


<div
  class="SC-ContentBlock SC-FeaturedProducts"
  id="{% if content_block.identifier != blank %}SC-ContentBlock-{{ content_block.identifier }}{% endif %}"
  data-cb="{{ content_block.identifier }}">

  {% if content_block.products.size > 0 %}
    <div class="SC-CardCarousel">
      <div class="SC-CardCarousel_header">
        {% unless content_block.title == blank %}
          <h2 class="SC-CardCarousel_heading">
            {{ content_block.title }}
          </h2>
        {% endunless %}
        {% if content_block.link_label != blank and content_block.link_target != blank %}
          <a href="{{ content_block.link_target }}" class="Link">
            {{ content_block.link_label }}
          </a>
        {% endif %}
      </div>

      <div class="SC-CardCarousel_track">
        {% for product in content_block.products %}
          <div class="SC-CardCarousel_item">

            <!-- Product Card -->
            <div class="SC-ProductCard">
              <a class="SC-ProductCard_image" href="{{ product.path }}">
                {% if product.images.size > 0 %}
                  <img loading="lazy" src="{{ product.images.first.large_url }}"/>
                {% else %}
                  <svg class="SC-Placeholder" viewBox="0 0 400 500">
                    <rect width="100%" height="100%"></rect>
                    <circle cx="50%" cy="50%" r="20%" fill="rgba(0,0,0,0.05)"/>
                  </svg>
                {% endif %}
              </a>
              <a class="SC-ProductCard_headline" href="{{ product.path }}">
                {{ product.name }}
              </a>
              <div class="SC-ProductCard_detail">

                <!-- Price -->
                <div class="SC-ProductCard_price">
                  {% if product.pricing.hide_price? %}
                    <span class="SC-ProductCard_price_item">
                      {{ product.pricing.hide_price_text }}
                    </span>
                  {% elsif product.pricing.has_price? %}
                    {% if product.pricing.on_sale? %}
                      <span class="SC-ProductCard_price_item is-sale">
                        {{ product.pricing.sale_price | money , compact: true }}
                      </span>
                      <span class="SC-ProductCard_price_item is-original">
                        {{ product.pricing.original_price | money, compact: true }}
                      </span>
                    {% else %}
                      <span class="SC-ProductCard_price_item">
                        {{ product.pricing.price | money, compact: true }}
                      </span>
                    {% endif %}
                  {% endif %}
                </div>

                <div class="ProductCard_fulfilment">
                  {% if product.can_purchase? %}
                    {% if product.can_pickup? %}
                        {% if product.can_ship? %}
                          {{ "products.pickup.available" | t }}
                        {% else %}
                          {{ "products.pickup.only" | t }}
                        {% endif %}
                    {% endif %}
                  {% else %}
                    {% if product.track_inventory? %}
                      {{ "products.availability.out_of_stock" | t }}
                    {% else %}
                      {{ "products.availability.unavailable" | t }}
                    {% endif %}
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  {% endif %}
</div>


This block displays categories in a row with featured cards and a scrollable horizontal bar at the bottom. On handheld devices, two cards will be displayed (the second card will be partly seen) so users can scroll over the items horizontally.

The categories media is used as the image and the categories title is used for the Label that displays on top of the image. When adding related products to this block, set the Usage Type to Featured Category.

Field Usage Input
Title H1 heading for the block Plain Text

Featured Categories - Theme Template Code

Theme Template Key: blocks/featured_categories


<div
  class="SC-ContentBlock SC-FeaturedCategories"
  id="{% if content_block.identifier != blank %}{{ content_block.identifier }}{% endif %}"
  data-cb="{{ content_block.identifier }}">
  {% if content_block.product_categories.size > 0 %}
    <div class="SC-CardCarousel">

      {% unless content_block.title == blank && content_block.link_target == blank %}
        <div class="SC-CardCarousel_header">
          {% unless content_block.title == blank %}
            <h2 class="SC-CardCarousel_heading">
              {{ content_block.title }}
            </h2>
          {% endunless %}
          {% if content_block.link_label != blank && content_block.link_target != blank %}
            <a href="{{ content_block.link_target }}" class="Link">
              {{ content_block.link_label }}
            </a>
          {% endif %}
        </div>
      {% endunless %}

      <div class="SC-CardCarousel_track">
        {% for product_category in content_block.product_categories %}
          <div class="SC-CardCarousel_item">
            <div class="SC-CategoryCard">
              <a href="{{ product_category.path }}" class="SC-ImageLink sc-mb-small">
                {% if product_category.image %}
                  <img loading="lazy" src="{{ product_category.image.large_url }}"/>
                {% else %}
                  <svg class="SC-Placeholder" width="400" viewBox="0 0 400 500">
                    <rect width="100%" height="100%"></rect>
                    <circle cx="50%" cy="50%" r="20%" fill="rgba(0,0,0,0.05)"/>
                  </svg>
                {% endif %}
              </a>
              <a class="SC-HeadingLink" href="{{ product_category.path }}">
                <h4>{{ product_category.name }}</h4>
              </a>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  {% endif %}
</div>

Back to the top

 
 
Back to Documentation