Theme Liquid Snippets

This article is intended for advanced users and our partners as it requires advanced web development or Salesforce admin or programming knowledge. While the functionality is part of StoreConnect, we do not provide end user assistance to implement it beyond our help documentation. If you need help or are unsure on how to do this, you can hire one of our StoreConnect partners.

There are a number of template snippets used by on StoreConnect sites by that can be customised using Theme Builder. We have included here the default code snippets for you to use and modify within your own themes.

You can of course define your own snippets as appropriate and are not restricted to the below. Any snippet you create can be referenced via your-path/and-name. Any existing snippet you want to overwrite must have the snippets/ prefix as given below.

For example, to overwrite the Menu Item snippet, you would create a theme template with the key snippets/menu/menu_item but you would refer to it within your other templates via:


{% render 'menu/menu_item', menu_item: menu_item %}

Any missing snippet will be released in future versions, if you have a specific query, please contact support.

Menus

These snippets relate to the way menus display within your site.

Theme Template Key: snippets/menu/menu_item

{% assign lvl = level | plus: 1 %}

{%- if menu_item.menu_items.size > 0 or menu_item.child_categories.size > 0 and menu_item.child_category_levels > 0 %}
  <li class="SC-Menu_item tier{{ level }}{% if level != 3 %} parent{% endif %}{% if menu_item.style_classes %} {{ menu_item.style_classes }}{% endif %}" id="SC-MenuItem-{{ parent_id }}-{{ menu_item.identifier }}">
    {%- if menu_item.image %}
      <a class="SC-Menu_image" href="{{ menu_item.link_target }}">
        <img loading="lazy" src="{{ menu_item.image.small_url }}" alt="{{ menu_item.image.alt_text }}"/>
      </a>
    {%- endif %}

    <a class="SC-Menu_link"{% if level == 1 %} data-menu-init="{{ menu_item.identifier }}"{% endif %} href="{{ menu_item.link_target }}">
      {{ menu_item.link_label }}
    </a>

    {%- if menu_item.child_category_levels > 0 %}
      <ul class="SC-Menu tier{{ lvl }}{% if menu_item.style_classes %} {{ menu_item.style_classes }}{% endif %}"{% if level == 1 %} data-menu="{{ menu_item.identifier }}"{% endif %} id="SC-Menu-{{ parent_id }}-{{ menu_item.identifier }}">
        {% assign parent_id = menu_item.identifier %}
        {%- if menu_item.style_classes contains 'dropdown' or menu_item.style_classes contains 'mega' %}
          <button data-menu-x class="SC-Menu_button sc-mb" type="button">
            Back
          </button>
        {%- endif %}
        {% for child in menu_item.child_categories %}
          {% render "menu/child_item",
                    parent_id: parent_id,
                    child_item: child,
                    level: lvl,
                    child_category_levels: menu_item.child_category_levels %}
        {% endfor %}
        {% for menu_item in menu_item.menu_items %}
          {% render "menu/menu_item",
                      parent_id: parent_id,
                      menu_item: menu_item,
                      level: lvl,
                      child_category_levels: menu_item.child_category_levels %}
        {% endfor %}
      </ul>
    {%- endif %}
  </li>

{%- else %}
  <li class="SC-Menu_item tier{{ level }}{% if menu_item.style_classes %} {{ menu_item.style_classes }}{% endif %}" id="SC-MenuItem-{{ parent_id }}-{{ menu_item.identifier }}">
    {%- if menu_item.image %}
      <a class="SC-Menu_image" href="{{ menu_item.link_target }}">
        <img loading="lazy" src="{{ menu_item.image.small_url }}" alt="{{ menu_item.image.alt_text }}"/>
      </a>
    {%- endif %}
    <a class="SC-Menu_link" href="{{ menu_item.link_target }}">
      {{ menu_item.link_label }}
    </a>
  </li>
{%- endif %}

Theme Template Key: snippets/menu/child_item

{% assign lvl = level | plus: 1 %}

{%- if child_item.children.size > 0 and child_category_levels > 1 %}
  <li class="SC-Menu_item tier{{ level }} parent" id="SC-MenuItem-{{ parent_id }}-{{ child_item.id }}">
    <a class="SC-Menu_link" href="{{ child_item.path }}" data-menu-init="{{ child_item.identifier }}">
      {{ child_item.name }}
    </a>
    <ul class="SC-Menu tier{{ lvl }}" data-menu="{{ child_item.identifier }}" id="SC-Menu-{{ child_item.id }}">
      {% for child in child_item.children %}
        {% render "menu/child_item",
                    parent_id: child_item.id,
                    child_item: child,
                    level: lvl %}
      {% endfor %}
    </ul>
  </li>

