Useful Shopify Code Snippets
This is a list of useful Shopify Snippets that I often reference while developing Shopify themes. Feel Free to contribute.
- Add Custom Badge on Products using product tag
- Add Class or Id to Form
- Add page numbers to pagination
- Add Original Price of Discounted products on Cart Page
- Add On Sale Badge on Products Based on Price
- Back or Continue Shopping link on Cart
- Blog Category Filter Dropdown
- Calculate Discount on Products
- Call a Product on any page
- Custom Pagination
- Display Articles in a Blog
- Display Links in a Linklist
- Display all tags in a blog
- Display Products in a Collection
- Display Variants in a Product
- Insert Block inside a for loop at any position
- Open External links in New Tab
- Recommend related products
- Show More Products from a Vendor
- Strip empty tags from article excerpt
- Multiple currency selector
Add Custom Badge on Products using product tag
This code adds a limited badge on products with "limited" tag on them. Add this in product template.
{% for mytag in product.tags %}
{% if mytag == 'limited' %}
<img class="limited-badge" src="{{ 'limited-badge.png' | asset_url }}" alt="Limited Badge">
{% endif %}
{% endfor %}Add Class or Id to Form
{% form 'form_name', class: 'custom-class-name', id: 'custom-id-name' %}Add page numbers to pagination
{% assign count = paginate.pages %}
{% for part in (1..count) %}
<li class="{% if paginate.current_page == part %} active {% endif %}">
<a href="{{ collection.url }}?page={{ forloop.index }}">{{ forloop.index }}</a>
</li>
{% endfor %}Add Original Price of Discounted products on Cart Page
Inset the following code inside items loop in cart template.
{% if item.product.compare_at_price > item.price %}
<s>{{ item.product.compare_at_price | money }}</s>
{% endif %}Add On Sale Badge on Products Based on Price
- Products must have "Compare at price" field fill in admin.
- Shows Badge when "compare_at_price_max" > "product price"
{% if product.compare_at_price_max > product.price %}
<img class="sale-product" src="{{ 'sale-badge.png' | asset_url }}" alt="On Sale Badge">
{% endif %}Back or Continue Shopping link on Cart
To link to Catalog page at /collection/all
<a href="/collections/all" title="Browse our Catalog">Continue Shopping</a>To Collection the product was last added to cart
<a href="{{ cart.items.first.product.collections.first.url }}" title="Continue Shopping">Continue Shopping</a>Blog Category Filter Dropdown
{% if blog.tags.size > 0 %}
<select id="BlogTagFilter">
<option value="/blogs/{{ blog.handle }}">{{ 'blogs.article.all_topics' | t }}</option>
{% for tag in blog.all_tags %}
<option value="/blogs/{{ blog.handle }}/tagged/{{ tag | handleize }}" {% if current_tags contains tag %}selected{% endif %}>{{ tag }}</option>
{% endfor %}
</select>
{% endif %}Calculate Discount on Products
{% capture discount %}
{{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max }}%
{% endcapture %}
<span class="discount">OFF: {{ discount }}</span>Call a Product on any page
{%- assign product = all_products['product-handle'] -%}Then do anything with product object like {{ product.title }}
Custom Pagination
Add pagination-count and pagination-tabs from the snippet folder to your Shopify Theme Snippet folder
{% if paginate.pages > 1 %}
{% include 'pagination-count' %}
{% include 'pagination-tabs' %}
{% endif %}Display Articles in a Blog
{% for article in blogs.blog-name.articles limit:1 %}
<li class="article">
<img src="{% if article.image %}{{ article | img_url: 'medium' }}{% endif %}" alt="" >
<a class="title" href="{{ article.url }}">{{ article.title }}</a>
<a class="date" href="{{ article.url }}">{{ article.published_at | date: "%B %d, %Y" }}</a>
<div class="rte content">{{ article.excerpt_or_content }}</div>
<a href="{{ article.url }}" class="featured-projects__link">{{ 'blogs.article.read_more' | t }}</a>
</li>
{% endfor %}Display Links in a Linklist
<ul class="list">
{% for link in linklists.linklist-handle.links %}
<li>{{ link.title | link_to: link.url }}</li>
{% endfor %}
</ul>Display all tags in a blog
{% for tag in blog.all_tags %}
<a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a>
{% endfor %}Display Products in a Collection
<div class="grid">
<h3 class="text-center">Products</h3>
{% for product in collections.collection-name.products %}
<div class="grid__item medium-up--one-third">
<a href="{{ product.url }}"><img src="{{ product.featured_image | product_img_url: '345x' }}" alt="{{ product.title | escape }}" /></a>
<div class="h4 grid-view-item__title"><span>{{ product.title }}</span></div>
</div>
{% endfor %}
</div>Display Variants in a Product
{% for product in collections.collection-name.products %}
<div class="grid">
{% for variant in product.variants %}
<!-- some html product box layout here -->
{% include 'product-card-grid', grid_image_width: image_size, product: variant %}
{% endfor %}
</div>
{% endfor %}Insert Block inside a for loop at any position
This code inserts "new-block" div at position 4.
{% for block in section.blocks %}
<div class="repeating-block">
<a href="#" class="link">
<img src="#" alt="Dummy">
</a>
</div>
{% if forloop.index0 == 3 %}
<div class="new-block">
<img src="#" alt="Dummy">
</div>
{% endif %}
{% endfor %}Open External links in New Tab
$(document).ready( function() {
jQuery('a[href^="http"]').not('a[href^="'+$(location).attr('hostname')+'"]').attr('target', '_blank');
});Show More Products from a Vendor
<div>
{% assign vendor = product.vendor %}
{% assign handle = product.handle %}
{% assign counter = '' %}
{% for product in collections.all.products %}
{% if vendor == product.vendor and counter.size < 4 and handle != product.handle %}
{% capture temp %}{{ counter }}*{% endcapture %}
{% assign counter = temp %}
<div class="recommendations_img">
<a href="{{ product.url | within: collection }}" title="{{ product.title }}">
<img src="{{ product.images.first | product_img_url: 'small' }}" alt="{{ product.title }}" />
</a>
</div><!-- .recommendations_img -->
{% endif %}
{% endfor %}
</div>Strip empty tags from article excerpt
Strip out empty p and span tags
{{ article.excerpt | strip_html }}Multiple currency selector
{% form 'currency' %}
{{ form | currency_selector }}
{% endform %}{% form 'currency' %}
<select name="currency">
{% for currency in shop.enabled_currencies %}
{% if currency == cart.currency %}
<option selected="true" value="{{ currency.iso_code }}">{{currency.iso_code}} {{currency.symbol}}</option>
{% else %}
<option value="{{ currency.iso_code }}">{{currency.iso_code}} {{currency.symbol}}</option>
{% endif %}
{% endfor %}
</select>
{% endform %}$('.shopify-currency-form select').on('change', function() {
$(this)
.parents('form')
.submit();
});License
Licensed under the MIT.
Donation
If this project helped you reduce time to develop, please consider buying me a cup of coffee :)
