Theme Pages Liquid Code
In order to display your pages, articles, products etc, StoreConnect first chooses one of 7 possible pages. These pages are inserted directly within the <body></body> tags of your site and can be modified by customising the below templates within the Theme Builder.
These are the only supported pages for editing. Future pages such as /cart, /checkout, /products, /orders etc will be made available in future releases.
Home Page
Displayed when the user visits the root URL of your site, which is either / or a /path as defined on your Store record.
Home Page - Theme Template Code
Theme Template Key: pages/home
{% capture body_content %}{{ current_page.body_content }}{% endcapture %}
{% if body_content != blank %}
{{ body_content }}
{%- else %}
<div class="Fallback">
Add a content page (and configure your desired content blocks) and set it as the store's home page by editing the appropriate store in your Salesforce organization.
</div>
{%- endif %}
Content Show Page
Displayed when the user visits a page defined on your site according to the path defined within the page, such as /about-us for a page with the path /about-us
Content Show Page - Theme Template Code
Theme Template Key: pages/page
<article class="sc-container sc-container-spacious" id="SC-page-{{ current_page.identifier }}">
<div class="SC-Grid">
{% assign sidebar_pages = current_page.root_page.children %}
{%- if sidebar_pages.size > 0 %}
<aside class="SC-Grid_sidebar">
{% render "pages/sidebar" %}
</aside>
{%- endif %}
<section class="SC-Grid_main rich-text">
{% render "shared/page_header", heading: current_page.title, sub_heading: current_page.subtitle %}
{{ current_page.body_content }}
</section>
</div>
</article>
Article Category Index Page
Displayed when the user visits /articles or an article category such as /article/category-name.
Article Category Index Page - Theme Template Code
Theme Template Key: pages/article_category
{% default page_id: "index" %}
{% if current_article_category %}
{% assign page_id = current_article_category.identifier %}
{% endif %}
<div class="sc-container sc-me" id="SC-article_category-{{ page_id }}">
<div class="SC-Grid">
{% if all_article_categories.size > 0 %}
<div class="SC-Grid_sidebar">
{% render "articles/sidebar" %}
</div>
{%- endif %}
<div class="SC-Grid_main">
<section class="SC-ArticleCategory">
{% if current_article_category %}
{% render "shared/page_header", heading: current_article_category.name %}
{%- if current_article_category.introduction_content %}
<div class="SC-ArticleCategory_introduction sc-rich-text">
{{ current_article_category.introduction_content }}
</div>
{%- endif %}
{% render "articles/grid", articles: current_article_category.articles %}
{%- if current_article_category.information_content %}
<div class="SC-ArticleCategory_information sc-rich-text">
{{ current_article_category.information_content }}
</div>
{%- endif %}
{% else %}
{% assign all_articles_heading = "articles.index.heading" | t %}
{% render "shared/page_header", heading: all_articles_heading %}
{% render "articles/grid", articles: all_articles %}
{% endif %}
</section>
</div>
</div>
</div>
Article Show Page
Displayed when the user visits a specific article such as /articles/2020-my-article for an Article with the path 2020-my-article.
Article Show Page - Theme Template Code
Theme Template Key: pages/article
<div class="sc-container sc-me" id="SC-article-{{ current_article.identifier }}">
<div class="SC-Grid">
{% if all_article_categories.size > 0 %}
<div class="SC-Grid_sidebar">
{% render "articles/sidebar" %}
</div>
{%- endif %}
<div class="SC-Grid_main">
<section class="sc-rich-text">
<article class="SC-Article">
{% render "shared/page_header", heading: current_article.title %}
{%- if current_article.subtitle != blank %}
<p class="sc-font-medium sc-shade-neutral">
{{ current_article.subtitle }}
</p>
{%- endif %}
{%- if current_article.hero_image != blank %}
<img src="{{ current_article.hero_image.huge_url }}" class="sc-mb-base" loading="lazy">
{%- endif %}
{%- if current_article.publish_on != blank %}
<div class="sc-mb-base sc-shade-neutral">
{{ current_article.publish_on | date: "%B %-d, %Y" }}
</div>
{%- endif %}
{{ current_article.body_content }}
</article>
</section>
</div>
</div>
</div>
Locations Search Page
Displayed when the visitor is viewing the Location finder within StoreConnect.
Locations Search Page - Theme Template Code
Theme Template Key: pages/locations
{% default location_group: blank %}
{% default filter_product: blank %}
{% assign google_maps_api_key = store_variables['google_maps_api_key'] %}
<article id="location-search-{{ location_group.identifier }}">
{% unless google_maps_api_key == blank %}
{% render "locations/forms/near",
location_group: location_group,
filter_product: filter_product,
found_locations: found_locations,
google_maps_api_key: google_maps_api_key %}
{% else %}
{% render "locations/forms/exact",
location_group: location_group,
filter_product: filter_product,
found_locations: found_locations %}
{% endunless %}
</article>
<script src="{{ 'location-search.js' | asset_url }}"></script>
{% if google_maps_api_key == blank %}
<script>window.StoreConnect.LocationSearch.init()</script>
{% else %}
<script async src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_api_key }}&libraries=places&callback=StoreConnect.LocationSearch.initWithMap&v=weekly"></script>
{% endif %}
Location Show Page
Displayed when the user visits a specific Location results page from the location finder.
Location Show Page - Theme Template Code
Theme Template Key: pages/location
{% default location_group: blank %}
{% assign nav_path = location_group.path %}
{% assign nav_label = "location.navigation.all_locations" | t: name: location_group.name %}
{% unless current_request.params.s == blank %}
{% assign nav_path = nav_path | append: "?" | append: current_request.params.s %}
{% assign nav_label = "location.navigation.back_to_locations" | t: name: location_group.name %}
{% endunless %}
{% assign google_maps_api_key = store_variables['google_maps_api_key'] %}
<article data-location-search class="sc-pos-relative sc-border-bottom sc-md:flex-row">
<section
itemscope itemtype="https://schema.org/LocalBusiness"
class="sc-md:40vw sc-lg:30vw sc-no-shrink sc-pos-relative sc-flex-col sc-shadow-2">
<div class="sc-shadow-2 sc-p-base">
<a href="{{ nav_path }}" class="sc-color-primary sc-flex-row sc-gap-tiny sc-align-items-center">
{% render "icons/chevron", width: 12, style_class: "sc-rotate-90" %}
<span>{{ nav_label }}</span>
</a>
</div>
<section class="sc-flex-row sc-align-items-center sc-gap sc-border-bottom sc-pe-large sc-ps-base">
<span class="sc-grow">
<h1 class="sc-font-xlarge sc-mb-small" itemprop="name">
{{ location.name }}
</h1>
<div class="sc-shade-dark">
{% render "shared/address_multi_line",
street1: location.street,
city: location.city,
state: location.state,
country: location.country,
postal_code: location.postal_code %}
</div>
</span>
{% unless location.logo == blank %}
<span class="sc-pr-small">
<img src="{{ location.logo.pico_url }}" alt="{{ location.name }}" width="64">
</span>
{% endunless %}
</section>
<menu class="sc-border-bottom sc-flex-row sc-gap-small sc-text-center sc-p-small sc-font-small">
<a
class="sc-hover-bg-primary-subtle sc-border-radius sc-one-half sc-p-small sc-font-bold sc-color-primary"
href="tel:{{ location.phone }}"
itemprop="telephone">
{{ "location.menu.phone" | t }}
</a>
<a
class="sc-hover-bg-primary-subtle sc-border-radius sc-one-half sc-p-small sc-font-bold sc-color-primary"
href="{{ location.website }}"
target="_blank"
itemprop="url">
{{ "location.menu.website" | t }}
</a>
<a
class="sc-hover-bg-primary-subtle sc-border-radius sc-one-half sc-p-small sc-font-bold sc-color-primary"
href="mailto:{{ location.email }}"
itemprop="email">
{{ "location.menu.email" | t }}
</a>
</menu>
<section class="sc-flex-col sc-gap sc-border-bottom sc-pe-large sc-ps-base">
{% unless location.phone == blank %}
<div class="sc-flex-row sc-align-items-center sc-gap-small">
{{ location.phone }}
</div>
{% endunless %}
{% unless location.email == blank %}
<a class="sc-flex-row sc-align-items-center sc-gap-small" href="mailto:{{ location.email }}">
{{ location.email }}
</div>
{% endunless %}
{% unless location.website == blank %}
<a class="sc-flex-row sc-align-items-center sc-gap-small" href="{{ location.website }}" target="_blank">
{{ location.website }}
</a>
{% endunless %}
</section>
<section class="sc-rich-text sc-pe-large sc-ps-base">
{{ location.info_content }}
</section>
</section>
{% unless google_maps_api_key == blank %}
{% render "shared/loader", active: true, contextual: true %}
<div
data-location-search-map
data-title="{{ location.name }}"
data-lat="{{ location.latitude }}"
data-lng="{{ location.longitude }}"
class="sc-bg-shade-lightest sc-color-primary"
style="width: 100%; height: 100%;"></div>
{% else %}
<iframe
data-location-search-map
class="sc-bg-shade-lightest"
style="width: 100%; height: calc(100vh);"
frameborder="0"
scrolling="no"
marginheight="0"
marginwidth="0"
src="https://maps.google.com/maps?q={{ location.latitude }},{{ location.longitude }}&zoom=6&output=embed">
</iframe>
{% endunless %}
</article>
<script src="{{ 'location-search.js' | asset_url }}"></script>
{% unless google_maps_api_key == blank %}
<script async src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_api_key }}&libraries=places&callback=StoreConnect.LocationSearch.initWithMap&v=weekly"></script>
{% endunless %}
Maintenance Page
Displayed when your store is offline for maintenance. Unlike the other pages here, the Maintenance page renders the entire page on the site, so you must be mindful to define any assets, images etc within the page iteself. It is also best practice to inline any CSS, Javascript or images you need within the page itself so that it will display no matter what is happening with the store itself.
The maintenance page will have the content block defined as a relationship on the store via the s_c__disabled_content_id__c field set as the content_block in this page allowing you to rapidly change things like expected maintenance duration etc without having to edit this page at the theme level each time you take your store offline for maintenance.
Maintenance Page - Theme Template Code
Theme Template Key: pages/maintenance
<!DOCTYPE html>
<html>
<head>
{%- if content_block -%}
<title>{{ content_block.title }}</title>
{%- else -%}
<title>"This store is offline for maintenance (503)"</title>
{%- endif -%}
<meta name="viewport" content="width=device-width,initial-scale=1">
{%- unless content_block and content_block.template == "html" -%}
<style>
.default-maintenance-page {
background-color: #EFEFEF;
color: #2E2F30;
text-align: center;
font-family: arial, sans-serif;
margin: 0;
}
.default-maintenance-page div.dialog {
width: 95%;
max-width: 33em;
margin: 4em auto 0;
}
.default-maintenance-page div.dialog > div {
border: 1px solid #CCC;
border-right-color: #999;
border-left-color: #999;
border-bottom-color: #BBB;
border-top: #00a9ff solid 4px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
background-color: white;
padding: 7px 12% 0;
box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
}
.default-maintenance-page h1 {
font-size: 100%;
color: #2c77b8;
line-height: 1.5em;
}
.default-maintenance-page div.dialog > p {
margin: 0 0 1em;
padding: 1em;
background-color: #F7F7F7;
border: 1px solid #CCC;
border-right-color: #999;
border-left-color: #999;
border-bottom-color: #999;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top-color: #2c77b8;
color: #666;
box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
}
</style>
{%- endunless -%}
</head>
{%- if content_block and content_block.template == "html" -%}
<body>
{{ content_block.render }}
</body>
{%- else -%}
<body class="default-maintenance-page">
<div class="dialog">
{%- if content_block -%}
<div>
<h1>{{ content_block.title }}</h1>
<p>{{ content_block.subtitle }}</p>
</div>
{{ content_block.content }}
{%- else -%}
<div>
<h1>This store is currently offline for maintenance.</h1>
</div>
<p>We have temporarily taken the store offline to complete some upgrades, please try again later.</p>
{%- endif -%}
</div>
</body>
{%- endif -%}
</html>
Back to Documentation