{%- else %}
  <li class="SC-Menu_item tier{{ level }}" id="SC-MenuItem-{{ parent_id }}-{{ child_item.id }}">
    <a class="SC-Menu_link" href="{{ child_item.path }}">
      {{ child_item.name }}
    </a>
  </li>
{%- endif %}

Content Pages

These snippets are used when displaying Content Pages, such as overwriting how an article shows or is displayed.

Theme Template Key: snippets/pages/sidebar

<nav>
  <ul class="SC-LinkList">
    {% assign pages = current_page.root_page.children %}
    {% for page in pages %}
      <li class="SC-LinkList_item">
        <a href="{{ page.path }}" class="SC-LinkList_link {% if page == current_page %}is-active{% endif %}">{{ page.title }}</a>
        <ul>
          {% assign child_pages = page.children %}
          {% for child_page in child_pages %}
            <li><a href="{{ child_page.path }}">{{ child_page.title }}</a></li>
          {% endfor %}
        </ul>
      </li>
    {% endfor %}
  </ul>
</nav>

Articles

Article snippets relate to showing the articles index page grid, sidebar of found articles and each specific article card.

Grid

Theme Template Key: snippets/articles/grid

{%- if articles.size > 0 %}
  {% paginate articles by 9 %}
    <div class="SC-CardGrid SC-CardGrid-prominent">
      {%- for article in articles %}
        {% render "articles/card", article: article %}
      {%- endfor %}
    </div>
    {% render 'shared/pagination-nav', paginate: paginate %}
  {%- endpaginate %}
{%- else %}
  {% if current_article_category %}
    <div class="sc-shade-neutral">
      {{ "articles.category.no_articles" | t }}
    </div>
  {%- else %}
    <div class="Fallback">
      {{ "articles.index.no_articles" | t }}
    </div>
  {%- endif %}
{%- endif %}

Theme Template Key: snippets/articles/sidebar

<nav class="SC-PageNav">
  <div class="SC-PageNav_heading">
    {{ "articles.sidebar.heading" | t }}
  </div>
  {% paginate all_article_categories by all_article_categories.size %}
    {% for category in all_article_categories %}
      <a href="{{ category.path }}" class="SC-PageNav_link{% if current_article_category != blank and category.id == current_article_category.id %} is-current{% endif %}">{{ category.name }}</a>
    {% endfor %}
  {% endpaginate %}
</nav>

Card

Theme Template Key: snippets/articles/card

<div class="SC-CardGrid_item">
  <a href="{{ article.path }}" class="SC-ArticleCard sc-mb-spacious">
    {%- if article.hero_image != blank %}
      <div class="SC-ArticleCard_image">
        <img src="{{ article.hero_image.medium_url }}" loading="lazy">
      </div>
    {%- endif %}
    <h3 class="SC-ArticleCard_heading">
      {{ article.title }}
    </h3>
    {%- if article.publish_on != blank %}
      <div class="SC-ArticleCard_date">
        {{ article.publish_on | date: "%B %-d, %Y" }}
      </div>
    {%- endif %}
    {%- if article.summary_content != blank %}
      <div class="SC-ArticleCard_summary" %>
        {{ article.summary_content }}
      </div>
    {%- endif %}
  </a>
</div>

Locations

Location snippets relate to the location finder and it’s related objects.

Product

Theme Template Key: snippets/locations/product

{% default location_group: blank %}
{% default product: blank %}

{% if theme_variables["locations.search.allow_product_filtering"] == "true" and current_request.params.ref != blank %}
  <input type="hidden" name="ref" value="{{ current_request.params.ref }}">
  <div data-location-product-filter class="sc-bg-white sc-mb-small sc-depth-foreground">
    <div class="sc-shadow-2 sc-border sc-border-radius sc-flex-row sc-gap-small sc-p-small sc-align-items-center">
      {% if product != blank %}
        {% if product.image != blank %}
          <a class="sc-font-zero" href="{{ product.path }}">
            <img src="{{ product.image.small_url }}" width="40">
          </a>
        {% endif %}
        <div class="sc-grow">
          <div>
            <div class="sc-font-small sc-mb-micro">
              <a href="{{ product.path }}">{{ product.name }}</a>
            </div>
            <div class="sc-font-tiny sc-shade-dark">
              {{ product.product_code }}
            </div>
          </div>
        </div>
      {% else %}
        {{ "locations.search.product.not_found" | t }}
      {% endif %}
      <button class="SC-Icon SC-Icon-close" type="button" data-location-product-filter-close>
        {% render "icons/close" %}
      </button>
    </div>
  </div>
  <script>
  const closeProductFilterButton = document.querySelector("[data-location-product-filter-close]")

  if (closeProductFilterButton) {
    closeProductFilterButton.addEventListener("click", () => {
      let params = new URLSearchParams(window.location.search)
      params.delete("ref");
      window.location.search = params;
    });
  }
  </script>
{% endif %}

