Login, Logout, and Create an account
<ul class="customer-links list-inline">
{% if customer %}
<li><a href="/account"><i class="fa fa-user"></i>{{ customer.first_name | truncate:15 }}</a></li>
<li><a href="/account/logout"><i class="fa fa-unlock-alt"></i>Logout</a></li>
{% else %}
<li><a href="/account/login"><i class="fa fa-unlock-alt"></i>Login</a></li>
{% if shop.customer_accounts_optional %}
<li><a href="/account/register"><i class="fa fa-user-plus"></i>Create an account</a></li>
{% endif %}
{% endif %}
</ul>
Menu / Link Links
<ul>
{% for link in linklists[section.settings.menu].links %}
{% if link.links != blank %}
<li class="megamenu"><a href="{{ link.url }}">{{ link.title }}</a>
<ul>
{% for childlink in link.links %}
<li><a href="{{ childlink.url }}">{{ childlink.title }}</a>
<ul>
{% for sublink in childlink.links %}
<li><a href="{{ sublink.url }}">{{ sublink.title }}</a></li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li>
<a href="{{ link.url }}">
{{ link.title }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
{% schema %}
{
"name": "Header",
"settings": [
{
"type": "header",
"content": "Header"
},
{
"type": "link_list",
"id": "menu",
"label": "Menu",
"default": "main-menu"
}
]
}
{% endschema %}
Logo
<div class="logo col-md-2 d-lg-block">
<a href="/" class="logo-image">
{% if section.settings.logo != blank %}
{% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
<img src="{{ section.settings.logo | img_url: image_size }}"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.logo.alt | default: shop.name }}">
{% else %}
{{ shop.name }}
{% endif %}
</a>
</div>
{% schema %}
{
"name": "Header",
"settings": [
{
"type": "header",
"content": "Header"
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo image"
},
{
"type": "range",
"id": "logo_max_width",
"min": 50,
"max": 250,
"step": 10,
"unit": "px",
"label": "Custom logo width",
"default": 100
}
]
}
{% endschema %}
Product price on listing page
<div class="product-price">
{% if product.compare_at_price > product.price %}
{% if product.price_varies %}
{%- assign sale_price = product.price | money -%}
{{ 'products.product.on_sale_from_html' | t: price: sale_price }}
{% else %}
<span class="price">{{ product.price | money }}</span>
{% endif %}
{% else %}
{% if product.price_varies %}
{%- assign price = product.price | money -%}
{{ 'products.product.from_text_html' | t: price: price }}
{% else %}
<span class="price">{{ product.price | money }}</span>
{% endif %}
{% endif %}
{% if product.compare_at_price > product.price %}
<span class="old-price"><s>{{ product.compare_at_price | money }}</s></span>
{% endif %}
{% unless product.available %}
{{ 'products.product.sold_out' | t }}
{% endunless %}
</div>
Product price on single page
{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign compare_at_price = current_variant.compare_at_price -%}
{%- assign price = current_variant.price -%}
<div class="product-single-price">
<span data-product-price>
{{ price | money }}
</span>
{% if product.compare_at_price_max > product.price %}
<span class="visually-hidden" data-compare-text>{{ 'products.product.regular_price' | t }}</span>
<s data-compare-price>
{% if compare_at_price > price %}
{{ compare_at_price | money }}
{% endif %}
</s>
{% endif %}
</div>
Newsletter
{% form 'customer' %}
{{ form.errors | default_errors }}
{% if form.posted_successfully? %}
<p>{{ 'general.newsletter_form.confirmation' | t }}</p>
{% else %}
<input type="hidden" name="contact[tags]" value="newsletter">
<input type="email"
name="contact[email]"
id="Email"
value="{% if customer.email != blank %}{{ customer.email }}{% endif %}"
placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}"
autocorrect="off"
autocapitalize="off">
<button type="submit" name="commit" id="Subscribe">
<span>{{ 'general.newsletter_form.submit' | t }}</span>
</button>
{% endif %}
{% endform %}
Footer
<div class="footer row">
{%- for block in section.blocks -%}
{%- if block.type == 'footer-menu' -%}
{%- assign footer_linklist = block.settings.footer_linklist -%}
{%- for link in linklists[footer_linklist].links -%}
<div class="col-12 col-sm-12 col-md-3 col-lg-3 footer-links">
<h4 class="h4">{{ link.title }}</h4>
<ul>
{%- for childlink in link.links -%}
<li><a href="{{ childlink.url }}">{{ childlink.title }}</a></li>
{%- endfor -%}
</ul>
</div>
{%- endfor -%}
{%- endif -%}
{%- if block.type == 'address' -%}
<div class="col-12 col-sm-12 col-md-3 col-lg-3 contact-box">
<h4 class="h4">{{ block.settings.title }}</h4>
<ul class="addressFooter">
{% if block.settings.address != blank %}
<li><i class="icon anm anm-map-marker-al"></i>
<p>{{ block.settings.address }}</p>
</li>
{% endif %}
{% if block.settings.phone != blank %}
<li class="phone"><i class="icon anm anm-phone-s"></i>
<p>{{ block.settings.phone }}</p>
</li>
{% endif %}
{% if block.settings.email != blank %}
<li class="email"><i class="icon anm anm-envelope-l"></i>
<p>{{ block.settings.email }}</p>
</li>
{% endif %}
</ul>
</div>
{%- endif -%}
{%- endfor -%}
</div>
{% schema %}
{
"name": "Footer",
"blocks": [
{
"type": "footer-menu",
"name": "Footer Menu",
"settings": [
{
"type": "link_list",
"id": "footer_linklist",
"label": "First menu",
"default": "footer"
}
]
},
{
"type": "address",
"name": "Address",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type": "textarea",
"id": "address",
"label": "Address"
},
{
"type": "text",
"id": "phone",
"label": "Phone"
},
{
"type": "text",
"id": "email",
"label": "Email"
}
]
}
]
}
{% endschema %}
Product Inventory
<div class="product-stock">
{% if product.variants.first.inventory_management == "shopify" %}
{% if product.variants.first.inventory_quantity > 0 %}
<span class="instock"> Currently {{ product.variants.first.inventory_quantity }} in stock</span>
{% else %}
<span class="outstock"> Out of stock </span>
{% endif %}
{% else %}
<span class="instock"> In Stock </span>
{% endif %}
</div>
Hurry! Only 5 left in stock
{% if product.variants.first.inventory_quantity < 10 and product.variants.first.inventory_quantity >= 1 %}
<div id="quantity_message">
<span> Hurry! Only <strong>{{ product.variants.first.inventory_quantity }}</strong> left in stock.</span>
</div>
{% endif %}
SKU
{%- assign current_variant = product.selected_or_first_available_variant -%}
<span>{{ current_variant.sku }}</span>
Product short description on single page
{% assign descriptions = product.description | split: "<!-- split -->" %}
{% assign short_desc = descriptions[0] %}
{% assign long_desc = descriptions[1] %}
<div class="short-description">
{{ short_desc }}
</div>
<div class="long-description">
{{ long_desc }}
or
{{ product.description }}
</div>
Techtalks 