├── .github
    └── FUNDING.yml
├── LICENSE
├── README.md
├── json-ld-organization.liquid
├── json-ld-product.liquid
├── json-ld-search.liquid
├── metadata-og.liquid
├── metadata-twitter.liquid
├── random-number.liquid
└── random-product.liquid


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 | 
3 | github: pgrimaud
4 | custom: https://www.paypal.me/grimaudpierre
5 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Pierre Grimaud
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center"><img src="https://user-images.githubusercontent.com/1866496/104910214-494b5f00-5989-11eb-9dc2-99c366c71d41.png"/></p>
 2 | 
 3 | # About Shopify Snippets
 4 | 
 5 | Useful .liquid snippets for Shopify themes
 6 | 
 7 | ## Why this repository?
 8 | 
 9 | I developed several Shopify websites from scratch, without all-made themes.
10 | 
11 | Last websites I worked on : 
12 | 
13 | - [https://paulandjoe.com/](https://paulandjoe.com/) for [Tribord Digital](https://triborddigital.com/)
14 | - [https://anashaf.com/](https://anashaf.com/) for [Tribord Digital](https://triborddigital.com/)
15 | - [https://hubside.store/](https://hubside.store/) for [Big Youth](https://www.bigyouth.fr/)
16 | - [https://www.statement.paris/](https://www.statement.paris/) for [Big Youth](https://www.bigyouth.fr/)
17 | - [https://www.caravane.fr/](https://www.caravane.fr/) for [Big Youth](https://www.bigyouth.fr/)
18 | 
19 | As a back-end developer, I needed to created "ready to use" parts of code which can be reusable. That's the content of this repository.
20 | 
21 | ## Snippets
22 | 
23 | | File        | Description     |
24 | | ------------- | ------------- |
25 | | **[metadata-og.liquid](https://github.com/pgrimaud/shopify-snippets/blob/main/metadata-og.liquid)**      | Generate MetaData OG for your template |
26 | | **[metadata-twitter.liquid](https://github.com/pgrimaud/shopify-snippets/blob/main/metadata-twitter.liquid)**      | Generate MetaData Twitter for your template |
27 | | **[random-number.liquid](https://github.com/pgrimaud/shopify-snippets/blob/main/random-number.liquid)**      | Get a random number |
28 | | **[random-product.liquid](https://github.com/pgrimaud/shopify-snippets/blob/main/random-product.liquid)**      | Get a random product from shop or specific collection |
29 | | **[json-ld-search.liquid](https://github.com/pgrimaud/shopify-snippets/blob/main/json-ld-search.liquid)**      | Generate JSON-LD [sitelinks search box](https://developers.google.com/search/docs/data-types/sitelinks-searchbox) |
30 | | **[json-ld-organization.liquid](https://github.com/pgrimaud/shopify-snippets/blob/main/json-ld-organization.liquid)**      | Generate JSON-LD [organization](https://schema.org/Organization) |
31 | | **[json-ld-product.liquid](https://github.com/pgrimaud/shopify-snippets/blob/main/json-ld-product.liquid)**      | Generate JSON-LD [product](https://developers.google.com/search/docs/data-types/product) |
32 | 
33 | # Feedback
34 | 
35 | You found a bug? You need a new feature? You can [create an issue](https://github.com/pgrimaud/shopify-snippets/issues) if needed or contact me on [Twitter](https://twitter.com/pgrimaud_).
36 | 
37 | # Copyright
38 | 
39 | This project is not affiliated with or endorsed by Shopify.
40 | 
41 | [FeedArmy](https://feedarmy.com/) for JSON-LD product.
42 | 
43 | Logo created with [Shopify Hatchful](https://hatchful.shopify.com/).
44 | 
45 | # License
46 | 
47 | Licensed under the terms of the MIT License.
48 | 


--------------------------------------------------------------------------------
/json-ld-organization.liquid:
--------------------------------------------------------------------------------
 1 | {%- comment -%}
 2 |     You have to change the logo asset on line 11.
 3 |     Also change social links started at line 13, with as many links you need.
 4 | {%- endcomment -%}
 5 | 
 6 | <script type="application/ld+json">
 7 |   {
 8 |     "@context": "https://schema.org",
 9 |     "@type": "Organization",
10 |     "url": "{{ shop.url }}",
11 |     "logo": "{{ 'logo.png' | asset_url }}",
12 |     "sameAs": [
13 |       "{{ settings.social_facebook }}",
14 |       "{{ settings.social_instagram }}",
15 |       "{{ settings.social_twitter }}",
16 |       "{{ settings.social_pinterest }}",
17 |       "{{ settings.social_linkedin }}",
18 |       "{{ settings.social_youtube }}"
19 |     ]
20 |   }
21 | </script>
22 | 


--------------------------------------------------------------------------------
/json-ld-product.liquid:
--------------------------------------------------------------------------------
  1 | {%- comment -%}
  2 |     Based from https://feedarmy.com/kb/shopify-microdata-for-google-shopping/
  3 |     Basic usage : {% render 'json-ld-product' %} in product template
  4 | {%- endcomment -%}
  5 | 
  6 | <!-- Copyright FeedArmy 2020 Version 2.39 -->
  7 | {%- assign fa_current_variant = product.selected_or_first_available_variant -%}
  8 | {%- assign fa_variant_count = product.variants | size -%}
  9 | {%- assign fa_count = 0 -%}
 10 | <script type="application/ld+json" data-creator_name="FeedArmy">
 11 | {
 12 |   "@context": "http://schema.org/",
 13 |   "@type": "Product",
 14 |   "name": "{{ product.title | strip_html | escape }}",
 15 |   "url": "{{ shop.url }}{{ product.url }}",
 16 |   {%- if product.variants.first.sku != blank -%}
 17 |     "sku": "{{ product.variants.first.sku }}",
 18 |   {%- else -%}
 19 |     "sku": "{{ product.variants.first.id }}",
 20 |   {%- endif -%}
 21 |   {%- if product.variants.first.barcode.size == 12 -%}
 22 |     "gtin12": {{ product.variants.first.barcode }},
 23 |   {%- endif -%}
 24 |   {%- if product.variants.first.barcode.size == 13 -%}
 25 |     "gtin13": {{ product.variants.first.barcode }},
 26 |   {%- endif -%}
 27 |   {%- if product.variants.first.barcode.size == 14 -%}
 28 |     "gtin14": {{ product.variants.first.barcode }},
 29 |   {%- endif -%}
 30 |     "productID": "{{ product.id }}",
 31 |   "brand": {
 32 |     "@type": "Thing",
 33 |     "name": "{{ product.vendor | escape }}"
 34 |   },
 35 |   "description": {{ product.description | strip_html | json }},
 36 |   "image": "https:{{ product.featured_image.src | img_url: 'grande' }}",
 37 |   {%- if product.variants -%}
 38 |   {%- assign fa_count = fa_count | plus: 1 -%}
 39 |     "offers": {% if product.variants.size > 1 %}[{% endif %}
 40 |       {
 41 |         "@type" : "Offer",
 42 |         "priceCurrency": "{{ cart.currency.iso_code }}",
 43 |         "price": "{{ fa_current_variant.price | money_without_currency  | strip_html | remove: ',' }}",
 44 |         "itemCondition" : "http://schema.org/NewCondition",
 45 |         "availability" : "http://schema.org/{% if fa_current_variant.available %}InStock{% else %}OutOfStock{% endif %}",
 46 |         "url" : "{{ shop.url }}{{ fa_current_variant.url }}",
 47 |             {%- if fa_current_variant.image -%}
 48 |               {% assign variant_image_size = fa_current_variant.image.width | append: 'x' %}
 49 |               "image": "https:{{ fa_current_variant.image.src | img_url: variant_image_size }}",
 50 |             {%- else -%}
 51 |               "image": "https:{{ product.featured_image.src | img_url: 'grande' }}",
 52 |             {%- endif -%}
 53 |             {%- if fa_current_variant.title != 'Default Title' -%}
 54 |               "name" : "{{ product.title | strip_html | escape }} - {{ fa_current_variant.title | escape }}",
 55 |             {%- else -%}
 56 |               "name" : "{{ product.title | strip_html | escape }}",
 57 |             {%- endif -%}
 58 |             {% if fa_current_variant.barcode.size == 12 %}
 59 |               "gtin12": {{ fa_current_variant.barcode }},
 60 |             {%- endif -%}
 61 |             {%- if fa_current_variant.barcode.size == 13 -%}
 62 |               "gtin13": {{ fa_current_variant.barcode }},
 63 |             {%- endif -%}
 64 |             {%- if fa_current_variant.barcode.size == 14 -%}
 65 |               "gtin14": {{ fa_current_variant.barcode }},
 66 |             {%- endif -%}
 67 |             {%- if fa_current_variant.sku != blank -%}
 68 |               "sku": "{{ fa_current_variant.sku }}",
 69 |             {%- else -%}
 70 |               "sku": "{{ fa_current_variant.id }}",
 71 |             {%- endif -%}
 72 |             {%- if product.description != blank -%}
 73 |             "description" : {{ product.description | strip_html | json }},
 74 |             {%- endif -%}
 75 |           "priceValidUntil": "{{ 'now' | date: '%s' | plus: 31536000 | date: '%Y-%m-%d' | uri_encode | replace:'+','%20' }}"
 76 |       }{%- if product.variants.size != 1 -%},{%- endif -%}
 77 |       {%- for variant in product.variants -%}
 78 |       {%- if variant != product.selected_or_first_available_variant -%}
 79 |       {%- assign fa_count = fa_count | plus: 1 -%}
 80 |         {
 81 |           "@type" : "Offer",
 82 |           "priceCurrency": "{{ cart.currency.iso_code }}",
 83 |           "price": "{{ variant.price | money_without_currency  | strip_html | remove: ',' }}",
 84 |           "itemCondition" : "http://schema.org/NewCondition",
 85 |           "availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
 86 |           "url" : "{{ shop.url }}{{ variant.url }}",
 87 |               {%- if variant.image -%}
 88 |                 {% assign variant_image_size = variant.image.width | append: 'x' %}
 89 |                 "image": "http:{{ variant.image.src | img_url: variant_image_size }}",
 90 |               {%- else -%}
 91 |                 "image": "https:{{ product.featured_image.src | img_url: 'grande' }}",
 92 |               {%- endif -%}
 93 |               {%- if variant.title != 'Default Title' -%}
 94 |                 "name" : "{{ product.title | strip_html | escape }} - {{ variant.title | escape }}",
 95 |               {%- else -%}
 96 |                 "name" : "{{ product.title | strip_html | escape }}",
 97 |               {%- endif -%}
 98 |               {%- if variant.barcode.size == 12 -%}
 99 |                 "gtin12": {{ variant.barcode }},
100 |               {%- endif -%}
101 |               {%- if variant.barcode.size == 13 -%}
102 |                 "gtin13": {{ variant.barcode }},
103 |               {%- endif -%}
104 |               {%- if variant.barcode.size == 14 -%}
105 |                 "gtin14": {{ variant.barcode }},
106 |               {%- endif -%}
107 |               {%- if variant.sku != blank -%}
108 |                 "sku": "{{ variant.sku }}",
109 |               {%- else -%}
110 |                 "sku": "{{ variant.id }}",
111 |               {%- endif -%}
112 |               {%- if product.description != blank -%}
113 |               "description" : {{ product.description | strip_html | json }},
114 |               {%- endif -%}
115 |               "priceValidUntil": "{{ 'now' | date: '%s' | plus: 31536000 | date: '%Y-%m-%d' | uri_encode | replace:'+','%20' }}"
116 |           }
117 |           {%- if fa_count < fa_variant_count -%}
118 |          	{%- unless forloop.last -%},{%- endunless -%}
119 |           {%- endif -%}
120 |           {%- endif -%}
121 |       {%- endfor -%}
122 |     {%- if product.variants.size > 1 -%}],
123 |       "additionalProperty": [{
124 |         "@type": "PropertyValue",
125 |         "propertyID": "item_group_id",
126 |         "value": "{{ product.id }}"
127 |       }]
128 |     {%- endif -%}
129 |   {%- endif -%}
130 | }
131 | </script>
132 | <!-- Copyright FeedArmy 2020 Version 2.39 -->
133 | 


--------------------------------------------------------------------------------
/json-ld-search.liquid:
--------------------------------------------------------------------------------
 1 | {%- comment -%}
 2 |     Nothing to do, just : {% render 'json-ld-search' %}
 3 | {%- endcomment -%}
 4 | 
 5 | <script type="application/ld+json">
 6 |   {
 7 |     "@context": "https://schema.org",
 8 |     "@type": "WebSite",
 9 |     "url": "{{ shop.url }}",
10 |     "potentialAction": {
11 |       "@type": "SearchAction",
12 |       "target": "{{ shop.url }}/search?q={search_term_string}",
13 |       "query-input": "required name=search_term_string"
14 |     }
15 |   }
16 | </script>
17 | 


--------------------------------------------------------------------------------
/metadata-og.liquid:
--------------------------------------------------------------------------------
 1 | {%- comment -%}
 2 |     You have to change the logo asset on line 32 & 33.
 3 | {%- endcomment -%}
 4 | 
 5 | {%- if template contains 'product' -%}
 6 |     <meta property="og:type" content="product">
 7 |     <meta property="og:title" content="{{ product.title | strip_html | escape }}">
 8 |     <meta property="og:category" content="{{ product.type }}" />
 9 |     {%- for image in product.images limit:3 -%}
10 |         <meta property="og:image" content="http:{{ image.src | product_img_url: 'master' }}">
11 |         <meta property="og:image:secure_url" content="https:{{ image.src | product_img_url: 'master' }}">
12 |     {%- endfor -%}
13 |     <meta property="og:price:amount" content="{{ product.price | money_without_currency | stip_html | escape | remove: ',' }}">
14 |     <meta property="og:price:currency" content="{{ shop.currency }}">
15 |     <meta property="og:availability" content="{%- if product.available -%}instock{%- else -%}oos{%- endif -%}" />
16 |     <meta property="og:description" content="{{ product.description | strip_newlines | strip_html | truncate: 300 | escape }}">
17 | {%- elsif template contains 'article' -%}
18 |     <meta property="og:type" content="article">
19 |     <meta property="og:title" content="{{ article.title | strip_html | escape }}">
20 |     {%- assign img_tag = '<' | append: 'img' -%}
21 |     {%- if article.content contains img_tag -%}
22 |         {%- assign src = article.content | split: 'src="' -%}
23 |         {%- assign src = src[1] | split: '"' | first | remove: 'https:' | remove: 'http:' -%}
24 |         {%- if src -%}
25 |             <meta property="og:image" content="http:{{ src }}">
26 |             <meta property="og:image:secure_url" content="https:{{ src }}">
27 |         {%- endif -%}
28 |     {%- endif -%}
29 | {%- else -%}
30 |     <meta property="og:type" content="website">
31 |     <meta property="og:title" content="{{ page_title | escape }}">
32 |     <meta property="og:image" content="http:{{ 'logo.png' | asset_url }}">
33 |     <meta property="og:image:secure_url" content="https:{{ 'logo.png' | asset_url }}">
34 | {%- endif -%}
35 | {%- if page_description and template != 'product' -%}
36 |     <meta property="og:description" content="{{ page_description | escape }}">
37 | {%- endif -%}
38 | <meta property="og:url" content="{{ canonical_url }}">
39 | <meta property="og:site_name" content="{{ shop.name }}">
40 | 


--------------------------------------------------------------------------------
/metadata-twitter.liquid:
--------------------------------------------------------------------------------
 1 | {%- comment -%}
 2 |     You have to change the Twitter handle line 6.
 3 |     You have to change the logo asset on line 35. It must be a square picture.
 4 | {%- endcomment -%}
 5 | 
 6 | <meta name="twitter:site" content="@twitter_handler" />
 7 | 
 8 | {% if template contains 'product' %}
 9 |     <meta name="twitter:card" content="product" />
10 |     <meta name="twitter:title" content="{{ product.title | escape }}" />
11 |     <meta name="twitter:description" content="{{ product.description | strip_html | strip_newlines | truncatewords: 60, '' | escape }}" />
12 |     <meta name="twitter:image" content="https:{{ product.featured_image.src | product_img_url: 'large' }}" />
13 |     <meta name="twitter:label1" content="Price" />
14 |     <meta name="twitter:data1" content="{% if product.price_varies %}From {% endif %}{{ product.price | money_with_currency | strip_html }}" />
15 |     {% if product.vendor == blank %}
16 |         <meta name="twitter:label2" content="Availability" />
17 |         <meta name="twitter:data2" content="{% if product.available %}In stock{% else %}Out of stock{% endif %}" />
18 |     {% else %}
19 |         <meta name="twitter:label2" content="Brand" />
20 |         <meta name="twitter:data2" content="{{ product.vendor | escape }}" />
21 |     {% endif %}
22 | {% elsif template contains 'article' %}
23 |     <meta name="twitter:card" content="summary" />
24 |     <meta name="twitter:title" content="{{ article.title | escape }}" />
25 |     <meta name="twitter:description" content="{{ article.excerpt_or_content | strip_html | truncatewords: 60, '' | escape }}" />
26 |     {% assign img_tag = '<' | append: 'img' %}
27 |     {% if article.content contains img_tag %}
28 |         {% assign src = article.content | split: 'src="' %}
29 |         {% assign src = src[1] | split: '"' | first | remove: 'https:' | remove: 'http:' %}
30 |         {% if src %}
31 |             <meta property="twitter:image" content="http:{{ src }}" />
32 |         {% endif %}
33 |     {% endif %}
34 | {% else %}
35 |     <meta name="twitter:image" content="{{ 'logo-square.png' | asset_url }}" />
36 | {% endif %}
37 | 


--------------------------------------------------------------------------------
/random-number.liquid:
--------------------------------------------------------------------------------
 1 | {%- comment -%}
 2 |     Wanna change the range, just edit line 10 & 11
 3 | 
 4 |     Basic usage :
 5 |     {% render 'random-test' %}
 6 |     {{ random_number }} -> here's your random number
 7 | {%- endcomment -%}
 8 | 
 9 | {%- assign min = 0 -%}
10 | {%- assign max = 9999999 -%}
11 | {%- assign diff = max | minus: min -%}
12 | {%- assign random_number = "now" | date: "%N" | modulo: diff | plus: min -%}
13 | 


--------------------------------------------------------------------------------
/random-product.liquid:
--------------------------------------------------------------------------------
 1 | {%- comment -%}
 2 |     Basic usage to get a random product from all your shop :
 3 |     {%- render 'random-product' -%}
 4 |     {{ random_product }} -> here's your random product
 5 | 
 6 |     Basic usage to get a random product from a specific collection :
 7 |     {%- render 'random-product' with specific_collection: 'sport' -%}
 8 |     {{ random_product }} -> here's your random product
 9 | {%- endcomment -%}
10 | 
11 | {%- if specific_collection -%}
12 |     {%- assign all_products_from_collection = collections[specific_collection].products -%}
13 | {%- else -%}
14 |     {%- assign all_products_from_collection = collections['all'].products -%}
15 | {%- endif -%}
16 | 
17 | {%- assign all_products_random = '' -%}
18 | 
19 | {%- for product_splitted in all_products_from_collection -%}
20 |     {%- assign all_products_random = all_products_random | append: product_splitted.handle | append: ',' -%}
21 | {%- endfor -%}
22 | 
23 | {%- assign all_products_random_splited = all_products_random | split: ',' -%}
24 | 
25 | {%- assign min = 0 -%}
26 | {%- assign max = all_products_random_splited.size | minus: 1 -%}
27 | {%- assign diff = max | minus: min -%}
28 | {%- assign random_number = "now" | date: "%N" | modulo: diff | plus: min -%}
29 | 
30 | {%- assign random_product_slug = all_products_random_splited[random_number] -%}
31 | {%- assign random_product = all_products[random_product_slug] -%}
32 | 


--------------------------------------------------------------------------------