Result Card

Theme Template Key: snippets/locations/result_card

{% default match: blank %}
{% default distance_unit: "metric" %}
{% default distance_string: blank %}
{% default google_maps_api_key: blank %}

{% unless match == blank %}
  {% if match.distance_in_kilometers != blank %}
    {% case distance_unit %}
    {% when "imp" %}
      {% assign distance = match.distance_in_miles | round: 1 %}
      {% assign unit = "locations.search.results.abbr.imperial" | t %}
    {% else %}
      {% assign distance = match.distance_in_kilometers | round: 1 %}
      {% assign unit = "locations.search.results.abbr.metric" | t %}
    {% endcase %}

    {% capture distance_string %}
      {{ "locations.search.results.formatters.distance_with_unit" | t: number: distance, unit: unit }}
    {% endcapture %}
  {% endif %}

  <div
    class="sc-bg-white sc-border sc-border-radius sc-shadow sc-pos-relative sc-flex-col"
    style="min-width: 340px"
    itemscope itemtype="https://schema.org/LocalBusiness"
    data-location
    data-id="{{ match.identifier }}"
    data-name="{{ match.name }}"
    data-street="{{ match.street }}"
    data-city="{{ match.city }}"
    data-state="{{ match.state }}"
    data-country="{{ match.country }}"
    data-postcode="{{ match.postal_code }}"
    data-lat="{{ match.latitude }}"
    data-lng="{{ match.longitude }}"
    data-distance="{{ distance_string }}"
    data-phone="{{ match.phone }}"
    data-website="{{ match.website }}">

    <div itemprop="geo" itemscope itemtype="https://schema.org/GeoCoordinates">
      <meta itemprop="latitude" content="{{ match.latitude }}"/>
      <meta itemprop="longitude" content="{{ match.longitude }}"/>
    </div>
    <button class="sc-flex-row sc-align-items-center sc-text-left sc-grow sc-gap-medium sc-ps-base sc-pe-medium" type="button">
      {% unless match.logo == blank %}
        <img src="{{ match.logo.pico_url }}" alt="{{ match.name }}" width="60">
      {% endunless %}
      <span class="sc-flex-col sc-expand sc-gap-micro sc-font-small">
        <div itemprop="name" class="sc-truncate">
          <strong>{{ match.name }}</strong>
        </div>
        {% if distance_string != blank %}
          <div class="sc-shade-dark">
            {{ "locations.search.results.formatters.distance_away" | t: distance: distance_string }}
          </div>
        {% endif %}
        <div class="sc-truncate sc-shade-dark">
          {% render "shared/address_multi_line", street1: match.street, city: match.city, state: match.state, country: match.country, postal_code: match.postal_code %}
        </div>
        {% unless match.phone == blank %}
          <div class="sc-shade-dark sc-hide-up-to-medium" itemprop="telephone">
            {{ match.phone }}
          </div>
        {% endunless %}
      </span>
    </button>
    <menu class="sc-flex-row sc-gap-small sc-text-center sc-p-tiny sc-font-small sc-border-top">
      {% if google_maps_api_key == blank %}
        {% unless match.website == blank %}
          <a class="sc-hover-bg-primary-subtle sc-border-radius sc-one-half sc-p-small sc-font-tiny sc-font-bold sc-color-primary" itemprop="url" href="{{ match.website }}" target="_blank">
            {{ "locations.search.results.menu.website" | t }}
          </a>
        {% endunless %}
      {% else %}
        <a
          data-directions
          class="sc-hover-bg-primary-subtle sc-border-radius sc-one-half sc-p-small sc-font-tiny sc-font-bold sc-color-primary"
          href="https://www.google.com/maps/dir/?api={{ google_maps_api_key }}"
          target="_blank">
          {{ "locations.search.results.menu.directions" | t }}
        </a>
      {% endif %}
      <a data-details class="sc-hover-bg-primary-subtle sc-border-radius sc-one-half sc-p-small sc-font-tiny sc-font-bold sc-color-primary" href="{{ match.path }}?s={{ current_request.query_string | url_encode }}">
        {{ "locations.search.results.menu.view" | t }}
      </a>
    </menu>
  </div>
{% endunless %}

