{"id":13477910,"url":"https://github.com/vikrantnegi/shopify-code-snippets","last_synced_at":"2025-04-09T14:06:46.161Z","repository":{"id":78928203,"uuid":"81931492","full_name":"vikrantnegi/shopify-code-snippets","owner":"vikrantnegi","description":"A compilation of code snippets for Shopify developers.","archived":false,"fork":false,"pushed_at":"2023-12-31T11:28:26.000Z","size":17,"stargazers_count":234,"open_issues_count":0,"forks_count":37,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-02T12:04:34.907Z","etag":null,"topics":["linklist","shopify","shopify-developers","shopify-snippets","shopify-theme","snippets"],"latest_commit_sha":null,"homepage":null,"language":"Liquid","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vikrantnegi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-02-14T10:00:54.000Z","updated_at":"2025-03-26T01:37:36.000Z","dependencies_parsed_at":"2024-04-16T23:41:45.774Z","dependency_job_id":"2891e404-e69c-4fb7-b034-06582d438acd","html_url":"https://github.com/vikrantnegi/shopify-code-snippets","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikrantnegi%2Fshopify-code-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikrantnegi%2Fshopify-code-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikrantnegi%2Fshopify-code-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikrantnegi%2Fshopify-code-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vikrantnegi","download_url":"https://codeload.github.com/vikrantnegi/shopify-code-snippets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248054226,"owners_count":21039952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["linklist","shopify","shopify-developers","shopify-snippets","shopify-theme","snippets"],"created_at":"2024-07-31T16:01:49.634Z","updated_at":"2025-04-09T14:06:46.140Z","avatar_url":"https://github.com/vikrantnegi.png","language":"Liquid","funding_links":["https://www.buymeacoffee.com/vikrantnegi","https://ko-fi.com/E1E6Z0JL"],"categories":["Liquid","Code Snippets","代码片段"],"sub_categories":["Elixir Examples","Elixir 示例"],"readme":"# Useful Shopify Code Snippets\n\nThis is a list of useful Shopify Snippets that I often reference while developing Shopify themes. Feel Free to contribute.\n\n* [Add Custom Badge on Products using product tag](#add-custom-badge-on-products-using-product-tag)\n* [Add Class or Id to Form](#add-class-or-id-to-form)\n* [Add page numbers to pagination](#add-page-numbers-to-pagination)\n* [Add Original Price of Discounted products on Cart Page](#add-original-price-of-discounted-products-on-cart-page)\n* [Add On Sale Badge on Products Based on Price](#add-on-sale-badge-on-products-based-on-price)\n* [Back or Continue Shopping link on Cart](#back-or-continue-shopping-link-on-cart)\n* [Blog Category Filter Dropdown](#blog-category-filter-dropdown)\n* [Calculate Discount on Products](#calculate-discount-on-products)\n* [Call a Product on any page](#call-a-product-on-any-page)\n* [Custom Pagination](#custom-pagination)\n* [Display Articles in a Blog](#display-articles-in-a-blog)\n* [Display Links in a Linklist](#display-links-in-a-linklist)\n* [Display all tags in a blog](#display-all-tags-in-a-blog)\n* [Display Products in a Collection](#display-products-in-a-collection)\n* [Display Variants in a Product](#display-variants-in-a-product)\n* [Insert Block inside a for loop at any position](#insert-block-inside-a-for-loop-at-any-position)\n* [Open External links in New Tab](#open-external-links-in-new-tab)\n* [Recommend related products](https://help.shopify.com/themes/customization/products/recommend-related-products)\n* [Show More Products from a Vendor](#show-more-products-from-a-vendor)\n* [Strip empty tags from article excerpt](#strip-empty-tags-from-article-excerpt)\n* [Multiple currency selector](#multiple-currency-selector)\n\n## Add Custom Badge on Products using product tag\nThis code adds a limited badge on products with \"limited\" tag on them. Add this in product template.\n```html\n{% for mytag in product.tags %}\n  {% if mytag == 'limited' %}\n    \u003cimg class=\"limited-badge\" src=\"{{ 'limited-badge.png' | asset_url }}\" alt=\"Limited Badge\"\u003e\n  {% endif %}\n{% endfor %}\n```\n\n## Add Class or Id to Form\n```html\n{% form 'form_name', class: 'custom-class-name', id: 'custom-id-name' %}\n```\n\n## Add page numbers to pagination\n```html\n{% assign count = paginate.pages %}\n{% for part in (1..count) %}\n  \u003cli class=\"{% if paginate.current_page == part %} active {% endif %}\"\u003e\n    \u003ca href=\"{{ collection.url }}?page={{ forloop.index }}\"\u003e{{ forloop.index }}\u003c/a\u003e\n  \u003c/li\u003e\n{% endfor %}\n```\n\n## Add Original Price of Discounted products on Cart Page\nInset the following code inside items loop in cart template.\n```html\n{% if item.product.compare_at_price \u003e item.price %}\n  \u003cs\u003e{{ item.product.compare_at_price | money }}\u003c/s\u003e\n{% endif %}\n```\n\n## Add On Sale Badge on Products Based on Price\n* Products must have \"Compare at price\" field fill in admin.\n* Shows Badge when \"compare_at_price_max\" \u003e \"product price\"\n```html\n{% if product.compare_at_price_max \u003e product.price %}\n  \u003cimg class=\"sale-product\" src=\"{{ 'sale-badge.png' | asset_url }}\" alt=\"On Sale Badge\"\u003e\n{% endif %}\n```\n\n## Back or Continue Shopping link on Cart\n#### To link to Catalog page at /collection/all\n```html\n\u003ca href=\"/collections/all\" title=\"Browse our Catalog\"\u003eContinue Shopping\u003c/a\u003e\n```\n#### To Collection the product was last added to cart\n```html\n\u003ca href=\"{{ cart.items.first.product.collections.first.url }}\" title=\"Continue Shopping\"\u003eContinue Shopping\u003c/a\u003e\n```\n\n## Blog Category Filter Dropdown\n```html\n{% if blog.tags.size \u003e 0 %}\n  \u003cselect id=\"BlogTagFilter\"\u003e\n    \u003coption value=\"/blogs/{{ blog.handle }}\"\u003e{{ 'blogs.article.all_topics' | t }}\u003c/option\u003e\n    {% for tag in blog.all_tags %}\n      \u003coption value=\"/blogs/{{ blog.handle }}/tagged/{{ tag | handleize }}\" {% if current_tags contains tag %}selected{% endif %}\u003e{{ tag }}\u003c/option\u003e\n    {% endfor %}\n  \u003c/select\u003e\n{% endif %}\n```\n\n## Calculate Discount on Products\n```html\n{% capture discount %}\n{{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max }}%\n{% endcapture %}\n  \u003cspan class=\"discount\"\u003eOFF: {{ discount }}\u003c/span\u003e\n```\n\n## Call a Product on any page\n```html\n{%- assign product = all_products['product-handle'] -%}\n```\nThen do anything with product object like ```{{ product.title }}```\n\n## Custom Pagination\nAdd `pagination-count` and `pagination-tabs` from the snippet folder to your Shopify Theme Snippet folder\n```liquid\n{% if paginate.pages \u003e 1 %}\n  {% include 'pagination-count' %}\n  {% include 'pagination-tabs' %}\n{% endif %}\n```\n\n## Display Articles in a Blog\n```html\n{% for article in blogs.blog-name.articles limit:1 %}\n  \u003cli class=\"article\"\u003e\n    \u003cimg src=\"{% if article.image %}{{ article | img_url: 'medium' }}{% endif %}\" alt=\"\" \u003e\n    \u003ca class=\"title\" href=\"{{ article.url }}\"\u003e{{ article.title }}\u003c/a\u003e\n    \u003ca class=\"date\" href=\"{{ article.url }}\"\u003e{{ article.published_at | date: \"%B %d, %Y\" }}\u003c/a\u003e\n    \u003cdiv class=\"rte content\"\u003e{{ article.excerpt_or_content }}\u003c/div\u003e\n    \u003ca href=\"{{ article.url }}\" class=\"featured-projects__link\"\u003e{{ 'blogs.article.read_more' | t }}\u003c/a\u003e\n  \u003c/li\u003e\n{% endfor %}\n```\n\n## Display Links in a Linklist\n```html\n\u003cul class=\"list\"\u003e\n  {% for link in linklists.linklist-handle.links %}\n     \u003cli\u003e{{ link.title | link_to: link.url }}\u003c/li\u003e\n  {% endfor %}\n\u003c/ul\u003e\n```\n\n## Display all tags in a blog\n```html\n{% for tag in blog.all_tags %}\n  \u003ca href=\"{{ blog.url }}/tagged/{{ tag | handle }}\"\u003e{{ tag }}\u003c/a\u003e\n{% endfor %}\n```\n\n## Display Products in a Collection\n```html\n\u003cdiv class=\"grid\"\u003e\n  \u003ch3 class=\"text-center\"\u003eProducts\u003c/h3\u003e\n  {% for product in collections.collection-name.products %}\n    \u003cdiv class=\"grid__item medium-up--one-third\"\u003e\n        \u003ca href=\"{{ product.url }}\"\u003e\u003cimg src=\"{{ product.featured_image | product_img_url: '345x' }}\" alt=\"{{ product.title | escape  }}\" /\u003e\u003c/a\u003e\n        \u003cdiv class=\"h4 grid-view-item__title\"\u003e\u003cspan\u003e{{ product.title }}\u003c/span\u003e\u003c/div\u003e\n     \u003c/div\u003e\n  {% endfor %}\n\u003c/div\u003e\n```\n\n## Display Variants in a Product\n```html\n{% for product in collections.collection-name.products %}\n  \u003cdiv class=\"grid\"\u003e\n   {% for variant in product.variants %}\n      \u003c!-- some html product box layout here --\u003e\n      {% include 'product-card-grid', grid_image_width: image_size, product: variant %}\n   {% endfor %}\n  \u003c/div\u003e\n{% endfor %}\n```\n\n## Insert Block inside a for loop at any position\nThis code inserts \"new-block\" div at position 4.\n```html\n  {% for block in section.blocks %}\n    \u003cdiv class=\"repeating-block\"\u003e\n      \u003ca href=\"#\" class=\"link\"\u003e\n        \u003cimg src=\"#\" alt=\"Dummy\"\u003e\n      \u003c/a\u003e\n    \u003c/div\u003e\n    {% if forloop.index0 == 3 %}\n      \u003cdiv class=\"new-block\"\u003e\n        \u003cimg src=\"#\" alt=\"Dummy\"\u003e\n      \u003c/div\u003e\n    {% endif %}\n  {% endfor %}\n```\n\n## Open External links in New Tab\n```javascript\n$(document).ready( function() {\n  jQuery('a[href^=\"http\"]').not('a[href^=\"'+$(location).attr('hostname')+'\"]').attr('target', '_blank');\n});\n```\n\n## Show More Products from a Vendor\n```html\n\u003cdiv\u003e\n  {% assign vendor = product.vendor %}\n  {% assign handle = product.handle %}\n  {% assign counter = '' %}\n  {% for product in collections.all.products %}\n  {% if vendor == product.vendor and counter.size \u003c 4 and handle != product.handle %}\n  {% capture temp %}{{ counter }}*{% endcapture %}\n  {% assign counter = temp %}\n  \u003cdiv class=\"recommendations_img\"\u003e\n    \u003ca href=\"{{ product.url | within: collection }}\" title=\"{{ product.title }}\"\u003e\n      \u003cimg src=\"{{ product.images.first | product_img_url: 'small' }}\" alt=\"{{ product.title }}\" /\u003e\n    \u003c/a\u003e\n  \u003c/div\u003e\u003c!-- .recommendations_img --\u003e\n  {% endif %}\n  {% endfor %}\n\u003c/div\u003e\n```\n\n## Strip empty tags from article excerpt\nStrip out empty p and span tags\n```html\n{{ article.excerpt | strip_html }}\n```\n\n## Multiple currency selector\n\n```liquid\n{% form 'currency' %}\n  {{ form | currency_selector }}\n{% endform %}\n```\n\n```liquid\n{% form 'currency' %}\n  \u003cselect name=\"currency\"\u003e\n    {% for currency in shop.enabled_currencies %}\n{% if currency == cart.currency %}\n  \u003coption selected=\"true\" value=\"{{ currency.iso_code }}\"\u003e{{currency.iso_code}} {{currency.symbol}}\u003c/option\u003e\n  {% else %}\n  \u003coption value=\"{{ currency.iso_code }}\"\u003e{{currency.iso_code}} {{currency.symbol}}\u003c/option\u003e\n{% endif %}\n    {% endfor %}\n  \u003c/select\u003e\n{% endform %}\n```\n\n```js\n$('.shopify-currency-form select').on('change', function() {\n  $(this)\n    .parents('form')\n    .submit();\n});\n```\n\n## License\n\nLicensed under the [MIT](https://github.com/vikrantnegi/shopify-code-snippets/blob/master/LICENSE).\n\n## Donation\n\nIf this project helped you reduce time to develop, please consider buying me a cup of coffee :)\n\n\u003ca href=\"https://www.buymeacoffee.com/vikrantnegi\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\" alt=\"Buy Me A Coffee\" style=\"height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;\" \u003e\u003c/a\u003e\n\n[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/E1E6Z0JL)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikrantnegi%2Fshopify-code-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvikrantnegi%2Fshopify-code-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikrantnegi%2Fshopify-code-snippets/lists"}