Skip to content

Commit 6ba7f39

Browse files
authored
Added README.md file.
1 parent 1355c8d commit 6ba7f39

File tree

1 file changed

+74
-0
lines changed

1 file changed

+74
-0
lines changed

README.md

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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

Comments
 (0)