Result Summary

Theme Template Key: snippets/locations/results_summary

{% default found_locations: "no-search" %}

<div
  data-location-search-summary
  data-location-results-count="{{ found_locations.size }}"
  data-default="{{ "locations.search.results.default" | t }}"
  class="sc-text-center sc-shade-neutral sc-font-tiny sc-p-small">
  {% if found_locations == "no-search" %}
    {{ "locations.search.results.default" | t }}
  {% else %}
    {% case current_request.params.distance_unit %}
    {% when "imp" %}
      {% assign unit = "locations.search.results.abbr.imperial" | t %}
    {% else %}
      {% assign unit = "locations.search.results.abbr.metric" | t %}
    {% endcase %}
    {% if found_locations.size == 0 %}
      {{ "locations.search.results.count.none" | t }}
    {% elsif found_locations.size == 1 %}
      {{ "locations.search.results.count.singular" | t: count: "1" }}
    {% else %}
      {{ "locations.search.results.count.plural" | t: count: found_locations.size }}
    {% endif %}
    {% if current_request.params.search_by == "near" %}
      {{ "locations.search.results.formatters.within_distance_of_origin" | t: number: current_request.params.distance, unit: unit, origin: current_request.params.address }}
    {% endif %}
    {% unless current_request.params.postcode == blank  %}
      {{ "locations.search.results.postcode" | t: postcode: current_request.params.postcode }}
    {% endunless %}
  {% endif %}
</div>

Category Form

Theme Template Key: snippets/forms/category

{% default form_id: blank %}
{% default location_group: blank %}

{% unless theme_variables["locations.search.allow_product_filtering"] == "true" and current_request.params.ref != blank %}
  {% if location_group.categories.size > 0 %}
    {% assign categories = location_group.categories | sort: "name" %}

    {% if theme_variables["locations.search.multiple_categories"] == "true" %}
      <div data-selector="categories" class="sc-pos-relative sc-expand sc-m-none sc-mb-small">
        <button data-dropdown-trigger class="sc-input-height sc-bg-white sc-shadow sc-border-light sc-border-radius sc-flex-row sc-align-items-center sc-expand sc-ps-medium" type="button">
          <span data-dropdown-selection class="sc-grow sc-truncate">
            {{ "locations.search.forms.common.fields.category.label" | t }}
          </span>
          {% render "icons/chevron", width: 11 %}
        </button>
        <menu data-dropdown-target class="sc-hide sc-flex-col sc-align-items-start sc-bg-white sc-border-radius sc-depth-foreground sc-rounded sc-shadow-3 sc-pos-absolute sc-expand sc-pe-small">
          {% assign categories = location_group.categories | sort: "name" %}
          {% for category in categories %}
            <div class="SC-Checkbox sc-m-none sc-ps-medium sc-pe-micro">
              <input data-dropdown-option="{{ category.name }}" class="SC-Checkbox_input" id="{{ category.id }}" value="{{ category.id }}" name="categories[]" {% if current_request.params.categories contains category.id %}checked{% endif %} type="checkbox"/>
              <label class="SC-Checkbox_label sc-pe-tiny" for="{{ category.id }}">{{ category.name }}</label>
            </div>
          {% endfor %}
        </menu>
      </div>
    {% else %}
      <div class="SC-Field sc-flex-grow sc-mb-small">
        <select name="category" class="SC-Field_select" id="locations_category__{{ form_id }}">
          <option value="">{{ "locations.search.forms.common.fields.category.prompt" | t }}</option>
          {% for category in categories %}
            <option value="{{ category.id }}" {% if category.id == current_request.params.category %}selected{% endif %}>{{ category.name }}</option>
          {% endfor %}
        </select>
      </div>
    {% endif %}
  {% endif %}
{% endunless %}

Exact Form

Theme Template Key: snippets/forms/exact

{% default location_group: blank %}
{% default found_locations: "no-search" %}

{% assign states = location_group.locations | pluck: "state" | uniq | sort_natural %}
{% assign countries = location_group.locations | pluck: "country" | uniq | sort_natural %}

