Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vikrantnegi/shopify-code-snippets

A compilation of code snippets for Shopify developers.
https://github.com/vikrantnegi/shopify-code-snippets

linklist shopify shopify-developers shopify-snippets shopify-theme snippets

Last synced: 16 days ago
JSON representation

A compilation of code snippets for Shopify developers.

Host: GitHub
URL: https://github.com/vikrantnegi/shopify-code-snippets
Owner: vikrantnegi
License: mit
Created: 2017-02-14T10:00:54.000Z (almost 8 years ago)
Default Branch: master
Last Pushed: 2023-12-31T11:28:26.000Z (12 months ago)
Last Synced: 2024-08-01T16:51:24.373Z (4 months ago)
Topics: linklist, shopify, shopify-developers, shopify-snippets, shopify-theme, snippets
Language: Liquid
Size: 16.6 KB
Stars: 215
Watchers: 14
Forks: 36
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-shopify - vikrantnegi/shopify-code-snippets - A compilation of code snippets for Shopify developers. (Code Snippets / Elixir Examples)

README

        # 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-custom-badge-on-products-using-product-tag)

* [Add Class or Id to Form](#add-class-or-id-to-form)

* [Add page numbers to pagination](#add-page-numbers-to-pagination)

* [Add Original Price of Discounted products on Cart Page](#add-original-price-of-discounted-products-on-cart-page)

* [Add On Sale Badge on Products Based on Price](#add-on-sale-badge-on-products-based-on-price)

* [Back or Continue Shopping link on Cart](#back-or-continue-shopping-link-on-cart)

* [Blog Category Filter Dropdown](#blog-category-filter-dropdown)

* [Calculate Discount on Products](#calculate-discount-on-products)

* [Call a Product on any page](#call-a-product-on-any-page)

* [Custom Pagination](#custom-pagination)

* [Display Articles in a Blog](#display-articles-in-a-blog)

* [Display Links in a Linklist](#display-links-in-a-linklist)

* [Display all tags in a blog](#display-all-tags-in-a-blog)

* [Display Products in a Collection](#display-products-in-a-collection)

* [Display Variants in a Product](#display-variants-in-a-product)

* [Insert Block inside a for loop at any position](#insert-block-inside-a-for-loop-at-any-position)

* [Open External links in New Tab](#open-external-links-in-new-tab)

* [Recommend related products](https://help.shopify.com/themes/customization/products/recommend-related-products)

* [Show More Products from a Vendor](#show-more-products-from-a-vendor)

* [Strip empty tags from article excerpt](#strip-empty-tags-from-article-excerpt)

* [Multiple currency selector](#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.

```html

{% for mytag in product.tags %}

  {% if mytag == 'limited' %}

    

  {% endif %}

{% endfor %}

```

## Add Class or Id to Form

```html

{% form 'form_name', class: 'custom-class-name', id: 'custom-id-name' %}

```

## Add page numbers to pagination

```html

{% assign count = paginate.pages %}

{% for part in (1..count) %}

  


    {{ forloop.index }}

  

{% endfor %}

```

## Add Original Price of Discounted products on Cart Page

Inset the following code inside items loop in cart template.

```html

{% if item.product.compare_at_price > item.price %}

  {{ item.product.compare_at_price | money }}

{% 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"

```html

{% if product.compare_at_price_max > product.price %}

  

{% endif %}

```

## Back or Continue Shopping link on Cart

#### To link to Catalog page at /collection/all

```html

Continue Shopping

```

#### To Collection the product was last added to cart

```html

Continue Shopping

```

## Blog Category Filter Dropdown

```html

{% if blog.tags.size > 0 %}

  

    {{ 'blogs.article.all_topics' | t }}

    {% for tag in blog.all_tags %}

      {{ tag }}

    {% endfor %}

  

{% endif %}

```

## Calculate Discount on Products

```html

{% capture discount %}

{{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max }}%

{% endcapture %}

  OFF: {{ discount }}

```

## Call a Product on any page

```html

{%- 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

```liquid

{% if paginate.pages > 1 %}

  {% include 'pagination-count' %}

  {% include 'pagination-tabs' %}

{% endif %}

```

## Display Articles in a Blog

```html

{% for article in blogs.blog-name.articles limit:1 %}

  


    

    {{ article.title }}

    {{ article.published_at | date: "%B %d, %Y" }}

    {{ article.excerpt_or_content }}

    {{ 'blogs.article.read_more' | t }}

  

{% endfor %}

```

## Display Links in a Linklist

```html



  {% for link in linklists.linklist-handle.links %}

     {{ link.title | link_to: link.url }}

  {% endfor %}



```

## Display all tags in a blog

```html

{% for tag in blog.all_tags %}

  {{ tag }}

{% endfor %}

```

## Display Products in a Collection

```html



  Products

  {% for product in collections.collection-name.products %}

    

        

        {{ product.title }}

     

  {% endfor %}



```

## Display Variants in a Product

```html

{% for product in collections.collection-name.products %}

  


   {% for variant in product.variants %}

      

      {% include 'product-card-grid', grid_image_width: image_size, product: variant %}

   {% endfor %}

  

{% endfor %}

```

## Insert Block inside a for loop at any position

This code inserts "new-block" div at position 4.

```html

  {% for block in section.blocks %}

    


      

        

      

    

    {% if forloop.index0 == 3 %}

      

        

      

    {% endif %}

  {% endfor %}

```

## Open External links in New Tab

```javascript

$(document).ready( function() {

  jQuery('a[href^="http"]').not('a[href^="'+$(location).attr('hostname')+'"]').attr('target', '_blank');

});

```

## Show More Products from a Vendor

```html



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

  

    

      

    

  

  {% endif %}

  {% endfor %}



```

## Strip empty tags from article excerpt

Strip out empty p and span tags

```html

{{ article.excerpt | strip_html }}

```

## Multiple currency selector

```liquid

{% form 'currency' %}

  {{ form | currency_selector }}

{% endform %}

```

```liquid

{% form 'currency' %}

  

    {% for currency in shop.enabled_currencies %}

{% if currency == cart.currency %}

  {{currency.iso_code}} {{currency.symbol}}

  {% else %}

  {{currency.iso_code}} {{currency.symbol}}

{% endif %}

    {% endfor %}

  

{% endform %}

```

```js

$('.shopify-currency-form select').on('change', function() {

  $(this)

    .parents('form')

    .submit();

});

```

## License

Licensed under the [MIT](https://github.com/vikrantnegi/shopify-code-snippets/blob/master/LICENSE).

## Donation

If this project helped you reduce time to develop, please consider buying me a cup of coffee :)



[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/E1E6Z0JL)