Cookie HTML banner saved as snippet in snippets/cookie-banner.liquid : <style> #cookies-banner { display: none; justify-content: center; align-items: center; padding: 1em; position: fixed; bottom: 0px; width: 100%; background: #fff; border-top: 1px solid #dcdcdc; } </style> <div id="cookies-banner"> <span>This website uses cookies to ensure you get the best experience on our website.</span> <button style="margin-left: 1em;" onclick="handleDecline()">Decline</button> <button […]

Display product filter: <form class="filter-form"> {%- for filter in collection.filters -%} <details class="filter-group"> <summary class="filter-group-summary"> <div> <span>{{ filter.label }}</span> {%- if filter.active_values.size > 0 -%} <span>({{ filter.active_values.size }})</span> {%- endif -%} </div> </summary> <div class="filter-group-display"> <div class="filter-group-display__header"> <span class="filter-group-display__header-selected">{{ filter.active_values.size }} selected</span> {%- if filter.active_values.size > 0 -%} <a href="{{ filter.url_to_remove }}" class="filter-group-display__header-reset">Reset</a> {%- endif […]

Because your country or language selector is a custom element and there’s no submit button included in the form, you need to submit the form through JavaScript. class LocalizationForm extends HTMLElement { constructor() { super(); this.elements = { input: this.querySelector('input[name="language_code"], input[name="country_code"]'), button: this.querySelector('button'), panel: this.querySelector('ul'), }; this.elements.button.addEventListener('click', this.openSelector.bind(this)); this.elements.button.addEventListener('focusout', this.closeSelector.bind(this)); this.addEventListener('keyup', this.onContainerKeyUp.bind(this)); this.querySelectorAll('a').forEach(item => item.addEventListener('click', […]

Here is how to display a product collection in a template. <ul> {% for product in collections.all.products %} <li><a href="{{ product.url}}">{{ product.title}}</a> {% endfor %} </ul> Save it as collection-product-list.liquid.

<ul> {% for product in collection-product-list limit: limit_count %} <li><a href="{{ product.url }}">{{ product.title }}</a> {% endfor %} </ul>

Display unit price for line item: {% if line_item.unit_price_measurement %} {{ line_item.unit_price | money }} {% if line_item.unit_price_measurement.reference_value != 1 %} {{ line_item.unit_price_measurement.reference_value }} {% endif %} {{ line_item.unit_price_measurement.reference_unit }} {% endif %} Display unit price for variant: {% if variant.unit_price_measurement %} {{ variant.unit_price | money }} {% if variant.unit_price_measurement.reference_value != 1 %} {{ variant.unit_price_measurement.reference_value […]

Add a contact form to your theme to allow customers to get in touch with the merchant. {% form 'contact' %} {{ form.errors | default_errors }} <div class="first-name"> <label for="first-name">First name</label> <input type="text" name="contact[first_name]" id="first-name" /> </div> <div class="last-name"> <label for="last-name">Last name</label> <input type="text" name="contact[last_name]" id="last-name" /> </div> <div class="phone"> <label for="phone">Phone</label> <input type="tel" name="contact[phone]" […]

The necessary code for the reCAPTCHA functionality is included through the content_for_header object. This means that if a merchant has reCAPTCHA enabled, but the content_for_header object is not present, then the reCAPTCHA functionality won’t be present. The reCAPTCHA functionality is initialized based on the presence of customer, contact, and blog comment forms, and is triggered […]

To add menu to your theme, you can use the linklists object to find the menu that you want to output. The default menu is the Main menu, which can be accessed with it’s handle main-menu. {% for link in linklists.main-menu.links %} <!– menu content –> {% endfor %} And here is how to display […]

In Shopify merchants can add media to their products, like images, 3D models, videos, and YouTube or Vimeo videos. To display product media on the product page, and your product page content is hosted in a product.liquid section, then you might do the following: Create a snippet called media.liquid to host your media display. Render […]

Add button and a popover containing each country option. {% if localization.available_countries.size > 1 %} <localization-form> {% form 'localization' %} <div class="disclosure"> <button type="button" class="disclosure__button" aria-expanded="false" aria-controls="CountryList"> {{ localization.country.name }} ({{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }}) <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6"> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 […]

Display the price and discounts: {% for item in cart.items %} <!– item info –> {% if item.original_price > item.final_price %} <s>{{ item.original_price | money }}</s> {% endif %} {{ item.final_price | money }}) {% if item.line_level_discount_allocations.size > 0 %} Discounts: <ul> {% for discount_allocation in item.line_level_discount_allocations %} <li> {{ discount_allocation.discount_application.title }}-{{ discount_allocation.amount | money […]

<a href="https://www.shopify.com/security/pci-compliant?utm_medium=shop&utm_source=secure" title="This online store is secured by Shopify" target="_blank" rel="nofollow" > <img src="https://cdn.shopify.com/s/images/badges/shopify-secure-badge-white.svg" alt="Shopify secure badge" > </a>

Shopify generates a default robots.txt file that works for most stores. However, if you want to make changes to the default file, then you can add the robots.txt.liquid template in order to make the following customizations: Add a new rule to an existing group Remove a rule from an existing group Add custom rules The […]

Display search results filter: <form class="filter-form"> <input type="hidden" name="q" value="{{ search.terms }}"> {%- for filter in search.filters -%} <details class="filter-group"> <summary class="filter-group-summary"> <div> <span>{{ filter.label }}</span> {%- if filter.active_values.size > 0 -%} <span>({{ filter.active_values.size }})</span> {%- endif -%} </div> </summary> <div class="filter-group-display"> <div class="filter-group-display__header"> <span class="filter-group-display__header-selected">{{ filter.active_values.size }} selected</span> {%- if filter.active_values.size > 0 -%} […]

In this snippet, the section content builds the general display by looping through each product returned through the products attribute of the recommendations object. Add this code to sections/product-recommendations.liquid <div class="product-recommendations" data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit=4" > {%- if recommendations.performed and recommendations.products_count > 0 -%} <h2>You may also like</h2> <ul> {%- for product […]

To implement a tag filtering feature, you can loop through all of the product tags in the collection using the all_tags attribute of the collection object. {% if collection.all_tags.size > 0 %} <ul class="tag-filters"> {% for tag in collection.all_tags %} {% if current_tags contains tag %} <li class="tag-filters__item active">{{ tag | link_to_remove_tag: tag }}</li> {% […]

An hreflang tag is a link element that identifies a localized URL of a website. You should add a unique hreflang tag for each language or region URL that exists, and they should be included in the , which is commonly found in theme.liquid. <head> <!– head element content –> <link rel="alternate" hreflang="en" href="your-store.myshopify.com" /> […]

Add SEO metadata in your theme using HTML and Liquid. <head> <title> {{ page_title -}} {%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%} {%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%} {%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%} […]

Here is how to display a single product collection in a template. <ul> {% for product in collection-product-list %} <li><a href="{{ product.url}}">{{ product.title}}</a> {% endfor %} </ul>

Language selector allow customers to manually choose their preferred language. Code below adds button and a popover containing each language option: {% if localization.available_languages.size > 1 %} <localization-form> {% form 'localization' %} <div class="disclosure"> <button type="button" class="disclosure__button" aria-expanded="false" aria-controls="LanguageList"> {{ localization.language.endonym_name | capitalize }} <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6"> <path […]

Display between the subtotal and total if a discount applies to the cart as a whole. Subtotal: {{ cart.items_subtotal_price | money }} {% if cart.cart_level_discount_application.size > 0 %} Discounts: <ul> {% for discount_application in cart.cart_level_discount_applications %} <li> {{ discount_application.title }}-{{ discount_application.total_allocated_amount | money }} </li> {% endfor %} </ul> {% endif %} Total: {{ cart.total_price […]