<section class="sc-pos-relative sc-bg-lightest" data-location-search>
  <div class="sc-bg-white sc-shadow-2 sc-pt-base sc-pb-xlarge">
    <header class="sc-text-center">
      <h1>{{ location_group.name }}</h1>
    </header>
    <form
      class="sc-container sc-container-capsule"
      method="get"
      data-location-search-form="exact"
      data-location-search-group="{{ location_group.identifier }}">
      <input type="hidden" name="search_by" value="exact">
      {% if countries.size > 1 %}
        {% assign label = "locations.search.forms.exact.fields.country.label" | t %}
        {% assign all_label = "locations.search.forms.exact.fields.country.all_label" | t %}
        {% render "shared/dropdown",
            selection: current_request.params.country,
            options: countries,
            name: "country",
            style_class: "sc-mb-small",
            label: label,
            all_label: all_label %}
      {% endif %}

      <div class="sc-flex-row sc-gap-small sc-align-items-center">
        {% if countries.size > 1 and current_request.params.country == blank %}
          <div data-combined-state-selector class="sc-pos-relative sc-expand sc-mb-small">
            <button data-dropdown-trigger class="sc-input-height sc-bg-white sc-shadow sc-border-light sc-border-radius sc-top-100 sc-flex-row sc-expand sc-align-items-center sc-ps-medium" type="button">
              <span data-dropdown-selection data-default="{{ "locations.search.forms.exact.fields.state.label" | t }}" class="sc-grow">
                {% if current_request.params.state == blank %}
                  {{ "locations.search.forms.exact.fields.state.label" | t }}
                {% else %}
                  {{ current_request.params.state }}
                {% endif %}
              </span>
              {% render "icons/chevron", width: 11 %}
            </button>
            <menu data-dropdown-target aria-expanded="false" class="sc-hide sc-max-50vh sc-overflow-y-scroll sc-sides-0 sc-bg-white sc-depth-foreground sc-border-radius sc-shadow-3 sc-pos-absolute sc-flex-col sc-expand sc-p-none">
              {% for country in countries %}
                {% assign country_states = location_group.locations | where: "country", country | pluck: "state" | uniq | sort_natural %}
                <fieldset class="sc-pb-small{% unless forloop.last == true %} sc-border-bottom{% endunless %}">
                  <h4 class="sc-font-small sc-shade-dark sc-mt-medium sc-mb-small sc-ms-medium">
                    {{ country }}
                  </h4>
                  {% for state in country_states %}
                    <label class="sc-cursor-pointer sc-hover-bg-lightest sc-pe-small sc-ps-medium sc-m-none sc-pos-relative sc-flex-row sc-gap-small sc-align-items-center sc-expand" type="button">
                      <input data-dropdown-option{% if state == current_request.params.state %} checked{% endif %} data-country="{{ country }}" type="radio" name="state" value={{ state }} id="{{ state }}" />
                      {{ state }}
                    </label>
                  {% endfor %}
                </fieldset>
              {% endfor %}
            </menu>
          </div>
        {% endif %}

        {% for country in countries %}
          {% assign label = "locations.search.forms.exact.fields.state.label" | t %}
          {% assign all_label = "locations.search.forms.exact.fields.state.all_label" | t %}
          {% assign country_states = location_group.locations | where: "country", country | pluck: "state" | uniq | sort_natural %}

          {% if current_request.params.country == country or countries.size == 1 %}
            {% assign style_class = "sc-mb-small" %}
            {% assign selection = current_request.params.state %}
          {% else %}
            {% assign style_class = "sc-hide sc-mb-small" %}
            {% assign selection = null %}
          {% endif %}
          {% render "shared/dropdown",
              id: country,
              selection: selection,
              options: country_states,
              name: "state",
              style_class: style_class,
              label: label,
              all_label: all_label %}
        {% endfor %}

        <div class="SC-Field sc-mb-small">
          <input
            type="text"
            name="postcode"
            class="SC-Field_input sc-expand"
            id="locations_postcode"
            placeholder="{{ "locations.search.forms.exact.fields.postcode.placeholder" | t }}"
            value="{{ current_request.params.postcode }}"/>
        </div>
      </div>
      {% render "locations/product", product: filter_product, location_group: location_group %}
      {% render "locations/forms/category", location_group: location_group, form_id: "exact" %}
      <button class="SC-Button SC-Button-primary sc-expand" type="submit">
        {{ "locations.search.forms.exact.buttons.submit" | t: name: location_group.name }}
      </button>
    </form>
  </div>

  {% unless found_locations == "no-search" %}
    <div class="sc-bg-lightest sc-pb-large">
      <div class="sc-pe-small" style="max-width: 680px; margin: 0 auto;">
        {% render "locations/results_summary", found_locations: found_locations %}
      </div>
      <div class="sc-container sc-overflow-x-scroll sc-flex-wrap sc-flex-col sc-gap-small" style="max-height: 420px;" data-location-search-results>
        {% for match in found_locations %}
          {% render "locations/result_card", match: match, distance_unit: current_request.params.distance_unit %}
        {% endfor %}
      </div>
    </div>
  {% endunless %}
  {% render "shared/loader", active: true, contextual: true %}
