Skip to content
A compilation of code snippets for Shopify developers.
Branch: master
Clone or download
Latest commit 209bae1 May 30, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
snippets add custom pagination snippets Nov 20, 2017
LICENSE Initial commit Feb 14, 2017
README.md update License May 30, 2018

README.md

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

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 }}

License

Licensed under the MIT.

You can’t perform that action at this time.