Awesome

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 :)