</section>

Near Form

Theme Template Key: snippets/snippets/home

{% default location_group: blank %}
{% default found_locations: "no-search" %}
{% default google_maps_api_key: blank %}

<article data-location-search class="sc-pos-relative sc-bg-lightest sc-md:flex-row">
  <form
    class="sc-md:40vw sc-lg:30vw sc-no-shrink sc-pos-relative sc-flex-col sc-shadow-2"
    method="get"
    data-location-search-form="near"
    data-location-search-group="{{ location_group.identifier }}"
    data-distance-unit-imperial="{{ "locations.search.results.abbr.imperial" | t }}"
    data-distance-unit-metric="{{ "locations.search.results.abbr.metric" | t }}">

    <input type="hidden" name="search_by" value="near">
    <input type="hidden" name="distance_unit">
    <input type="hidden" name="lat" value="{{ current_request.params.lat }}">
    <input type="hidden" name="lng" value="{{ current_request.params.lng }}">

    <header class="sc-expand sc-pos-relative sc-depth-neutral sc-bg-white sc-shadow-2 sc-p-base">
      <h1 class="sc-mb-small">{{ location_group.name }}</h1>
      <div class="sc-flex-row sc-gap-small">
        <div class="SC-Field sc-grow sc-mb-small">
          <label class="SC-Field_label" for="locations_distance">
            {{ "locations.search.forms.near.fields.address.label" | t }}
            <span data-location-error class="sc-color-error sc-hide">
              {{ "locations.search.forms.near.fields.address.errors.invalid_address" | t }}
            </span>
            <button data-use-geoloc class="SC-Link sc-hide" type="button">
              {{ "locations.search.forms.near.fields.address.use_current_location" | t }}
            </button>
          </label>
          <input
            type="text"
            name="address"
            class="SC-Field_input sc-expand"
            id="locations_address"
            placeholder="{{ "locations.search.forms.near.fields.address.placeholder" | t }}"
            value="{{ current_request.params.address }}"
            autofocus>
        </div>
        <div class="SC-Field sc-mb-small" style="width: 110px">
          <label class="SC-Field_label" for="locations_distance">
            {{ "locations.search.forms.near.fields.distance.label" | t }}
            (<span data-distance-unit></span>)
          </label>
          <input type="number" name="distance" class="SC-Field_input sc-expand" id="locations_distance" min="1" placeholder="{{ "locations.search.forms.near.fields.distance.placeholder" | t }}" value="{{ current_request.params.distance | default: theme_variables["locations.search.default_distance"] }}">
        </div>
      </div>
      {% render "locations/product", product: filter_product, location_group: location_group %}
      {% render "locations/forms/category", location_group: location_group, form_id: "near" %}
      <button class="SC-Button SC-Button-primary sc-expand" type="submit" disabled data-submit>{{ "locations.search.forms.exact.buttons.submit" | t: name: location_group.name }}</button>
    </header>
    {% render "locations/results_summary", found_locations: found_locations %}
    {% unless found_locations == "no-search" %}
      {% if found_locations.size > 0 %}
        <div data-location-search-results
          class="sc-pos-relative sc-overflow-scroll sc-flex-row sc-md:flex-col sc-gap-small sc-pt-micro sc-ps-small sc-pb-small sc-md:p-small">
          {% for match in found_locations %}
            {% render "locations/result_card",
                match: match,
                google_maps_api_key: google_maps_api_key,
                distance_unit: current_request.params.distance_unit %}
          {% endfor %}
        </div>
      {% endif %}
    {% endunless %}
    {% render "shared/loader", active: true, contextual: true %}
  </form>

  <section data-location-search-map class="sc-color-primary" style="width: 100%; height: 100%;">
  </section>
</article>

Icons

These snippets relate to the various icons used within StoreConnect, overwriting them in the theme will replace them through out the site at once.

Chevron

Theme Template Key: snippets/icons/chevron

{% default style_class: blank %}
{% default rotate: blank %}
{% default width: 14 %}

<svg {% if style_class %}class="{{ style_class }}{% endif style_class %}" width="{{ width }}" viewBox="0 0 100 100">
  <path d="M56.7,75.75 L95.4,37.05 C98.8,33.65 98.8,28.05 95.4,24.65 C92,21.25 86.4,21.25 83,24.65 L50.5,57.05 L18,24.55 C14.6,21.15 9,21.15 5.6,24.55 C3.9,26.25 3,28.55 3,30.75 C3,33.05 3.9,35.25 5.6,36.95 L44.3,75.75 C47.7,79.15 53.3,79.15 56.7,75.75 Z"></path>
