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
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 %}{% form 'form_name', class: 'custom-class-name', id: 'custom-id-name' %}{% 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 %}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 %}- 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 %}<a href="/collections/all" title="Browse our Catalog">Continue Shopping</a><a href="{{ cart.items.first.product.collections.first.url }}" title="Continue Shopping">Continue Shopping</a>{% 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 %}{% 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>{%- assign product = all_products['product-handle'] -%}Then do anything with product object like {{ product.title }}
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 %}{% 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 %}<ul class="list"> {% for link in linklists.linklist-handle.links %} <li>{{ link.title | link_to: link.url }}</li> {% endfor %} </ul>{% for tag in blog.all_tags %} <a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a> {% endfor %}<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>{% 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 %}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 %}$(document).ready( function() { jQuery('a[href^="http"]').not('a[href^="'+$(location).attr('hostname')+'"]').attr('target', '_blank'); });<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 out empty p and span tags
{{ article.excerpt | strip_html }}{% 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(); });Licensed under the MIT.
If this project helped you reduce time to develop, please consider buying me a cup of coffee :)
