|
| 1 | +# Useful Shopify Code Snippets |
| 2 | + |
| 3 | +This is a list of useful Shopify Snippets that I often reference while developing Shopify themes. Feel Free to contribute. |
| 4 | + |
| 5 | +* [Display Products in a Collection](#display-products-in-a-collection) |
| 6 | +* [Calculate Discount on Products](#calculate-discount-on-products) |
| 7 | +* [Show More Products from a Vendor](#show-more-products-from-a-vendor) |
| 8 | +* [Display Articles in a Blog](#display-articles-in-a-blog) |
| 9 | +* [Display Links in a Linklist](#display-links-in-a-linklist) |
| 10 | + |
| 11 | + |
| 12 | +## Display Products in a Collection |
| 13 | +```html |
| 14 | +<div class="grid"> |
| 15 | + <h3 class="text-center avenir-head">Products</h3> |
| 16 | + {% for product in collections.collection-name.products %} |
| 17 | + <div class="grid__item medium-up--one-third"> |
| 18 | + <a href="{{ product.url }}"><img src="{{ product.featured_image | product_img_url: '345x' }}" alt="{{ product.title | escape }}" /></a> |
| 19 | + <div class="h4 grid-view-item__title"><span>{{ product.title }}</span></div> |
| 20 | + </div> |
| 21 | + {% endfor %} |
| 22 | +</div> |
| 23 | +``` |
| 24 | + |
| 25 | +## Calculate Discount on Products |
| 26 | +```html |
| 27 | +{% capture discount %} |
| 28 | +{{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max }}% |
| 29 | +{% endcapture %} |
| 30 | + <span class="discount">OFF: {{ discount }}</span> |
| 31 | +``` |
| 32 | + |
| 33 | +## Show More Products from a Vendor |
| 34 | +```html |
| 35 | +<div> |
| 36 | + {% assign vendor = product.vendor %} |
| 37 | + {% assign handle = product.handle %} |
| 38 | + {% assign counter = '' %} |
| 39 | + {% for product in collections.all.products %} |
| 40 | + {% if vendor == product.vendor and counter.size < 4 and handle != product.handle %} |
| 41 | + {% capture temp %}{{ counter }}*{% endcapture %} |
| 42 | + {% assign counter = temp %} |
| 43 | + <div class="recommendations_img"> |
| 44 | + <a href="{{ product.url | within: collection }}" title="{{ product.title }}"> |
| 45 | + <img src="{{ product.images.first | product_img_url: 'small' }}" alt="{{ product.title }}" /> |
| 46 | + </a> |
| 47 | + </div><!-- .recommendations_img --> |
| 48 | + {% endif %} |
| 49 | + {% endfor %} |
| 50 | +</div> |
| 51 | +``` |
| 52 | + |
| 53 | +## Display Articles in a Blog |
| 54 | +```html |
| 55 | +{% for article in blogs.journal.articles limit:1 %} |
| 56 | + <li class="article"> |
| 57 | + <img src="{% if article.image %}{{ article | img_url: 'medium' }}{% endif %}" alt="" > |
| 58 | + <a class="title" href="{{ article.url }}">{{ article.title }}</a> |
| 59 | + <a class="date" href="{{ article.url }}">{{ article.published_at | date: "%B %d, %Y" }}</a> |
| 60 | + <div class="rte content">{{ article.excerpt_or_content }}</div> |
| 61 | + </li> |
| 62 | +{% endfor %} |
| 63 | +``` |
| 64 | + |
| 65 | + |
| 66 | +## Display Links in a Linklist |
| 67 | +```html |
| 68 | +<ul class="list"> |
| 69 | + {% for link in linklists.linklist-handle.links %} |
| 70 | + <li>{{ link.title | link_to: link.url }}</li> |
| 71 | + {% endfor %} |
| 72 | +</ul> |
| 73 | +``` |
| 74 | + |
0 commit comments