</svg>

Close

Theme Template Key: snippets/icons/close

{% default class: blank %}

<svg class="{{ class }}" viewBox="0 0 100 100">
  <g><path d="M20.3015152,7.57359313 L49.9995542,37.2715542 L79.6984848,7.57359313 C83.2132034,4.0588745 88.9116882,4.0588745 92.4264069,7.57359313 C95.9411255,11.0883118 95.9411255,16.7867966 92.4264069,20.3015152 L62.7265542,49.9995542 L92.4264069,79.6984848 C95.9411255,83.2132034 95.9411255,88.9116882 92.4264069,92.4264069 C88.9116882,95.9411255 83.2132034,95.9411255 79.6984848,92.4264069 L49.9995542,62.7265542 L20.3015152,92.4264069 C16.7867966,95.9411255 11.0883118,95.9411255 7.57359313,92.4264069 C4.0588745,88.9116882 4.0588745,83.2132034 7.57359313,79.6984848 L37.2715542,49.9995542 L7.57359313,20.3015152 C4.0588745,16.7867966 4.0588745,11.0883118 7.57359313,7.57359313 C11.0883118,4.0588745 16.7867966,4.0588745 20.3015152,7.57359313 Z"></path></g>
</svg>

Shared

These snippets provide various shared templates that are used throughout the site.

Address Multi-line

Theme Template Key: snippets/shared/address_multi_line

{% default street1: blank %}
{% default street2: blank %}
{% default city: blank %}
{% default state: blank %}
{% default country: blank %}
{% default postal_code: blank %}

<address itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
  {% unless street1 == blank and street2 == blank %}
    <div itemprop="streetAddress">
      {% unless street1 == blank %}{{ street1 }}{% endunless %}
      {% unless street2 == blank %}{{ street2 }}{% endunless %}
    </div>
  {% endunless %}
  {% unless city == blank and state == blank %}
    <div class="sc-mt-micro">
      {% unless city == blank %}
        <span itemprop="addressLocality">
          {{ city }}
        </span>
      {% endunless %}
      {% unless state == blank %}
        <span itemprop="addressRegion">
          {{ state }}
        </span>
      {% endunless %}
      {% unless postal_code == blank %}
        <span itemprop="postalCode">
          {{ postal_code }}
        </span>
      {% endunless %}
    </div>
  {% endunless %}
</address>

Address Single-line

Theme Template Key: snippets/snippets/home

{% default street1: blank %}
{% default street2: blank %}
{% default city: blank %}
{% default state: blank %}
{% default country: blank %}
{% default postal_code: blank %}

{%- if street1 != blank %}{{ street1 }}{%- endif %}
{%- if street2 != blank %}{{ street2 }}{%- endif %}
{%- if city != blank %}{{ city | prepend: ", " }}{%- endif %}
{%- if state != blank %}{{ state| prepend: ", " }}{%- endif %}
{%- if country != blank %}{{ country| prepend: ", " }}{%- endif %}
{%- if postal_code != blank %}{{ postal_code| prepend: " " }}{%- endif %}

Theme Template Key: snippets/shared/dropdown

{% default label: blank %}
{% default all_label: blank %}
{% default selection: blank %}
{% default options: blank %}
{% default id: blank %}
{% default name: blank %}
{% default style_class: blank %}

<div data-selector="{{ name }}"{% unless id == blank %} data-id="{{ id }}" {% endunless %}class="{% unless style_class == blank %}{{ style_class }} {% endunless %}sc-pos-relative sc-expand">
  <button data-dropdown-trigger class="sc-input-height sc-bg-white sc-shadow sc-border-light sc-border-radius sc-top-100 sc-flex-row sc-expand sc-align-items-center sc-ps-medium" type="button">
    <span data-dropdown-selection data-default="{{ label }}" class="sc-grow">
      {% if selection == blank %}
        {{ label }}
      {% else %}
        {{ selection }}
      {% endif %}
    </span>
    {% render "icons/chevron", width: 11 %}
  </button>
  <menu data-dropdown-target aria-expanded="false" class="sc-hide sc-max-50vh sc-overflow-y-scroll sc-sides-0 sc-bg-white sc-depth-foreground sc-border-radius sc-shadow-3 sc-pos-absolute sc-flex-col sc-expand sc-p-none">
    <label class="sc-cursor-pointer sc-hover-bg-lightest sc-p-medium sc-m-none sc-pos-relative sc-flex-row sc-gap-small sc-align-items-center sc-expand" type="button">
      <input data-dropdown-option{% if selection == blank %} checked{% endif %} class="sc-hide" value="" id="all" type="radio" name="{{ name }}"/>
      {{ all_label }}
    </label>
    {% for option in options %}
      <label class="sc-cursor-pointer sc-hover-bg-lightest sc-p-medium sc-m-none sc-pos-relative sc-flex-row sc-gap-small sc-align-items-center sc-expand" type="button">
        <input data-dropdown-option{% if option == selection %} checked{% endif %} class="sc-hide" value="{{ option }}" id="{{ option }}" type="radio" name="{{ name }}"/>
        {{ option }}
      </label>
    {% endfor %}
  </menu>
</div>

Loader

Theme Template Key: snippets/shared/loader

{% default contextual: true %}
{% default active: false %}

<div class="Loader{% if active %} is-active{% endif %}{% if contextual %} is-contextual{% endif %}" data-loader>
  <svg class="spinner" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
    <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
  </svg>
</div>

Theme Template Key: snippets/shared/page_header

{% default heading: blank %}
{% default sub_heading: blank %}
{% default summary: blank %}
{% default modifier: blank %}
{% default image: blank %}

 <header class="SC-PageHeader {{ modifier }}" {%- if image != blank %}style="background-image: url({{ image.huge_url }})"{% endif %}>
  {%- if heading != blank %}
    <h1 class="SC-PageHeader_heading">
      {{ heading }}
    </h1>
  {%- endif %}
  {%- if sub_heading != blank %}
    <div class="SC-PageHeader_subheading">
      {{ sub_heading }}
    </div>
  {%- endif %}
  {%- if summary != blank %}
    <div class="SC-PageHeader_summary">
      {{ summary }}
    </div>
  {%- endif %}
</header>

Pagination Nav

Theme Template Key: snippets/shared/pagination-nav

{%- if paginate.pages > 1 -%}
  <nav class="pagination" role="navigation">
    {%- for part in paginate.parts -%}
      {%- if part.gap? -%}
        <span class="gap">&hellip;</span>
      {%- elsif part.current? -%}
        <span class="page current">
          {{ part.page }}
        </span>
      {%- else -%}
        <a href="{{ part.url }}" class="page">
          {{ part.page }}
        </a>
      {%- endif -%}
    {%- endfor -%}
  </nav>

  <nav class="pagination sc-me" role="navigation">
    {%- if paginate.previous -%}
      <span class="first">
        <a href="{{ paginate.first.url }}" rel="first">
          &laquo;&nbsp;{{ 'pagination.nav.first' | t }}
        </a>
      </span>
      <span class="prev">
        <a href="{{ paginate.previous.url }}" rel="prev">
          &lsaquo;&nbsp;{{ 'pagination.nav.previous' | t }}
        </a>
      </span>
    {%- else -%}
      <span class="first disabled">
        &laquo;&nbsp;{{ 'pagination.nav.first' | t }}
      </span>
      <span class="prev disabled">
        &lsaquo;&nbsp;{{ 'pagination.nav.previous' | t }}
      </span>
    {%- endif -%}

    {%- if paginate.next -%}
      <span class="next">
        <a href="{{ paginate.next.url }}" rel="next">
          {{ 'pagination.nav.next' | t }}&nbsp;&rsaquo;
        </a>
      </span>
      <span class="last">
        <a href="{{ paginate.last.url }}" rel="last">
          {{ 'pagination.nav.last' | t }}&nbsp;&raquo;
        </a>
      </span>
    {%- else -%}
      <span class="next disabled">
        {{ 'pagination.nav.next' | t }}&nbsp;&rsaquo;
      </span>
      <span class="last disabled">
        {{ 'pagination.nav.last' | t }}&nbsp;&raquo;
      </span>
    {%- endif -%}
  </nav>
{%- endif -%}

Back to Documentation

Theme Liquid Snippets

Menus

Menu Item

Child Menu Item

Content Pages

Side Bar

Articles

Grid

Sidebar

Card

Locations

Product

Result Card

Result Summary

Category Form

Exact Form

Near Form

Icons

Chevron

Close

Shared

Address Multi-line

Address Single-line

Loader

Page Header

Theme Liquid Snippets

Menus

Menu Item

Child Menu Item

Content Pages

Side Bar

Articles

Grid

Sidebar

Card

Locations

Product

Result Card

Result Summary

Category Form

Exact Form

Near Form

Icons

Chevron

Close

Shared

Address Multi-line

Address Single-line

Dropdown

Loader

Page Header

Pagination Nav