(287,1,'2021-11-14 11:24:06','2021-11-14 11:24:06','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than <strong>50</strong> products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li><a href=\"#select-your-template-code\" title=\"#select-your-template-code\">Select your template code</a></li><li><a href=\"#create-page-show-cats\" title=\"#create-page-show-cats\">Create a page to show your category</a></li><li><a href=\"#create-menu-link-pages\" title=\"#create-menu-link-pages\">Create a menu to control your sub-category showing</a></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store &gt; Themes</strong>.</li><li>Find the theme you want to edit, and then click&nbsp;<strong>Actions &gt; Edit code</strong>.</li><li>In the&nbsp;<strong>Templates</strong>&nbsp;directory, click&nbsp;<strong>Add a new template</strong>.</li><li>Create a new template for&nbsp;<strong>page</strong>&nbsp;called&nbsp;list-cats.</li><li>Delete the existing code in your new&nbsp;<code>page.list-cats</code>&nbsp;file. Find your theme code（this article we take Debut theme as an example） below and copy and paste the code in your&nbsp;<code>page.li</code>st-cats&nbsp;file.</li><li>Click&nbsp;<strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>in case you don\'t know how to do the above steps. please follow this video:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https://youtu.be/SzMepoHmq44\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"responsive\":true,\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps://youtu.be/SzMepoHmq44\n</div></figure>\n<!-- /wp:embed -->\n\n<!-- wp:heading -->\n<h2 id=\"select-your-template-code\">Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use, please click the related theme button then copy and paste the codes in your page.list-cats file:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-boundless\">Boundless</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-brooklyn\">Brooklyn</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-debut\">Debut</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-minimal\">Minimal</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-narrative\">Narrative</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-simple\">Simple</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-venture\">Venture</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-boundless\"><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-brooklyn\"><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-debut\"><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-minimal\"><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-narrative\"><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-simple\"><strong>6) Simple</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-venture\"><strong>7) Venture</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n &lt;div class=\"content-block\">\n   &lt;div class=\"rte rte--indented-images\">\n     {{ page.content }}\n   &lt;/div>\n &lt;/div>\n\n {%- assign collection_count = 0 -%}\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection_count = collection_count | plus: 1 -%}\n   {%- endif -%}\n {%- endfor -%}\n\n {% assign number_rows = 1 %}\n\n {% case collection_count %}\n   {% when 1 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 2 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 3 %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n   {% when 4 %}\n     {% assign grid_item_width = \'medium-up--one-quarter\' %}\n     {% assign height = 235 %}\n   {% else %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}\n {% endcase %}\n\n &lt;div class=\"grid grid--no-gutters grid--uniform collection\" data-number-rows=\"{{ number_rows }}\">\n   {% assign row_number = 1 %}\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign featured_collection = collections[link.object.handle] -%}\n       {% if collection_count > 4 and forloop.index > 3 %}\n         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}\n       {% endif %}\n       {% include \'collection-grid-item\' with stretch_collection_image: false, height: height %}\n     {%- endif -%}\n   {%- endfor -%}\n &lt;/div>\n\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:heading -->\n<h2 id=\"create-page-show-cats\">Create a page to show your categories</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store &gt; Pages</strong>.</li><li>Click&nbsp;<strong>Add page</strong>.</li><li>In the page editor, enter a&nbsp;<strong>Title</strong>&nbsp;in the text box provided. You must use the same title for the menu that you\'ll create in the upcoming steps, or <em><strong>you must keep the page\'s handle name is the same with the menu handle.</strong></em> for example in the example we set page title as \'<strong>LIPS TITLE HERE</strong>\' but we keep the page handle name as \'<strong>lips</strong>\'.</li><li>Assign your new template to the page by selecting&nbsp;<strong>list-cats</strong>&nbsp;from the&nbsp;<strong>Theme template</strong>&nbsp;drop-down menu in the&nbsp;<strong>Online store</strong>&nbsp;section.</li><li>Click&nbsp;<strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>Follow the below video for all steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https://youtu.be/gUSVspKJ-Dw\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"responsive\":true,\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps://youtu.be/gUSVspKJ-Dw\n</div></figure>\n<!-- /wp:embed -->\n\n<!-- wp:heading -->\n<h2 id=\"create-menu-link-pages\">Create a menu to control your sub-category showing </h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store &gt; Navigation</strong>.</li><li>Click the&nbsp;<strong>Add menu</strong>&nbsp;button.</li><li>Give your menu the same&nbsp;<strong>Title</strong>&nbsp;as the title that you gave the page that will feature your category or collection. if not the same Title , does not matter, you must keep the menu handle name same with page\'s hanle name. For example, in the page we created has the handle \'<strong>lips</strong>\', then give the menu handle name as \'<strong>lips</strong>\'.</li><li>Add links to your menu for each collection or category that you want to feature by clicking&nbsp;<strong>Add menu item</strong>. Choose collections from your store by clicking on&nbsp;<strong>Collections</strong>&nbsp;in the drop-down menu for the&nbsp;<strong>Link</strong>&nbsp;text box. Link to your collections in this way, instead of adding a URL to the text box.</li><li>Click&nbsp;<strong>Save menu</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>Follow the video for all the steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https://youtu.be/1yQR0do7mbg\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"responsive\":true,\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps://youtu.be/1yQR0do7mbg\n</div></figure>\n<!-- /wp:embed -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in Shopify store for Shopify free themes','','publish','open','open','','how-to-show-sub-category-list','','','2021-11-14 11:31:38','2021-11-14 11:31:38','',0,'https://www.mojoin.com/?p=287',0,'post','',0),(288,1,'2021-01-13 09:55:37','2021-01-13 09:55:37','<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','show sub category in parent category shopify store -debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-01-13 09:55:37','2021-01-13 09:55:37','',287,'https://www.mojoin.com/287-revision-v1/',0,'revision','',0),(290,1,'2021-01-23 15:59:24','0000-00-00 00:00:00','<!-- wp:paragraph -->\n<p>refer to : https://support.weareunderground.com/article/272-how-do-i-add-a-custom-font-to-my-theme</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to use own font in shopify','','draft','open','open','','','','','2021-01-23 15:59:24','2021-01-23 15:59:24','',0,'https://www.mojoin.com/?p=290',0,'post','',0),(291,1,'2021-01-23 15:59:21','2021-01-23 15:59:21','<!-- wp:paragraph -->\n<p>refer to : https://support.weareunderground.com/article/272-how-do-i-add-a-custom-font-to-my-theme</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to use own font in shopify','','inherit','closed','closed','','290-revision-v1','','','2021-01-23 15:59:21','2021-01-23 15:59:21','',290,'https://www.mojoin.com/290-revision-v1/',0,'revision','',0),(292,1,'2021-01-26 04:50:15','2021-01-26 04:50:15','<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -> this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','show sub category in parent category shopify store -debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-01-26 04:50:15','2021-01-26 04:50:15','',287,'https://www.mojoin.com/287-revision-v1/',0,'revision','',0),(293,1,'2021-01-26 04:50:34','2021-01-26 04:50:34','<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -> this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','show sub category in parent category shopify store -debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-01-26 04:50:34','2021-01-26 04:50:34','',287,'https://www.mojoin.com/287-revision-v1/',0,'revision','',0),(295,1,'2021-07-18 05:34:41','2021-07-18 05:34:41','<!-- wp:paragraph -->\n<p>As we all know Reorder or Buy Again functionality is a very easy way to increase your profit and very convenient for customers as well. but unfortunately, the Free Shopify themes do not include Reorder or Buy Again shortcut in the customer account and order history panel.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you are struggling with this tough job, this article is just for you. I will show you how to add Reorder or Buy Again button into your customer account and the order details page of your Shopify store step by step.  Let us take Shopify free <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Debut theme</a> as an example. for all others, the backend logic is very similar. You can tailor as your requirement. if you can\'t get it, do not hesitate to <a href=\"https://www.mojoin.com/about-us/\">contact us</a>. we would like to help you out.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong><a href=\"#step1-add-cjf\" title=\"#step1-add-cjf\">Step 1:  add customize javascript file</a></strong><br><a href=\"#step2-reorder-style\"><strong>Step 2:  add Reorder button styles</strong></a><br><strong><a href=\"#step3-reorder-button-func\">Step 3:  create snippets for reorder button function</a></strong><br><strong><a href=\"#step4-reorder-in-account\">Step 4:  render reorder button on the customer account page</a></strong><br><strong><a href=\"#step5-reoder-button-inorder\">Step 5:  render reorder button in the order details page</a></strong><br><strong><a href=\"#step6-test\">Step 6:  Test</a></strong><br><strong><a href=\"#step7-conclusion\">Step 7:  Conclusion</a></strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step1-add-cjf\">Step 1: add customize javascript file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Create a new js file under the Assets folder and name it stx_custom.js. your file location will be :<br><strong>Themes </strong>-&gt; <strong>Edit Code</strong> -&gt; <strong>Assets </strong>-&gt; <strong>stx_custom.js</strong><br>Copy and paste the following code in:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">(function($) {\n  \n  \n  // stx reorder \n  this.reorder = new function(){\n    var self = this;\n\n    this.pushQueue = function(i, data, el){\n\n      //LOW STOCK -- add as many as possible if stock is below requested ammount\n      if(data[i].check_inventory){\n        data[i].quantity = Math.min(parseInt(data[i].inventory), parseInt(data[i].quantity));\n      }\n\n      $.ajax({\n        url: \'/cart/add.js\',\n        method: \'POST\',\n        data: {\n          quantity: data[i].quantity,\n          id: data[i].id\n        },\n        complete: function(res){\n          if(i >= data.length - 1){\n            //products from queue are now added to the cart -> stop loading signal and go to cart\n            el.removeClass(\'loading\');\n            window.location.href = \'/cart\';\n            return;\n          }else{\n            // Calls are async as required by Shopify Docs\n               self.pushQueue(i+1, data, el);\n          }\n        }\n      });\n    }\n\n    this.listen = function(){\n      var el = $(this);\n      var ids = el.attr(\'data-variant-ids\').split(\',\');\n      var quantities = el.attr(\'data-variant-quantities\').split(\',\');\n      var inventories = el.attr(\'data-variant-inventories\').split(\',\');\n      var inventory_policies = el.attr(\'data-variant-inventory-policies\').split(\',\');\n      var inventory_trackers = el.attr(\'data-variant-inventory-trackers\').split(\',\');\n      ids.splice(-1, 1);\n      quantities.splice(-1, 1);\n      inventories.splice(-1, 1);\n      inventory_policies.splice(-1, 1);\n      inventory_trackers.splice(-1, 1);\n\n      var data = [];\n      for(var i=0; i&lt;ids.length; i++){\n        data.push({\n          id: ids[i],\n          quantity: quantities[i],\n          inventory: inventories[i],\n          check_inventory: (inventory_policies[i] == \"deny\" &amp;&amp; inventory_trackers[i] != \"\")\n        });\n      }\n      el.addClass(\'loading\');\n      self.pushQueue(0, data, el);\n    }\n\n    this.init = function(){\n      $(\'.reorder-btn\').on(\'click\', self.listen);\n    }\n  }\n\n  $(reorder.init);\n \n  \n})(jQuery)</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can also download this file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/stx_custom.js\">Github</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>let\'s explain a little bit more for the  above codes:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>line 5</strong>: we define an object to process reorder request, it includes three functions: pushQueue, listen, and init.<br><strong>line 8</strong>: pushQueue function implementation to call Shopify <a href=\"https://shopify.dev/api/ajax/reference/cart\">Ajax add-to-cart API</a> directly push our product into customer\'s cart.<br><strong>line 36</strong>: listen function to deal with reorder button click event.<br><strong>line 62</strong>: init function in order to bind the click event with our listen function.<br><strong>line 67</strong>: call init function to bind the click event when page load js file finished.<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step2-reorder-style\">Step 2: add Reorder button styles</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Locate shopify store Debut theme\'s style file at:<br><strong>Themes </strong>-&gt; <strong>Edit Code</strong> -&gt; <strong>Layout</strong> -&gt; <strong>theme.liquid</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Copy and past the following lines in the end of the above theme style liquid file.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">/* reorder style */\n\n@-webkit-keyframes rotating{\n    from{\n        -webkit-transform:rotate(0deg);\n        -o-transform:rotate(0deg);\n        transform:rotate(0deg)\n    }\n    to{\n        -webkit-transform:rotate(360deg);\n        -o-transform:rotate(360deg);\n        transform:rotate(360deg)\n    }\n}\n@keyframes rotating{\n    from{\n        -ms-transform:rotate(0deg);\n        -moz-transform:rotate(0deg);\n        -webkit-transform:rotate(0deg);\n        -o-transform:rotate(0deg);\n        transform:rotate(0deg)\n    }\n    to{\n        -ms-transform:rotate(360deg);\n        -moz-transform:rotate(360deg);\n        -webkit-transform:rotate(360deg);\n        -o-transform:rotate(360deg);\n        transform:rotate(360deg)\n    }\n}\n\n\n.pt-spinner {\n    -webkit-animation: rotating .5s linear infinite;\n    animation: rotating .5s linear infinite;\n    height: 100%;\n  \n}\n\n.pt-spinner-container{\n  display: none;\n  height: 22px;\n  margin-top: -4px;\n}\n\n.reorder-btn{\n  width: 100px;\n  height: 38px;\n  display: inline-block;\n  padding: 12px 14px 9px;\n  margin: 0;\n  line-height: 1;\n  text-align: center;\n  vertical-align: middle;\n  white-space: nowrap;\n  cursor: pointer;\n  border: 1px solid transparent;\n  border-radius: 2px;\n  font-size: 13px;\n  background-color: #fdb819;\n  color: #000;\n  -webkit-transition: background-color 0.2s ease-out;\n  -moz-transition: background-color 0.2s ease-out;\n  -ms-transition: background-color 0.2s ease-out;\n  -o-transition: background-color 0.2s ease-out;\n  transition: background-color 0.2s ease-out;\n}\n.reorder-btn:hover{\n  background-color: #fdb819;\n}\n\n\n.reorder-btn.loading .pt-spinner-container{\n  display: inline-block;\n}\n\n.reorder-btn.loading .pt-reorder-text{\n  display: none;\n}\n/* reorder style end */</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can also get this content from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/stx_reorder_style.css\">Github</a>.<br>here we define the reorder button style and effect when you click the button.<br>obviously you can customize them as your need.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step3-reorder-button-func\">Step 3: create snippets for reorder button function</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Create a new snippet file called stx_reorder.liquid at :<br><strong>Themes </strong>-&gt; <strong>Edit Code</strong> -&gt; <strong>Snippets</strong> -&gt; <strong>stx_reorder.liquid</strong><br>Copy and paste the following codes in :</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% capture variant_ids %}{% for line_item in order.line_items %}{{ line_item.variant_id }},{% endfor %}{% endcapture %}\n{% capture variant_quantities %}{% for line_item in order.line_items %}{{ line_item.quantity }},{% endfor %}{% endcapture %}\n{% capture variant_inventories %}{% for line_item in order.line_items %}{{ line_item.variant.inventory_quantity }},{% endfor %}{% endcapture %}\n{% capture variant_inventory_policies %}{% for line_item in order.line_items %}{{ line_item.variant.inventory_policy }},{% endfor %}{% endcapture %}\n{% capture variant_inventory_trackers %}{% for line_item in order.line_items %}{{ line_item.variant.inventory_management }},{% endfor %}{% endcapture %}\n\n&lt;div class=\"reorder-btn btn flip-front\"\n    data-variant-ids=\"{{ variant_ids }}\"\n    data-variant-quantities=\"{{ variant_quantities }}\"\n    data-variant-inventories=\"{{ variant_inventories }}\"\n    data-variant-inventory-policies=\"{{ variant_inventory_policies }}\"\n    data-variant-inventory-trackers=\"{{ variant_inventory_trackers }}\">\n  &lt;span class=\"pt-reorder-text\">REORDER&lt;/span>\n  &lt;span class=\"pt-spinner-container\">\n    &lt;svg class=\"pt-spinner\" viewBox=\"0 0 20 20\" aria-label=\"Loading\" role=\"status\">\n      &lt;path d=\"M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z\" style=\"fill: white;\">&lt;/path>\n    &lt;/svg>\n  &lt;/span>\n&lt;/div>\n</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>line 1-5</strong>: get the product variant data from <a href=\"https://shopify.dev/api/liquid/objects/line_item\">line_item</a> object of your <a href=\"https://shopify.dev/api/liquid/objects/order\">order</a> object . as you can see we need you pass the order object in.<br><strong>line 7-12</strong>: save the product variant data in Reorder button <a href=\"https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes\">data-* attributes</a>, once reorder button clicked will get them and push to Shopify cart backend.<br><strong>line 13</strong>: Reorder button name, whatever name you like, you can put here, for example : Buy Me Again.<br><strong>line 14-17</strong>: loading effect when reorder button clicked, implemented with <a href=\"https://www.w3schools.com/html/html5_svg.asp\">SVG</a> graphics element.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step4-reorder-in-account\">Step 4: render reorder button on the customer account page</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Add the following line :<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;td>{% render \"stx_reorder\" order:order %}&lt;/td></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>into your customer account template file:<br><strong>Themes</strong> -&gt; <strong>Edit Code</strong> -&gt; <strong>Templates </strong>-&gt; <strong>customers/account.liquid</strong><br>at <strong>line 31</strong>, just in the order line loop.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Once you done, you account liquid file will look like this:<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":420,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/reorder-button-in-customer-account.png\" alt=\"\" class=\"wp-image-420\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2 id=\"step5-reoder-button-inorder\">Step 5: render reorder button in the order details page</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Add the following line :<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"stx-reorder-button\">{% render \"stx_reorder\" %}&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>into your customer account template file:<br><strong>Themes</strong> -&gt; <strong>Edit Code</strong> -&gt; <strong>Templates </strong>-&gt; <strong>customers/order.liquid</strong><br>at around <strong>line 209</strong>，if you have changed the original file, please refer to the following screenshot to put it at the right location.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Once you done, you order liquid file will look like this:<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":421,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/reorder-button-in-customer-order.png\" alt=\"\" class=\"wp-image-421\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2 id=\"step6-test\">Step 6: Test</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>if all are correct , now you can login your store and visit your account, you will see reorder button in your order history table as below screenshot shown:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":422,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/reorder-button-inyouraccount.png\" alt=\"\" class=\"wp-image-422\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>click reorder button, the order product will be added into your Shopify cart and your will be redirected to the cart page.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In your order details page , reorder button will be end of order data table, looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p> </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":423,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/reorder-button-in-order-details.png\" alt=\"\" class=\"wp-image-423\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Actually you can put the button wherever you want, you just need to modify your customers/order.liquid file.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:html -->\n<script async=\"\" src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>\n<!-- mojoin-home-page -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-6569971233827474\" data-ad-slot=\"4992576575\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"></ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n</script>\n<!-- /wp:html -->\n\n<!-- wp:heading -->\n<h2 id=\"step7-conclusion\">Step 7: Conclusion</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>In this guide, I show you how to add Reorder or Buy Again button in Shopify account and order details page from scratch. In this way your customer can re-purchase their favourite products quickly from their account or purchased history which means we save customer\'s time and you have more chance to increase your profit from your existing customers. If you got any problems please  <a href=\"https://www.mojoin.com/about-us/\">let us</a> know.</p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','publish','open','open','','shopify-add-buy-again-button','','','2021-07-19 00:31:07','2021-07-19 00:31:07','',0,'https://www.mojoin.com/?p=295',0,'post','',4),(296,1,'2021-02-04 03:42:22','2021-02-04 03:42:22','<!-- wp:paragraph -->\n<p>to shopify order history list refer to : https://freakdesign.com.au/blogs/news/129660999-how-to-create-a-button-to-let-customers-repeat-their-previous-order</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','add reorder or buy again button','','inherit','closed','closed','','295-revision-v1','','','2021-02-04 03:42:22','2021-02-04 03:42:22','',295,'https://www.mojoin.com/295-revision-v1/',0,'revision','',0),(297,1,'2021-02-05 16:53:43','0000-00-00 00:00:00','<!-- wp:list {\"ordered\":true} -->\n<ol><li>Edit product options in shopping cart  refer to : <a href=\"https://community.shopify.com/c/Shopify-Design/edit-options-directly-on-the-cart-page/td-p/215707\">edit options directly on the cart page - Shopify Community</a></li><li>Reorder button added in order history , refer to : <a href=\"https://smooth.ie/blogs/news/how-to-create-a-reorder-button-in-shopify\">add reorder button to shopify store</a></li><li>Catch on and Kogan products import and order sync with shopify </li><li></li></ol>\n<!-- /wp:list -->','Ready to do shopify app','','draft','closed','closed','','','','','2021-02-05 16:53:43','2021-02-05 16:53:43','',0,'https://www.mojoin.com/?page_id=297',0,'page','',0),(298,1,'2021-02-05 16:53:40','2021-02-05 16:53:40','<!-- wp:list {\"ordered\":true} -->\n<ol><li>Edit product options in shopping cart  refer to : <a href=\"https://community.shopify.com/c/Shopify-Design/edit-options-directly-on-the-cart-page/td-p/215707\">edit options directly on the cart page - Shopify Community</a></li><li>Reorder button added in order history , refer to : <a href=\"https://smooth.ie/blogs/news/how-to-create-a-reorder-button-in-shopify\">add reorder button to shopify store</a></li><li>Catch on and Kogan products import and order sync with shopify </li><li></li></ol>\n<!-- /wp:list -->','Ready to do shopify app','','inherit','closed','closed','','297-revision-v1','','','2021-02-05 16:53:40','2021-02-05 16:53:40','',297,'https://www.mojoin.com/297-revision-v1/',0,'revision','',0),(300,1,'2021-02-15 04:25:34','0000-00-00 00:00:00','<!-- wp:paragraph -->\n<p>add pagination for brooklyn home page collection, refer to : https://happyelegantlife.com</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','add pagination for brooklyn home page collection','','draft','open','open','','','','','2021-02-15 04:25:34','2021-02-15 04:25:34','',0,'https://www.mojoin.com/?p=300',0,'post','',0),(301,1,'2021-02-15 04:24:59','2021-02-15 04:24:59','<!-- wp:paragraph -->\n<p>add pagination for brooklyn home page collection</p>\n<!-- /wp:paragraph -->','add pagination for brooklyn home page collection','','inherit','closed','closed','','300-revision-v1','','','2021-02-15 04:24:59','2021-02-15 04:24:59','',300,'https://www.mojoin.com/300-revision-v1/',0,'revision','',0),(302,1,'2021-02-15 04:25:32','2021-02-15 04:25:32','<!-- wp:paragraph -->\n<p>add pagination for brooklyn home page collection, refer to : https://happyelegantlife.com</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','add pagination for brooklyn home page collection','','inherit','closed','closed','','300-revision-v1','','','2021-02-15 04:25:32','2021-02-15 04:25:32','',300,'https://www.mojoin.com/300-revision-v1/',0,'revision','',0),(304,1,'2021-02-27 20:39:27','0000-00-00 00:00:00','<!-- wp:paragraph -->\n<p>refer to : https://shopify.dev/tutorials/develop-theme-ajax-api-using-jquery and https://mayert-douglas4935.myshopify.com/pages/api </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to use Shopify Ajax API','','draft','open','open','','','','','2021-02-27 20:39:27','2021-02-27 20:39:27','',0,'https://www.mojoin.com/?p=304',0,'post','',0),(305,1,'2021-02-27 20:39:25','2021-02-27 20:39:25','<!-- wp:paragraph -->\n<p>refer to : https://shopify.dev/tutorials/develop-theme-ajax-api-using-jquery and https://mayert-douglas4935.myshopify.com/pages/api </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to use Shopify Ajax API','','inherit','closed','closed','','304-revision-v1','','','2021-02-27 20:39:25','2021-02-27 20:39:25','',304,'https://www.mojoin.com/304-revision-v1/',0,'revision','',0),(306,1,'2021-03-03 12:26:04','0000-00-00 00:00:00','<!-- wp:paragraph -->\n<p>just need to use line time properties like this: </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">    &lt;input type=\"hidden\" name=\"properties[shaedeone]\" value=\"0-shade one cool\" ></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>put at the product page in the form tag </p>\n<!-- /wp:paragraph -->','Add more options for one product from the frontend directly','','draft','open','open','','','','','2021-03-03 12:26:04','2021-03-03 12:26:04','',0,'https://www.mojoin.com/?p=306',0,'post','',0),(307,1,'2021-03-03 12:26:02','2021-03-03 12:26:02','<!-- wp:paragraph -->\n<p>just need to use line time properties like this: </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">    &lt;input type=\"hidden\" name=\"properties[shaedeone]\" value=\"0-shade one cool\" ></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>put at the product page in the form tag </p>\n<!-- /wp:paragraph -->','Add more options for one product from the frontend directly','','inherit','closed','closed','','306-revision-v1','','','2021-03-03 12:26:02','2021-03-03 12:26:02','',306,'https://www.mojoin.com/306-revision-v1/',0,'revision','',0),(311,1,'2021-07-02 00:47:56','2021-07-02 00:47:56','<!-- wp:paragraph -->\n<p>When you install Shopify free Debut theme, on the home page there is a featured collection. when you select your favorite product collection to show them, you will find there is no [Add to Cart] quick buy button, so from a user experience point of view, it will be better if you can add a quick to buy button and will have more chance to make people buy your product directly and the user does not need to do another step to click the product go to product page then add to cart from there. You know every time when you need a user to do one more step you will get more chances to lose your customer.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So today I will show you how to add a [Add to Cart] quick link or button on the collection product especially on the home page and all the collection pages step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:html -->\n<script async=\"\" src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>\n<!-- mojoin-home-page -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-6569971233827474\" data-ad-slot=\"4992576575\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"></ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n</script>\n<!-- /wp:html -->\n\n<!-- wp:heading -->\n<h2>Construct Add to Cart Link </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Firstly we should know how the Shopify [Add to Cart] link looks like and how it works. Actually, Shopify [Add to Cart] link looks like the following:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>[ <strong>Store Domain</strong> ] + \'/cart/add?id=\' + [<strong>product_variant_id</strong>] + \'&amp;quantity=\' + [<strong>product_quantity</strong>]</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><br>[Store Domain]: is your Shopify store URL, for example, https://www.mojoin.com. sometimes we can ignore the store domain if you use this link in your store and with HTML &lt;a&gt; tag.<br>[product_variant_id]: is your product variant id.  <br>[product_quantity]: is the number how many products you want to add to the cart for the user, default it is 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finish fully example will be like :<br>https://www.mojoin.com/cart/add?id=2423498823478&amp;quantity=1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Add Link to Collection Product</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Ok, now you have known how to construct the [Add to Cart] link, let\'s move to the next step to add this link to the collection product.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Log in your Shopify store backend edit your Debut theme code, then locate:<br><strong>Sections</strong> -&gt; <strong>collection-template.liquid </strong>-&gt; <strong>line 143</strong><br>or search for \'<strong>product-card-grid</strong>\'.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>then copy the following codes after line 143.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% assign added_to_cart_link = \'/cart/add?id=\' | append:product.first_available_variant.id | append: \'&amp;amp;quantity=1\' %}\n&lt;a href=\"{{ added_to_cart_link }}\">&lt;button>ADD TO CART&lt;/button>&lt;/a>\n    </pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Line 1 : we make up Add to Cart link, here we use the Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object</a>.  with the object\'s variable <em>first_available_variant </em>we can get our product variant ID. then we add the other quantity parameter with default value 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Line 2 : just add HTML &lt;a&gt; tag with our constructed link. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finished, your file will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":348,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-code-1024x379.png\" alt=\"\" class=\"wp-image-348\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now save the changed template file. Go to your browser type any your Shopify store collection page your page will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":351,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-cpage.png\" alt=\"\" class=\"wp-image-351\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Add to Home Featured Collection Product</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Edit your Debut theme code, then locate:<br><strong>Sections </strong>-&gt; <strong>collection.liquid</strong> -&gt; <strong>line 30</strong><br>or search for \'<strong>product-card-grid</strong>\'.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Then copy the same above codes and insert them after line 30.<br>Once you have done, your codes will like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":357,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-colletion.png\" alt=\"\" class=\"wp-image-357\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now click the [Add to Cart] button from your home page featured collection products or from your product collection page directly, your customer will be redirected to the Shopify cart page, then customers can quickly check out from their cart.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Hopefully, you can get more orders!</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>TIPS</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>You might want to show product variants at the product grid list as well, please refer to:<br><a href=\"https://www.mojoin.com/show-product-variant-incolletion-shopify/\">How to show product variant under product title in the Debut theme</a></p>\n<!-- /wp:paragraph -->','Quick Add to Cart button on Collection Product for Debut theme Home and Collection','','publish','open','open','','create-shopify-add-to-cart-link','','','2021-07-16 05:45:16','2021-07-16 05:45:16','',0,'https://www.mojoin.com/?p=311',0,'post','',0),(312,1,'2021-05-27 23:57:01','2021-05-27 23:57:01','<!-- wp:heading {\"level\":1} -->\n<h1>Creating a Shopify ‘add to cart’ link</h1>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://apps.shopify.com/hypervisual\">Hypervisual</a>&nbsp;has powerful tools to embed your products with variant selectors and an add to cart button. But sometimes you want to create a link which adds a product (or products!) to your cart without the product image, product name or variant selector. Here\'s how to do it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you have Hypervisual installed, open your product page in your store, and add ?LIST_VARIANTS to the end of the URL, for example:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://www.your-store.com/products/amazing?LIST_VARIANTS\">https://www.your-store.com/products/amazing?LIST_VARIANTS</a><br><br>When you visit that page you\'ll get a list of all of your product variants, the add to cart URLs and the direct to checkout URLs.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>(If this doesn\'t work, and your product page URL already has question mark in it, try &amp;LIST_VARIANTS instead.)<br><br>If you don\'t have Hypervisual installed, things get trickier. You need to construct the link manually like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https://www.your-store.com/cart/add?id=12345\"} -->\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps://www.your-store.com/cart/add?id=12345\n</div></figure>\n<!-- /wp:embed -->\n\n<!-- wp:paragraph -->\n<p>and replace&nbsp;<strong>12345</strong>&nbsp;with your variant ID. To find the variant ID, the easiest way is to open the product inside your Shopify admin, click \'Edit\' next to the particular variant you want to have added to the basket, then pick the variant ID up from the URL that\'s then inside your browser address bar: it\'s the very last number at the end of the web address.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>To learn how to make direct-to-checkout links without Hypervisual installed, read this Shopify help article:&nbsp;<a href=\"https://help.shopify.com/themes/customization/cart/use-permalinks-to-preload-cart\">Use permalinks to pre-load the cart</a>.</p>\n<!-- /wp:paragraph -->','Creating a Shopify ‘add to cart’ link','','inherit','closed','closed','','311-revision-v1','','','2021-05-27 23:57:01','2021-05-27 23:57:01','',311,'https://www.mojoin.com/?p=312',0,'revision','',0),(314,1,'2021-06-04 09:52:14','2021-06-04 09:52:14','<!-- wp:heading {\"level\":1} -->\n<h1>Creating a Shopify ‘add to cart’ link</h1>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>in liquid file we can get product first variant and id example:<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"{{ product.url | within: collection }}\">ADD TO CART</a><br>{% endcomment %}<br>{% assign added_to_cart_link = \'/cart/add?id=\' | append:product.first_available_variant.id | append: \'&amp;quantity=1\' %}<br><a href=\"{{ added_to_cart_link }}\">ADD TO CART</a><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://apps.shopify.com/hypervisual\">Hypervisual</a> has powerful tools to embed your products with variant selectors and an add to cart button. But sometimes you want to create a link which adds a product (or products!) to your cart without the product image, product name or variant selector. Here\'s how to do it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you have Hypervisual installed, open your product page in your store, and add ?LIST_VARIANTS to the end of the URL, for example:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://www.your-store.com/products/amazing?LIST_VARIANTS\">https://www.your-store.com/products/amazing?LIST_VARIANTS</a><br><br>When you visit that page you\'ll get a list of all of your product variants, the add to cart URLs and the direct to checkout URLs.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>(If this doesn\'t work, and your product page URL already has question mark in it, try &amp;LIST_VARIANTS instead.)<br><br>If you don\'t have Hypervisual installed, things get trickier. You need to construct the link manually like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https://www.your-store.com/cart/add?id=12345\"} -->\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps://www.your-store.com/cart/add?id=12345\n</div></figure>\n<!-- /wp:embed -->\n\n<!-- wp:paragraph -->\n<p>and replace&nbsp;<strong>12345</strong>&nbsp;with your variant ID. To find the variant ID, the easiest way is to open the product inside your Shopify admin, click \'Edit\' next to the particular variant you want to have added to the basket, then pick the variant ID up from the URL that\'s then inside your browser address bar: it\'s the very last number at the end of the web address.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>To learn how to make direct-to-checkout links without Hypervisual installed, read this Shopify help article:&nbsp;<a href=\"https://help.shopify.com/themes/customization/cart/use-permalinks-to-preload-cart\">Use permalinks to pre-load the cart</a>.</p>\n<!-- /wp:paragraph -->','Creating a Shopify ‘add to cart’ link','','inherit','closed','closed','','311-revision-v1','','','2021-06-04 09:52:14','2021-06-04 09:52:14','',311,'https://www.mojoin.com/?p=314',0,'revision','',0),(315,1,'2021-06-04 10:05:54','2021-06-04 10:05:54','<!-- wp:heading {\"level\":1} -->\n<h1></h1>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>in liquid file we can get product first variant and id example:<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"{{ product.url | within: collection }}\">ADD TO CART</a><br>{% endcomment %}<br>{% assign added_to_cart_link = \'/cart/add?id=\' | append:product.first_available_variant.id | append: \'&amp;quantity=1\' %}<br><a href=\"{{ added_to_cart_link }}\">ADD TO CART</a><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://apps.shopify.com/hypervisual\">Hypervisual</a> has powerful tools to embed your products with variant selectors and an add to cart button. But sometimes you want to create a link which adds a product (or products!) to your cart without the product image, product name or variant selector. Here\'s how to do it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you have Hypervisual installed, open your product page in your store, and add ?LIST_VARIANTS to the end of the URL, for example:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://www.your-store.com/products/amazing?LIST_VARIANTS\">https://www.your-store.com/products/amazing?LIST_VARIANTS</a><br><br>When you visit that page you\'ll get a list of all of your product variants, the add to cart URLs and the direct to checkout URLs.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>(If this doesn\'t work, and your product page URL already has question mark in it, try &amp;LIST_VARIANTS instead.)<br><br>If you don\'t have Hypervisual installed, things get trickier. You need to construct the link manually like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https://www.your-store.com/cart/add?id=12345\"} -->\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps://www.your-store.com/cart/add?id=12345\n</div></figure>\n<!-- /wp:embed -->\n\n<!-- wp:paragraph -->\n<p>and replace&nbsp;<strong>12345</strong>&nbsp;with your variant ID. To find the variant ID, the easiest way is to open the product inside your Shopify admin, click \'Edit\' next to the particular variant you want to have added to the basket, then pick the variant ID up from the URL that\'s then inside your browser address bar: it\'s the very last number at the end of the web address.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>To learn how to make direct-to-checkout links without Hypervisual installed, read this Shopify help article:&nbsp;<a href=\"https://help.shopify.com/themes/customization/cart/use-permalinks-to-preload-cart\">Use permalinks to pre-load the cart</a>.</p>\n<!-- /wp:paragraph -->','How to make a Shopify ‘add to cart’ link','','inherit','closed','closed','','311-revision-v1','','','2021-06-04 10:05:54','2021-06-04 10:05:54','',311,'https://www.mojoin.com/?p=315',0,'revision','',0),(316,1,'2021-06-04 10:06:15','2021-06-04 10:06:15','<!-- wp:heading {\"level\":1} -->\n<h1>How to make a Shopify ‘add to cart’ link</h1>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>in liquid file we can get product first variant and id example:<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"{{ product.url | within: collection }}\">ADD TO CART</a><br>{% endcomment %}<br>{% assign added_to_cart_link = \'/cart/add?id=\' | append:product.first_available_variant.id | append: \'&amp;quantity=1\' %}<br><a href=\"{{ added_to_cart_link }}\">ADD TO CART</a><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://apps.shopify.com/hypervisual\">Hypervisual</a> has powerful tools to embed your products with variant selectors and an add to cart button. But sometimes you want to create a link which adds a product (or products!) to your cart without the product image, product name or variant selector. Here\'s how to do it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you have Hypervisual installed, open your product page in your store, and add ?LIST_VARIANTS to the end of the URL, for example:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://www.your-store.com/products/amazing?LIST_VARIANTS\">https://www.your-store.com/products/amazing?LIST_VARIANTS</a><br><br>When you visit that page you\'ll get a list of all of your product variants, the add to cart URLs and the direct to checkout URLs.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>(If this doesn\'t work, and your product page URL already has question mark in it, try &amp;LIST_VARIANTS instead.)<br><br>If you don\'t have Hypervisual installed, things get trickier. You need to construct the link manually like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https://www.your-store.com/cart/add?id=12345\"} -->\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps://www.your-store.com/cart/add?id=12345\n</div></figure>\n<!-- /wp:embed -->\n\n<!-- wp:paragraph -->\n<p>and replace&nbsp;<strong>12345</strong>&nbsp;with your variant ID. To find the variant ID, the easiest way is to open the product inside your Shopify admin, click \'Edit\' next to the particular variant you want to have added to the basket, then pick the variant ID up from the URL that\'s then inside your browser address bar: it\'s the very last number at the end of the web address.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>To learn how to make direct-to-checkout links without Hypervisual installed, read this Shopify help article:&nbsp;<a href=\"https://help.shopify.com/themes/customization/cart/use-permalinks-to-preload-cart\">Use permalinks to pre-load the cart</a>.</p>\n<!-- /wp:paragraph -->','How to make a Shopify ‘add to cart’ link','','inherit','closed','closed','','311-revision-v1','','','2021-06-04 10:06:15','2021-06-04 10:06:15','',311,'https://www.mojoin.com/?p=316',0,'revision','',0),(318,1,'2021-06-14 02:25:39','0000-00-00 00:00:00','<!-- wp:paragraph -->\n<p>write an article like https://apps.shopify.com/locksmith</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>teach people how to do this</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Lock product in shopify like lock smith','','draft','open','open','','','','','2021-06-14 02:25:39','2021-06-14 02:25:39','',0,'https://www.mojoin.com/?p=318',0,'post','',0),(319,1,'2021-06-14 02:25:38','2021-06-14 02:25:38','<!-- wp:paragraph -->\n<p>write an article like https://apps.shopify.com/locksmith</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>teach people how to do this</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Lock product in shopify like lock smith','','inherit','closed','closed','','318-revision-v1','','','2021-06-14 02:25:38','2021-06-14 02:25:38','',318,'https://www.mojoin.com/?p=319',0,'revision','',0),(320,1,'2021-06-14 05:55:03','0000-00-00 00:00:00','<!-- wp:paragraph -->\n<p>refer to : <a href=\"https://www.shopify.com.au/partners/blog/building-a-clickable-call-to-action-button-for-your-shopify-theme\">https://www.shopify.com.au/partners/blog/building-a-clickable-call-to-action-button-for-your-shopify-theme</a></p>\n<!-- /wp:paragraph -->','How to develop a CTA button in your shopify store','','draft','open','open','','','','','2021-06-14 05:55:03','2021-06-14 05:55:03','',0,'https://www.mojoin.com/?p=320',0,'post','',0),(321,1,'2021-06-14 05:55:00','2021-06-14 05:55:00','<!-- wp:paragraph -->\n<p>refer to : <a href=\"https://www.shopify.com.au/partners/blog/building-a-clickable-call-to-action-button-for-your-shopify-theme\">https://www.shopify.com.au/partners/blog/building-a-clickable-call-to-action-button-for-your-shopify-theme</a></p>\n<!-- /wp:paragraph -->','How to develop a CTA button in your shopify store','','inherit','closed','closed','','320-revision-v1','','','2021-06-14 05:55:00','2021-06-14 05:55:00','',320,'https://www.mojoin.com/?p=321',0,'revision','',0),(322,1,'2021-06-15 07:49:37','2021-06-15 07:49:37','','banner-image-space-removed','','inherit','open','closed','','banner-image-space-removed','','','2021-06-15 07:49:37','2021-06-15 07:49:37','',0,'https://www.mojoin.com/wp-content/uploads/2021/06/banner-image-space-removed.png',0,'attachment','image/png',0),(325,1,'2021-07-04 11:31:21','2021-07-04 11:31:21','<!-- wp:paragraph -->\n<p>In the Shopify Debut Theme, default there is no product variant shown up in the product collection product grid view which means if users want to see the product variants they need to a product detail page. It will take users one more step to get what they want, from a user experience point of view it is not an effective and good way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Thanks for the Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object </a>which we can use to get the product variants data, then we can show them on whatever page we want.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Lets take <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Shopfiy Debut Theme </a> as an example. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Edit Collection Liquid File</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Open collection file at:<br><strong>Edit Code</strong> -&gt; <strong>Sections</strong> -&gt; <strong>collection.liquid</strong><br>Go to line 30( just for initial Debut Theme without any plugins installed and modifications) otherwise try to search for \"<strong>product-card-grid</strong>\"</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Then copy the following lines and paste just after that</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{%- if product.first_available_variant.title != \"Default Title\" -%}\n        &lt;select name=\"id\" class=\"single-option-selector single-option-selector-product-template product-form__input\">\n           {% for variant in product.variants %}\n           &lt;option value=\"{{ variant.id }}\" data-image=\"{{ variant.image | img_url : \'360x\' }}\"\n                   {%- if variant == current_variant %} selected=\"selected\" {%- endif -%}\n                   >\n             {{ variant.title }}  {%- if variant.available == false %} - {{ \'products.product.sold_out\' | t }}{% endif %}\n                      &lt;/option>\n           {% endfor %}        \n    	&lt;/select>\n        {%- endif -%}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 1 :</strong> just ignore the product without any variants, in the Shopify backend even you do not set any variant it still need to create a default variant for the product in order to manage the inventory of the product, in this case Shopify default product variant\'s name will be set as  \'Default Title\'. so here we use IF statement check product first available variant\'s title to ignore them.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 2-10 :</strong> just show the product variants data with SELECT element.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Once you done the above, your collection-template.liquid file will like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":366,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-collection-1024x410.png\" alt=\"\" class=\"wp-image-366\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Save the file, go to your store home page have a look at the featured collection products you will see :</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":371,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-collection-list.png\" alt=\"\" class=\"wp-image-371\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Edito Collection Template Liquid File</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Open collection template file at:<br><strong>Edit Code</strong> -&gt; <strong>Sections</strong> -&gt; <strong>collection-template.liquid</strong><br>Go to line 143( just for initial Debut Theme without any plugins installed and modifications) otherwise try to search for \"<strong>product-card-grid</strong>\"</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Copy the above lines at just after that. Once you done your codes will like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":374,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-pcollection-list-1024x493.png\" alt=\"\" class=\"wp-image-374\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now your collection page looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":375,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-pcollection-list-2.png\" alt=\"\" class=\"wp-image-375\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>TIPS</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>You might want to add [Add to Cart] button or link to the product grid list as well, please refer to :<br><a href=\"https://www.mojoin.com/create-shopify-add-to-cart-link/\">Quick Add to Cart button on Collection Product for Debut theme Home and Collection</a></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:html -->\n<script async=\"\" src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>\n<!-- mojoin-home-page -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-6569971233827474\" data-ad-slot=\"4992576575\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"></ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n</script>\n<!-- /wp:html -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show product variant under product title in the Debut theme','','publish','open','open','','show-product-variant-incolletion-shopify','','','2021-07-16 05:43:26','2021-07-16 05:43:26','',0,'https://www.mojoin.com/?p=325',0,'post','',0),(326,1,'2021-06-21 07:09:16','2021-06-21 07:09:16','<!-- wp:paragraph -->\n<p>to do this </p>\n<!-- /wp:paragraph -->','How to add product variant under product title in the debug theme','','inherit','closed','closed','','325-revision-v1','','','2021-06-21 07:09:16','2021-06-21 07:09:16','',325,'https://www.mojoin.com/?p=326',0,'revision','',0),(327,1,'2021-06-21 07:10:37','0000-00-00 00:00:00','<!-- wp:paragraph -->\n<p>need to check to see if shopify API can do this or not</p>\n<!-- /wp:paragraph -->','Add product Y to cart automatically when user add product X','','draft','open','open','','','','','2021-06-21 07:10:37','2021-06-21 07:10:37','',0,'https://www.mojoin.com/?p=327',0,'post','',0),(328,1,'2021-06-21 07:10:37','2021-06-21 07:10:37','<!-- wp:paragraph -->\n<p>need to check to see if shopify API can do this or not</p>\n<!-- /wp:paragraph -->','Add product Y to cart automatically when user add product X','','inherit','closed','closed','','327-revision-v1','','','2021-06-21 07:10:37','2021-06-21 07:10:37','',327,'https://www.mojoin.com/?p=328',0,'revision','',0),(330,1,'2021-06-30 04:45:27','0000-00-00 00:00:00','<!-- wp:paragraph -->\n<p>people search this one, write an article for this one please </p>\n<!-- /wp:paragraph -->','debut theme image with text overlay size','','draft','open','open','','','','','2021-06-30 04:45:27','2021-06-30 04:45:27','',0,'https://www.mojoin.com/?p=330',0,'post','',0),(331,1,'2021-06-30 04:45:14','2021-06-30 04:45:14','<!-- wp:paragraph -->\n<p>people search this one, write an article for this one please </p>\n<!-- /wp:paragraph -->','debut theme image with text overlay size','','inherit','closed','closed','','330-revision-v1','','','2021-06-30 04:45:14','2021-06-30 04:45:14','',330,'https://www.mojoin.com/?p=331',0,'revision','',0),(333,1,'2021-06-30 04:55:54','2021-06-30 04:55:54','<!-- wp:image {\"align\":\"center\",\"id\":132,\"width\":768,\"height\":402,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/show-diff-pcmobile-banner-images-1024x536.jpg\" alt=\"different banner image for PC &amp; Mobile\" class=\"wp-image-132\" width=\"768\" height=\"402\"/><figcaption>different banner image for PC &amp; Mobile</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>In Shopify default <strong>Debut</strong> theme, there are sections called \"image with text\" and \"image with text overlay\". You can use them to put an image with text on your home page, but you can\'t set different images for Desktop or Mobile, so the reality is it is very difficult to make one image size to support both Desktop and Mobile and make them both looks perfect on two devices.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In order to solve the above problem, we need to customize the default theme, here we will use the Shopify Debut theme to show you how to implement this functionality, I will guide you through the whole process following the below steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong><a href=\"#define-our-section\">define your sections in the Shopify Debut theme</a></strong></li><li><strong><a href=\"#add-image-to-section\" title=\"#add-image-to-section\">add image set in the section</a></strong></li><li><strong><a href=\"#add-css-style\">put our CSS code into the theme</a></strong></li><li><strong><a href=\"#debug-and-test\" title=\"#debug-and-test\">debug and test</a></strong></li><li><strong><a href=\"#make-it-live\" title=\"#make-it-live\">publish the theme</a></strong></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"define-our-section\">Define your own sections </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>login to your store backend,select your theme to edit code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":137,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/edit-them-code.png\" alt=\"edit theme code\" class=\"wp-image-137\"/><figcaption>edit theme code</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Add new section called \"yx-desktop-banner\",then your can see a liquid file called yx-desktop-banner.liquid will be added in your sections directory.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":139,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/add-new-section-2-theme.png\" alt=\"add new section\" class=\"wp-image-139\"/><figcaption>add new section</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Repeat above step to create the other section named as \"yx-mobile-banner\".</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"add-image-to-section\">Add Image Picker to the section</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Click the above created yx-desktop-banner.liquid file to edit it. Delete all the default codes in the file, replace them with the below lines:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"page-width yx-desktop-banner-container yx-mobile-hidden\">\n &lt;div class=\"container-full\">\n   {% for block in section.blocks limit: 1 %}\n	&lt;img class=\"img-responsive lazyload\"  data-src=\"{{ block.settings.yx_image_picker | img_url: \'2000x\' }}\" />\n   {% endfor %}\n&lt;/div>\n&lt;/div>\n{% schema %}\n  {\n    \"name\": \"YX Desktop Banner\",\n    \"class\": \"yx-desktop-banner-section\",\n    \"max_blocks\": 1,\n    \"blocks\": [\n    {\n      \"type\": \"image_picker\",\n      \"name\": \"Desktop Banner Image\",\n      \"settings\": [\n        {\n          \"label\": \"Desktop Banner Image\",\n          \"id\": \"yx_image_picker\",\n          \"type\": \"image_picker\"\n        }\n      ]\n    }\n  ],\n \"presets\": [\n    {\n      \"name\": \"YX Desktop Banner\",\n      \"category\": \"Home\",\n\"blocks\":[{\"type\" : \"image_picker\"}]\n    }\n]\n  }\n{% endschema %}\n{% stylesheet %}\n{% endstylesheet %}\n{% javascript %}\n{% endjavascript %}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>You can get the above file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/yx-desktop-banner.liquid\">GitHub</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Save it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Replaced yx-mobile-banner.liquid file content with the following lines:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"page-width yx-mobile-banner-container yx-desktop-hidden\">\n &lt;div class=\"container-full\">\n   {% for block in section.blocks limit: 1 %}\n	&lt;img class=\"img-responsive lazyload\"  data-src=\"{{ block.settings.yx_image_picker | img_url: \'750x\' }}\" />\n   {% endfor %}\n&lt;/div>\n&lt;/div>\n{% schema %}\n  {\n    \"name\": \"YX Mobile Banner\",\n    \"class\": \"yx-mobile-banner-section\",\n    \"max_blocks\": 1,\n    \"blocks\": [\n    {\n      \"type\": \"image_picker\",\n      \"name\": \"Mobile Banner Image\",\n      \"settings\": [\n        {\n          \"label\": \"Mobile Banner Image\",\n          \"id\": \"yx_image_picker\",\n          \"type\": \"image_picker\"\n        }\n      ]\n    }\n  ],\n \"presets\": [\n    {\n      \"name\": \"YX Mobile Banner\",\n      \"category\": \"Home\",\n      \"blocks\":[{\"type\" : \"image_picker\"}]\n    }\n ]\n}\n{% endschema %}\n{% stylesheet %}\n{% endstylesheet %}\n{% javascript %}\n{% endjavascript %}\n</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>You can get the above file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/yx-mobile-banner.liquid\">GitHub</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t forget to save it as well.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Now when you customize your theme, click <strong>[Add section]</strong> you will see two new sections: \'\'<strong>YX Desktop Banner</strong>\" and \"<strong>YX Mobile Banner</strong>\".</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":179,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/new-section-added.png\" alt=\"\" class=\"wp-image-179\"/><figcaption>new section shown up</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2 id=\"add-css-style\">Add CSS codes to control our style</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>After you add newly created sections to your home page, obviously we don\'t want to show both of them on mobile and desktop. We want to show a mobile banner on mobile and show a desktop banner on the desktop only. How to do this? you may have noticed we have added a specific class named \"<strong>yx-desktop-hidden</strong>\" for the mobile banner container and put a class named \"<strong>yx-mobile-hidden</strong>\" into the desktop banner container. And we have given mobile and desktop banner container-related class name \"<strong>yx-mobile-banner-container</strong>\" and \"<strong>yx-desktop-banner-container</strong>\". Now we can easily use a CSS style to control them.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>add the below CSS style codes into Debut theme CSS file. Your theme.css ( for old version Debut theme it will be theme.css.liquid ) file will be under the <strong>Assets</strong> directory.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media only screen and (max-width: 749px) {\n   .yx-mobile-hidden{\n      display:none;\n    }\n   .yx-desktop-hidden{\n      display:block;\n    }\n}\n\n@media only screen and (min-width: 750px) {\n   .yx-mobile-hidden{\n      display:block;\n   }\n   .yx-desktop-hidden{\n      display:none;\n    }\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>You can copy and past the codes from <a href=\"https://jsfiddle.net/yxmaomao/7z2mgf4a/6/\">JSFiddle</a> as well.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>As you can see we use CSS @media and screen size(<strong>750px</strong> as a threshold screen width) to differentiate mobile from desktop. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"debug-and-test\">Debug and Test</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>In order to get the best performance and visual looking, we highly recommend &nbsp;<strong>1920(width) * 1080(height)</strong> for desktop and <strong>800(width) * 800(height) </strong> for mobile. after you set your mobile and desktop banner image separately. you can preview your theme and switch between mobile and desktop to have a review.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":158,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/preview-banner-images-1024x395.png\" alt=\"shopify theme preview\" class=\"wp-image-158\"/><figcaption>shopify theme preview</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>If you don\'t like the default style, you can customer them by adding special attributes for \"<strong>yx-mobile-banner-container</strong>\" class to control mobile banner style and do similar changes to \"<strong>yx-desktop-banner-container</strong>\" class for your desktop banner.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"make-it-live\">Make it live</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>So far all good, if you and your customer both are satisfied with the changes. Congratulations! you have got a big success, last step so easy just click the publish button to make it live.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>publish a theme when you are editing it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":160,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/publish-a-theme-1024x52.png\" alt=\"publish a theme\" class=\"wp-image-160\"/><figcaption>publish a theme</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>publish a theme from theme list. <strong><em>Themes</em></strong> <em><strong>-&gt;Actions -&gt;Publish</strong></em>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":162,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/publish-a-theme-main-1024x373.png\" alt=\"publish a theme \" class=\"wp-image-162\"/><figcaption>publish a theme from theme list </figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Conclusions</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Now you have got a basic idea on how to implement showing different image banners for Desktop and mobile, you can make it better for your theme. We only use the free Debut theme as an example, actually, a different theme maybe needs a few changes to adapt to your environment. if you find it is very difficult for you to accomplish these, please do not hesitate to leave a message at the below comment area or <a href=\"https://www.mojoin.com/about-us/\">contact us</a>, we will try our best to help you out.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','Show Different Shopify Banner Image on Desktop and Mobile','','inherit','closed','closed','','66-revision-v1','','','2021-06-30 04:55:54','2021-06-30 04:55:54','',66,'https://www.mojoin.com/?p=333',0,'revision','',0),(334,1,'2021-06-30 05:01:47','2021-06-30 05:01:47','','debut-theme-css-location','','inherit','open','closed','','debut-theme-css-location','','','2021-06-30 05:01:47','2021-06-30 05:01:47','',66,'https://www.mojoin.com/wp-content/uploads/2021/06/debut-theme-css-location.png',0,'attachment','image/png',0),(336,1,'2021-06-30 05:02:10','2021-06-30 05:02:10','<!-- wp:image {\"align\":\"center\",\"id\":132,\"width\":768,\"height\":402,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/show-diff-pcmobile-banner-images-1024x536.jpg\" alt=\"different banner image for PC &amp; Mobile\" class=\"wp-image-132\" width=\"768\" height=\"402\"/><figcaption>different banner image for PC &amp; Mobile</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>In Shopify default <strong>Debut</strong> theme, there are sections called \"image with text\" and \"image with text overlay\". You can use them to put an image with text on your home page, but you can\'t set different images for Desktop or Mobile, so the reality is it is very difficult to make one image size to support both Desktop and Mobile and make them both looks perfect on two devices.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In order to solve the above problem, we need to customize the default theme, here we will use the Shopify Debut theme to show you how to implement this functionality, I will guide you through the whole process following the below steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong><a href=\"#define-our-section\">define your sections in the Shopify Debut theme</a></strong></li><li><strong><a href=\"#add-image-to-section\" title=\"#add-image-to-section\">add image set in the section</a></strong></li><li><strong><a href=\"#add-css-style\">put our CSS code into the theme</a></strong></li><li><strong><a href=\"#debug-and-test\" title=\"#debug-and-test\">debug and test</a></strong></li><li><strong><a href=\"#make-it-live\" title=\"#make-it-live\">publish the theme</a></strong></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"define-our-section\">Define your own sections </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>login to your store backend,select your theme to edit code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":137,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/edit-them-code.png\" alt=\"edit theme code\" class=\"wp-image-137\"/><figcaption>edit theme code</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Add new section called \"yx-desktop-banner\",then your can see a liquid file called yx-desktop-banner.liquid will be added in your sections directory.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":139,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/add-new-section-2-theme.png\" alt=\"add new section\" class=\"wp-image-139\"/><figcaption>add new section</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Repeat above step to create the other section named as \"yx-mobile-banner\".</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"add-image-to-section\">Add Image Picker to the section</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Click the above created yx-desktop-banner.liquid file to edit it. Delete all the default codes in the file, replace them with the below lines:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"page-width yx-desktop-banner-container yx-mobile-hidden\">\n &lt;div class=\"container-full\">\n   {% for block in section.blocks limit: 1 %}\n	&lt;img class=\"img-responsive lazyload\"  data-src=\"{{ block.settings.yx_image_picker | img_url: \'2000x\' }}\" />\n   {% endfor %}\n&lt;/div>\n&lt;/div>\n{% schema %}\n  {\n    \"name\": \"YX Desktop Banner\",\n    \"class\": \"yx-desktop-banner-section\",\n    \"max_blocks\": 1,\n    \"blocks\": [\n    {\n      \"type\": \"image_picker\",\n      \"name\": \"Desktop Banner Image\",\n      \"settings\": [\n        {\n          \"label\": \"Desktop Banner Image\",\n          \"id\": \"yx_image_picker\",\n          \"type\": \"image_picker\"\n        }\n      ]\n    }\n  ],\n \"presets\": [\n    {\n      \"name\": \"YX Desktop Banner\",\n      \"category\": \"Home\",\n\"blocks\":[{\"type\" : \"image_picker\"}]\n    }\n]\n  }\n{% endschema %}\n{% stylesheet %}\n{% endstylesheet %}\n{% javascript %}\n{% endjavascript %}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>You can get the above file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/yx-desktop-banner.liquid\">GitHub</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Save it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Replaced yx-mobile-banner.liquid file content with the following lines:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"page-width yx-mobile-banner-container yx-desktop-hidden\">\n &lt;div class=\"container-full\">\n   {% for block in section.blocks limit: 1 %}\n	&lt;img class=\"img-responsive lazyload\"  data-src=\"{{ block.settings.yx_image_picker | img_url: \'750x\' }}\" />\n   {% endfor %}\n&lt;/div>\n&lt;/div>\n{% schema %}\n  {\n    \"name\": \"YX Mobile Banner\",\n    \"class\": \"yx-mobile-banner-section\",\n    \"max_blocks\": 1,\n    \"blocks\": [\n    {\n      \"type\": \"image_picker\",\n      \"name\": \"Mobile Banner Image\",\n      \"settings\": [\n        {\n          \"label\": \"Mobile Banner Image\",\n          \"id\": \"yx_image_picker\",\n          \"type\": \"image_picker\"\n        }\n      ]\n    }\n  ],\n \"presets\": [\n    {\n      \"name\": \"YX Mobile Banner\",\n      \"category\": \"Home\",\n      \"blocks\":[{\"type\" : \"image_picker\"}]\n    }\n ]\n}\n{% endschema %}\n{% stylesheet %}\n{% endstylesheet %}\n{% javascript %}\n{% endjavascript %}\n</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>You can get the above file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/yx-mobile-banner.liquid\">GitHub</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t forget to save it as well.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Now when you customize your theme, click <strong>[Add section]</strong> you will see two new sections: \'\'<strong>YX Desktop Banner</strong>\" and \"<strong>YX Mobile Banner</strong>\".</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":179,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/new-section-added.png\" alt=\"\" class=\"wp-image-179\"/><figcaption>new section shown up</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2 id=\"add-css-style\">Add CSS codes to control our style</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>After you add newly created sections to your home page, obviously we don\'t want to show both of them on mobile and desktop. We want to show a mobile banner on mobile and show a desktop banner on the desktop only. How to do this? you may have noticed we have added a specific class named \"<strong>yx-desktop-hidden</strong>\" for the mobile banner container and put a class named \"<strong>yx-mobile-hidden</strong>\" into the desktop banner container. And we have given mobile and desktop banner container-related class name \"<strong>yx-mobile-banner-container</strong>\" and \"<strong>yx-desktop-banner-container</strong>\". Now we can easily use a CSS style to control them.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>add the below CSS style codes into Debut theme CSS file. Your theme.css ( for old version Debut theme it will be theme.css.liquid ) file will be under the <strong>Assets</strong> directory.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":334,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/06/debut-theme-css-location.png\" alt=\"\" class=\"wp-image-334\"/><figcaption>theme.css file location in Debut Theme</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media only screen and (max-width: 749px) {\n   .yx-mobile-hidden{\n      display:none;\n    }\n   .yx-desktop-hidden{\n      display:block;\n    }\n}\n\n@media only screen and (min-width: 750px) {\n   .yx-mobile-hidden{\n      display:block;\n   }\n   .yx-desktop-hidden{\n      display:none;\n    }\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>You can copy and past the codes from <a href=\"https://jsfiddle.net/yxmaomao/7z2mgf4a/6/\">JSFiddle</a> as well.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>As you can see we use CSS @media and screen size(<strong>750px</strong> as a threshold screen width) to differentiate mobile from desktop. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"debug-and-test\">Debug and Test</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>In order to get the best performance and visual looking, we highly recommend &nbsp;<strong>1920(width) * 1080(height)</strong> for desktop and <strong>800(width) * 800(height) </strong> for mobile. after you set your mobile and desktop banner image separately. you can preview your theme and switch between mobile and desktop to have a review.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":158,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/preview-banner-images-1024x395.png\" alt=\"shopify theme preview\" class=\"wp-image-158\"/><figcaption>shopify theme preview</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>If you don\'t like the default style, you can customer them by adding special attributes for \"<strong>yx-mobile-banner-container</strong>\" class to control mobile banner style and do similar changes to \"<strong>yx-desktop-banner-container</strong>\" class for your desktop banner.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"make-it-live\">Make it live</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>So far all good, if you and your customer both are satisfied with the changes. Congratulations! you have got a big success, last step so easy just click the publish button to make it live.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>publish a theme when you are editing it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":160,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/publish-a-theme-1024x52.png\" alt=\"publish a theme\" class=\"wp-image-160\"/><figcaption>publish a theme</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>publish a theme from theme list. <strong><em>Themes</em></strong> <em><strong>-&gt;Actions -&gt;Publish</strong></em>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":162,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/publish-a-theme-main-1024x373.png\" alt=\"publish a theme \" class=\"wp-image-162\"/><figcaption>publish a theme from theme list </figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Conclusions</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Now you have got a basic idea on how to implement showing different image banners for Desktop and mobile, you can make it better for your theme. We only use the free Debut theme as an example, actually, a different theme maybe needs a few changes to adapt to your environment. if you find it is very difficult for you to accomplish these, please do not hesitate to leave a message at the below comment area or <a href=\"https://www.mojoin.com/about-us/\">contact us</a>, we will try our best to help you out.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','Show Different Shopify Banner Image on Desktop and Mobile','','inherit','closed','closed','','66-revision-v1','','','2021-06-30 05:02:10','2021-06-30 05:02:10','',66,'https://www.mojoin.com/?p=336',0,'revision','',0),(338,1,'2021-06-30 22:33:07','2021-06-30 22:33:07','<!-- wp:image {\"align\":\"center\",\"id\":132,\"width\":768,\"height\":402,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/show-diff-pcmobile-banner-images-1024x536.jpg\" alt=\"different banner image for PC &amp; Mobile\" class=\"wp-image-132\" width=\"768\" height=\"402\"/><figcaption>different banner image for PC &amp; Mobile</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>In Shopify default <strong>Debut</strong> theme, there are sections called \"image with text\" and \"image with text overlay\". You can use them to put an image with text on your home page, but you can\'t set different images for Desktop or Mobile, so the reality is it is very difficult to make one image size to support both Desktop and Mobile and make them both looks perfect on two devices.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In order to solve the above problem, we need to customize the default theme, here we will use the Shopify Debut theme to show you how to implement this functionality, I will guide you through the whole process following the below steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong><a href=\"#define-our-section\">define your sections in the Shopify Debut theme</a></strong></li><li><strong><a href=\"#add-image-to-section\" title=\"#add-image-to-section\">add image set in the section</a></strong></li><li><strong><a href=\"#add-css-style\">put our CSS code into the theme</a></strong></li><li><strong><a href=\"#debug-and-test\" title=\"#debug-and-test\">debug and test</a></strong></li><li><strong><a href=\"#make-it-live\" title=\"#make-it-live\">publish the theme</a></strong></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"define-our-section\">Define your own sections </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>login to your store backend,select your theme to edit code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":137,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/edit-them-code.png\" alt=\"edit theme code\" class=\"wp-image-137\"/><figcaption>edit theme code</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Add new section called \"yx-desktop-banner\",then your can see a liquid file called yx-desktop-banner.liquid will be added in your sections directory.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":139,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/add-new-section-2-theme.png\" alt=\"add new section\" class=\"wp-image-139\"/><figcaption>add new section</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Repeat above step to create the other section named as \"yx-mobile-banner\".</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"add-image-to-section\">Add Image Picker to the section</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Click the above created yx-desktop-banner.liquid file to edit it. Delete all the default codes in the file, replace them with the below lines:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"page-width yx-desktop-banner-container yx-mobile-hidden\">\n &lt;div class=\"container-full\">\n   {% for block in section.blocks limit: 1 %}\n	&lt;img class=\"img-responsive lazyload\"  data-src=\"{{ block.settings.yx_image_picker | img_url: \'2000x\' }}\" />\n   {% endfor %}\n&lt;/div>\n&lt;/div>\n{% schema %}\n  {\n    \"name\": \"YX Desktop Banner\",\n    \"class\": \"yx-desktop-banner-section\",\n    \"max_blocks\": 1,\n    \"blocks\": [\n    {\n      \"type\": \"image_picker\",\n      \"name\": \"Desktop Banner Image\",\n      \"settings\": [\n        {\n          \"label\": \"Desktop Banner Image\",\n          \"id\": \"yx_image_picker\",\n          \"type\": \"image_picker\"\n        }\n      ]\n    }\n  ],\n \"presets\": [\n    {\n      \"name\": \"YX Desktop Banner\",\n      \"category\": \"Home\",\n\"blocks\":[{\"type\" : \"image_picker\"}]\n    }\n]\n  }\n{% endschema %}\n{% stylesheet %}\n{% endstylesheet %}\n{% javascript %}\n{% endjavascript %}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>You can get the above file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/yx-desktop-banner.liquid\">GitHub</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Save it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Replaced yx-mobile-banner.liquid file content with the following lines:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"page-width yx-mobile-banner-container yx-desktop-hidden\">\n &lt;div class=\"container-full\">\n   {% for block in section.blocks limit: 1 %}\n	&lt;img class=\"img-responsive lazyload\"  data-src=\"{{ block.settings.yx_image_picker | img_url: \'750x\' }}\" />\n   {% endfor %}\n&lt;/div>\n&lt;/div>\n{% schema %}\n  {\n    \"name\": \"YX Mobile Banner\",\n    \"class\": \"yx-mobile-banner-section\",\n    \"max_blocks\": 1,\n    \"blocks\": [\n    {\n      \"type\": \"image_picker\",\n      \"name\": \"Mobile Banner Image\",\n      \"settings\": [\n        {\n          \"label\": \"Mobile Banner Image\",\n          \"id\": \"yx_image_picker\",\n          \"type\": \"image_picker\"\n        }\n      ]\n    }\n  ],\n \"presets\": [\n    {\n      \"name\": \"YX Mobile Banner\",\n      \"category\": \"Home\",\n      \"blocks\":[{\"type\" : \"image_picker\"}]\n    }\n ]\n}\n{% endschema %}\n{% stylesheet %}\n{% endstylesheet %}\n{% javascript %}\n{% endjavascript %}\n</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>You can get the above file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/yx-mobile-banner.liquid\">GitHub</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t forget to save it as well.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Now when you customize your theme, click <strong>[Add section]</strong> you will see two new sections: \'\'<strong>YX Desktop Banner</strong>\" and \"<strong>YX Mobile Banner</strong>\".</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":179,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/new-section-added.png\" alt=\"\" class=\"wp-image-179\"/><figcaption>new section shown up</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2 id=\"add-css-style\">Add CSS codes to control our style</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>After you add newly created sections to your home page, obviously we don\'t want to show both of them on mobile and desktop. We want to show a mobile banner on mobile and show a desktop banner on the desktop only. How to do this? you may have noticed we have added a specific class named \"<strong>yx-desktop-hidden</strong>\" for the mobile banner container and put a class named \"<strong>yx-mobile-hidden</strong>\" into the desktop banner container. And we have given mobile and desktop banner container-related class name \"<strong>yx-mobile-banner-container</strong>\" and \"<strong>yx-desktop-banner-container</strong>\". Now we can easily use a CSS style to control them.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>add the below CSS style codes into Debut theme CSS file. Your theme.css ( for old version Debut theme it will be theme.css.liquid ) file will be under the <strong>Assets</strong> directory.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":334,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/06/debut-theme-css-location.png\" alt=\"\" class=\"wp-image-334\"/><figcaption>theme.css file location in Debut Theme</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media only screen and (max-width: 749px) {\n   .yx-mobile-hidden{\n      display:none;\n    }\n   .yx-desktop-hidden{\n      display:block;\n    }\n}\n\n@media only screen and (min-width: 750px) {\n   .yx-mobile-hidden{\n      display:block;\n   }\n   .yx-desktop-hidden{\n      display:none;\n    }\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>You can copy and past the codes from <a href=\"https://jsfiddle.net/yxmaomao/7z2mgf4a/6/\">JSFiddle</a> as well.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>As you can see we use CSS @media and screen size(<strong>750px</strong> as a threshold screen width) to differentiate mobile from desktop. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"debug-and-test\">Debug and Test</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>In order to get the best performance and visual looking, we highly recommend &nbsp;<strong>1920(width) * 1080(height)</strong> for desktop and <strong>800(width) * 800(height) </strong> for mobile. after you set your mobile and desktop banner image separately. you can preview your theme and switch between mobile and desktop to have a review.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":158,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/preview-banner-images-1024x395.png\" alt=\"shopify theme preview\" class=\"wp-image-158\"/><figcaption>shopify theme preview</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>If you don\'t like the default style, you can customer them by adding special attributes for \"<strong>yx-mobile-banner-container</strong>\" class to control mobile banner style and do similar changes to \"<strong>yx-desktop-banner-container</strong>\" class for your desktop banner.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"make-it-live\">Make it live</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>So far all good, if you and your customer both are satisfied with the changes. Congratulations! you have got a big success, last step so easy just click the publish button to make it live.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>publish a theme when you are editing it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":160,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/publish-a-theme-1024x52.png\" alt=\"publish a theme\" class=\"wp-image-160\"/><figcaption>publish a theme</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>publish a theme from theme list. <strong><em>Themes</em></strong> <em><strong>-&gt;Actions -&gt;Publish</strong></em>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":162,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/publish-a-theme-main-1024x373.png\" alt=\"publish a theme \" class=\"wp-image-162\"/><figcaption>publish a theme from theme list </figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Conclusions</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Now you have got a basic idea on how to implement showing different image banners for Desktop and mobile, you can make it better for your theme. We only use the free Debut theme as an example, actually, a different theme maybe needs a few changes to adapt to your environment. if you find it is very difficult for you to accomplish these, please do not hesitate to leave a message at the below comment area or <a href=\"https://www.mojoin.com/about-us/\">contact us</a>, we will try our best to help you out.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>TIPS</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Shopify have deprecated the sass supporting in the theme editor, for more details please visit <a href=\"https://www.shopify.com.au/partners/blog/deprecating-sass\" target=\"_blank\" rel=\"noreferrer noopener\">here</a> </p>\n<!-- /wp:paragraph -->','Show Different Shopify Banner Image on Desktop and Mobile','','inherit','closed','closed','','66-revision-v1','','','2021-06-30 22:33:07','2021-06-30 22:33:07','',66,'https://www.mojoin.com/?p=338',0,'revision','',0),(339,1,'2021-06-30 22:33:19','2021-06-30 22:33:19','<!-- wp:image {\"align\":\"center\",\"id\":132,\"width\":768,\"height\":402,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/show-diff-pcmobile-banner-images-1024x536.jpg\" alt=\"different banner image for PC &amp; Mobile\" class=\"wp-image-132\" width=\"768\" height=\"402\"/><figcaption>different banner image for PC &amp; Mobile</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>In Shopify default <strong>Debut</strong> theme, there are sections called \"image with text\" and \"image with text overlay\". You can use them to put an image with text on your home page, but you can\'t set different images for Desktop or Mobile, so the reality is it is very difficult to make one image size to support both Desktop and Mobile and make them both looks perfect on two devices.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In order to solve the above problem, we need to customize the default theme, here we will use the Shopify Debut theme to show you how to implement this functionality, I will guide you through the whole process following the below steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong><a href=\"#define-our-section\">define your sections in the Shopify Debut theme</a></strong></li><li><strong><a href=\"#add-image-to-section\" title=\"#add-image-to-section\">add image set in the section</a></strong></li><li><strong><a href=\"#add-css-style\">put our CSS code into the theme</a></strong></li><li><strong><a href=\"#debug-and-test\" title=\"#debug-and-test\">debug and test</a></strong></li><li><strong><a href=\"#make-it-live\" title=\"#make-it-live\">publish the theme</a></strong></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"define-our-section\">Define your own sections </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>login to your store backend,select your theme to edit code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":137,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/edit-them-code.png\" alt=\"edit theme code\" class=\"wp-image-137\"/><figcaption>edit theme code</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Add new section called \"yx-desktop-banner\",then your can see a liquid file called yx-desktop-banner.liquid will be added in your sections directory.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":139,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/add-new-section-2-theme.png\" alt=\"add new section\" class=\"wp-image-139\"/><figcaption>add new section</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Repeat above step to create the other section named as \"yx-mobile-banner\".</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"add-image-to-section\">Add Image Picker to the section</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Click the above created yx-desktop-banner.liquid file to edit it. Delete all the default codes in the file, replace them with the below lines:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"page-width yx-desktop-banner-container yx-mobile-hidden\">\n &lt;div class=\"container-full\">\n   {% for block in section.blocks limit: 1 %}\n	&lt;img class=\"img-responsive lazyload\"  data-src=\"{{ block.settings.yx_image_picker | img_url: \'2000x\' }}\" />\n   {% endfor %}\n&lt;/div>\n&lt;/div>\n{% schema %}\n  {\n    \"name\": \"YX Desktop Banner\",\n    \"class\": \"yx-desktop-banner-section\",\n    \"max_blocks\": 1,\n    \"blocks\": [\n    {\n      \"type\": \"image_picker\",\n      \"name\": \"Desktop Banner Image\",\n      \"settings\": [\n        {\n          \"label\": \"Desktop Banner Image\",\n          \"id\": \"yx_image_picker\",\n          \"type\": \"image_picker\"\n        }\n      ]\n    }\n  ],\n \"presets\": [\n    {\n      \"name\": \"YX Desktop Banner\",\n      \"category\": \"Home\",\n\"blocks\":[{\"type\" : \"image_picker\"}]\n    }\n]\n  }\n{% endschema %}\n{% stylesheet %}\n{% endstylesheet %}\n{% javascript %}\n{% endjavascript %}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>You can get the above file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/yx-desktop-banner.liquid\">GitHub</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Save it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Replaced yx-mobile-banner.liquid file content with the following lines:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"page-width yx-mobile-banner-container yx-desktop-hidden\">\n &lt;div class=\"container-full\">\n   {% for block in section.blocks limit: 1 %}\n	&lt;img class=\"img-responsive lazyload\"  data-src=\"{{ block.settings.yx_image_picker | img_url: \'750x\' }}\" />\n   {% endfor %}\n&lt;/div>\n&lt;/div>\n{% schema %}\n  {\n    \"name\": \"YX Mobile Banner\",\n    \"class\": \"yx-mobile-banner-section\",\n    \"max_blocks\": 1,\n    \"blocks\": [\n    {\n      \"type\": \"image_picker\",\n      \"name\": \"Mobile Banner Image\",\n      \"settings\": [\n        {\n          \"label\": \"Mobile Banner Image\",\n          \"id\": \"yx_image_picker\",\n          \"type\": \"image_picker\"\n        }\n      ]\n    }\n  ],\n \"presets\": [\n    {\n      \"name\": \"YX Mobile Banner\",\n      \"category\": \"Home\",\n      \"blocks\":[{\"type\" : \"image_picker\"}]\n    }\n ]\n}\n{% endschema %}\n{% stylesheet %}\n{% endstylesheet %}\n{% javascript %}\n{% endjavascript %}\n</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>You can get the above file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/yx-mobile-banner.liquid\">GitHub</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t forget to save it as well.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Now when you customize your theme, click <strong>[Add section]</strong> you will see two new sections: \'\'<strong>YX Desktop Banner</strong>\" and \"<strong>YX Mobile Banner</strong>\".</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":179,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/new-section-added.png\" alt=\"\" class=\"wp-image-179\"/><figcaption>new section shown up</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2 id=\"add-css-style\">Add CSS codes to control our style</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>After you add newly created sections to your home page, obviously we don\'t want to show both of them on mobile and desktop. We want to show a mobile banner on mobile and show a desktop banner on the desktop only. How to do this? you may have noticed we have added a specific class named \"<strong>yx-desktop-hidden</strong>\" for the mobile banner container and put a class named \"<strong>yx-mobile-hidden</strong>\" into the desktop banner container. And we have given mobile and desktop banner container-related class name \"<strong>yx-mobile-banner-container</strong>\" and \"<strong>yx-desktop-banner-container</strong>\". Now we can easily use a CSS style to control them.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>add the below CSS style codes into Debut theme CSS file. Your theme.css ( for old version Debut theme it will be theme.css.liquid ) file will be under the <strong>Assets</strong> directory.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":334,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/06/debut-theme-css-location.png\" alt=\"\" class=\"wp-image-334\"/><figcaption>theme.css file location in Debut Theme</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media only screen and (max-width: 749px) {\n   .yx-mobile-hidden{\n      display:none;\n    }\n   .yx-desktop-hidden{\n      display:block;\n    }\n}\n\n@media only screen and (min-width: 750px) {\n   .yx-mobile-hidden{\n      display:block;\n   }\n   .yx-desktop-hidden{\n      display:none;\n    }\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>You can copy and past the codes from <a href=\"https://jsfiddle.net/yxmaomao/7z2mgf4a/6/\">JSFiddle</a> as well.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>As you can see we use CSS @media and screen size(<strong>750px</strong> as a threshold screen width) to differentiate mobile from desktop. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"debug-and-test\">Debug and Test</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>In order to get the best performance and visual looking, we highly recommend &nbsp;<strong>1920(width) * 1080(height)</strong> for desktop and <strong>800(width) * 800(height) </strong> for mobile. after you set your mobile and desktop banner image separately. you can preview your theme and switch between mobile and desktop to have a review.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":158,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/preview-banner-images-1024x395.png\" alt=\"shopify theme preview\" class=\"wp-image-158\"/><figcaption>shopify theme preview</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>If you don\'t like the default style, you can customer them by adding special attributes for \"<strong>yx-mobile-banner-container</strong>\" class to control mobile banner style and do similar changes to \"<strong>yx-desktop-banner-container</strong>\" class for your desktop banner.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"make-it-live\">Make it live</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>So far all good, if you and your customer both are satisfied with the changes. Congratulations! you have got a big success, last step so easy just click the publish button to make it live.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>publish a theme when you are editing it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":160,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/publish-a-theme-1024x52.png\" alt=\"publish a theme\" class=\"wp-image-160\"/><figcaption>publish a theme</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>publish a theme from theme list. <strong><em>Themes</em></strong> <em><strong>-&gt;Actions -&gt;Publish</strong></em>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":162,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/publish-a-theme-main-1024x373.png\" alt=\"publish a theme \" class=\"wp-image-162\"/><figcaption>publish a theme from theme list </figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Conclusions</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Now you have got a basic idea on how to implement showing different image banners for Desktop and mobile, you can make it better for your theme. We only use the free Debut theme as an example, actually, a different theme maybe needs a few changes to adapt to your environment. if you find it is very difficult for you to accomplish these, please do not hesitate to leave a message at the below comment area or <a href=\"https://www.mojoin.com/about-us/\">contact us</a>, we will try our best to help you out.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>TIPS</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Shopify has deprecated the sass supporting in the theme editor, for more details please visit <a href=\"https://www.shopify.com.au/partners/blog/deprecating-sass\" target=\"_blank\" rel=\"noreferrer noopener\">here</a> </p>\n<!-- /wp:paragraph -->','Show Different Shopify Banner Image on Desktop and Mobile','','inherit','closed','closed','','66-revision-v1','','','2021-06-30 22:33:19','2021-06-30 22:33:19','',66,'https://www.mojoin.com/?p=339',0,'revision','',0),(340,1,'2021-07-01 22:02:01','2021-07-01 22:02:01','<!-- wp:paragraph -->\n<p>How to make a Shopify ‘add to cart’ link</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>in liquid file we can get product first variant and id example:<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"{{ product.url | within: collection }}\">ADD TO CART</a><br>{% endcomment %}<br>{% assign added_to_cart_link = \'/cart/add?id=\' | append:product.first_available_variant.id | append: \'&amp;quantity=1\' %}<br><a href=\"{{ added_to_cart_link }}\">ADD TO CART</a><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://apps.shopify.com/hypervisual\">Hypervisual</a>&nbsp;has powerful tools to embed your products with variant selectors and an add to cart button. But sometimes you want to create a link which adds a product (or products!) to your cart without the product image, product name or variant selector. Here\'s how to do it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you have Hypervisual installed, open your product page in your store, and add ?LIST_VARIANTS to the end of the URL, for example:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://www.your-store.com/products/amazing?LIST_VARIANTS\">https://www.your-store.com/products/amazing?LIST_VARIANTS</a><br><br>When you visit that page you\'ll get a list of all of your product variants, the add to cart URLs and the direct to checkout URLs.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>(If this doesn\'t work, and your product page URL already has question mark in it, try &amp;LIST_VARIANTS instead.)<br><br>If you don\'t have Hypervisual installed, things get trickier. You need to construct the link manually like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https://www.your-store.com/cart/add?id=12345\"} -->\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps://www.your-store.com/cart/add?id=12345\n</div></figure>\n<!-- /wp:embed -->\n\n<!-- wp:paragraph -->\n<p>and replace&nbsp;<strong>12345</strong>&nbsp;with your variant ID. To find the variant ID, the easiest way is to open the product inside your Shopify admin, click \'Edit\' next to the particular variant you want to have added to the basket, then pick the variant ID up from the URL that\'s then inside your browser address bar: it\'s the very last number at the end of the web address.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>To learn how to make direct-to-checkout links without Hypervisual installed, read this Shopify help article:&nbsp;<a href=\"https://help.shopify.com/themes/customization/cart/use-permalinks-to-preload-cart\">Use permalinks to pre-load the cart</a>.</p>\n<!-- /wp:paragraph -->','Quick Add to Cart button on Collection Product for Debut theme home','','inherit','closed','closed','','311-revision-v1','','','2021-07-01 22:02:01','2021-07-01 22:02:01','',311,'https://www.mojoin.com/?p=340',0,'revision','',0),(341,1,'2021-07-01 22:20:45','2021-07-01 22:20:45','<!-- wp:paragraph -->\n<p>When you install Shopify free Debut theme, on home page there is a featured collection. when you select your favourite product collection to show them, you will find there is no [Add to Cart] quick buy button, so from user experience point of view, it will be better if you can add a quick to buy button and will have more chance to make people to buy you product and user does not need to do another step to click the product go to product page then add to cart from there. You know every time when you need user to do one more step you will get more chance to lose your client.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So today I will show you how to add a [Add to Cart] quick link or button on the collection product especially on the home page and all the collection pages step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p> Firstly we should know how the Shopify [Add to Cart] link looks like and how it works. Actually Shopify [Add to Cart] link like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>[ <strong>Shopify URL</strong> ] + \'/cart/add?id=\' + [<strong>product_variant_id</strong>] + \'&amp;quantity=\' + [<strong>product_quantity</strong>]</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><br>[Shopify URL]: is your Shopify store URL, for example, https://www.mojoin.com<br>[product_variant_id]: is your product variant id, if you don\'t know how to get the product variant id, please have a look at this article.  <br>[product_quantity]: is the number how many products you want to add to the cart for the user, default it is 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finish fully example will be like :<br>https://www.mojoin.com/cart/add?id=2423498823478&amp;quantity=1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Ok, now you have known how to make up [Add to Cart] link, let\'s move to the next step to add this link to the collection product </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"{{ product.url | within: collection }}\">ADD TO CART</a><br>{% endcomment %}<br>{% assign added_to_cart_link = \'/cart/add?id=\' | append:product.first_available_variant.id | append: \'&amp;quantity=1\' %}<br><a href=\"{{ added_to_cart_link }}\">ADD TO CART</a><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://apps.shopify.com/hypervisual\">Hypervisual</a>&nbsp;has powerful tools to embed your products with variant selectors and an add to cart button. But sometimes you want to create a link which adds a product (or products!) to your cart without the product image, product name or variant selector. Here\'s how to do it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you have Hypervisual installed, open your product page in your store, and add ?LIST_VARIANTS to the end of the URL, for example:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://www.your-store.com/products/amazing?LIST_VARIANTS\">https://www.your-store.com/products/amazing?LIST_VARIANTS</a><br><br>When you visit that page you\'ll get a list of all of your product variants, the add to cart URLs and the direct to checkout URLs.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>(If this doesn\'t work, and your product page URL already has question mark in it, try &amp;LIST_VARIANTS instead.)<br><br>If you don\'t have Hypervisual installed, things get trickier. You need to construct the link manually like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https://www.your-store.com/cart/add?id=12345\"} -->\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps://www.your-store.com/cart/add?id=12345\n</div></figure>\n<!-- /wp:embed -->\n\n<!-- wp:paragraph -->\n<p>and replace&nbsp;<strong>12345</strong>&nbsp;with your variant ID. To find the variant ID, the easiest way is to open the product inside your Shopify admin, click \'Edit\' next to the particular variant you want to have added to the basket, then pick the variant ID up from the URL that\'s then inside your browser address bar: it\'s the very last number at the end of the web address.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>To learn how to make direct-to-checkout links without Hypervisual installed, read this Shopify help article:&nbsp;<a href=\"https://help.shopify.com/themes/customization/cart/use-permalinks-to-preload-cart\">Use permalinks to pre-load the cart</a>.</p>\n<!-- /wp:paragraph -->','Quick Add to Cart button on Collection Product for Debut theme home','','inherit','closed','closed','','311-revision-v1','','','2021-07-01 22:20:45','2021-07-01 22:20:45','',311,'https://www.mojoin.com/?p=341',0,'revision','',0),(342,1,'2021-07-01 22:22:44','2021-07-01 22:22:44','<!-- wp:paragraph -->\n<p>When you install Shopify free Debut theme, on home page there is a featured collection. when you select your favourite product collection to show them, you will find there is no [Add to Cart] quick buy button, so from user experience point of view, it will be better if you can add a quick to buy button and will have more chance to make people to buy you product and user does not need to do another step to click the product go to product page then add to cart from there. You know every time when you need user to do one more step you will get more chance to lose your client.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So today I will show you how to add a [Add to Cart] quick link or button on the collection product especially on the home page and all the collection pages step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p> Firstly we should know how the Shopify [Add to Cart] link looks like and how it works. Actually, Shopify [Add to Cart] link looks like the following:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>[ <strong>Store Domain</strong> ] + \'/cart/add?id=\' + [<strong>product_variant_id</strong>] + \'&amp;quantity=\' + [<strong>product_quantity</strong>]</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><br>[Store Domain]: is your Shopify store URL, for example, https://www.mojoin.com.<br>[product_variant_id]: is your product variant id, if you don\'t know how to get the product variant id, please have a look at this article.  <br>[product_quantity]: is the number how many products you want to add to the cart for the user, default it is 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finish fully example will be like :<br>https://www.mojoin.com/cart/add?id=2423498823478&amp;quantity=1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Ok, now you have known how to make up [Add to Cart] link, let\'s move to the next step to add this link to the collection product </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"{{ product.url | within: collection }}\">ADD TO CART</a><br>{% endcomment %}<br>{% assign added_to_cart_link = \'/cart/add?id=\' | append:product.first_available_variant.id | append: \'&amp;quantity=1\' %}<br><a href=\"{{ added_to_cart_link }}\">ADD TO CART</a><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://apps.shopify.com/hypervisual\">Hypervisual</a>&nbsp;has powerful tools to embed your products with variant selectors and an add to cart button. But sometimes you want to create a link which adds a product (or products!) to your cart without the product image, product name or variant selector. Here\'s how to do it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you have Hypervisual installed, open your product page in your store, and add ?LIST_VARIANTS to the end of the URL, for example:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://www.your-store.com/products/amazing?LIST_VARIANTS\">https://www.your-store.com/products/amazing?LIST_VARIANTS</a><br><br>When you visit that page you\'ll get a list of all of your product variants, the add to cart URLs and the direct to checkout URLs.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>(If this doesn\'t work, and your product page URL already has question mark in it, try &amp;LIST_VARIANTS instead.)<br><br>If you don\'t have Hypervisual installed, things get trickier. You need to construct the link manually like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https://www.your-store.com/cart/add?id=12345\"} -->\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps://www.your-store.com/cart/add?id=12345\n</div></figure>\n<!-- /wp:embed -->\n\n<!-- wp:paragraph -->\n<p>and replace&nbsp;<strong>12345</strong>&nbsp;with your variant ID. To find the variant ID, the easiest way is to open the product inside your Shopify admin, click \'Edit\' next to the particular variant you want to have added to the basket, then pick the variant ID up from the URL that\'s then inside your browser address bar: it\'s the very last number at the end of the web address.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>To learn how to make direct-to-checkout links without Hypervisual installed, read this Shopify help article:&nbsp;<a href=\"https://help.shopify.com/themes/customization/cart/use-permalinks-to-preload-cart\">Use permalinks to pre-load the cart</a>.</p>\n<!-- /wp:paragraph -->','Quick Add to Cart button on Collection Product for Debut theme home','','inherit','closed','closed','','311-revision-v1','','','2021-07-01 22:22:44','2021-07-01 22:22:44','',311,'https://www.mojoin.com/?p=342',0,'revision','',0),(343,1,'2021-07-01 22:23:29','2021-07-01 22:23:29','<!-- wp:paragraph -->\n<p>When you install Shopify free Debut theme, on home page there is a featured collection. when you select your favourite product collection to show them, you will find there is no [Add to Cart] quick buy button, so from user experience point of view, it will be better if you can add a quick to buy button and will have more chance to make people to buy you product and user does not need to do another step to click the product go to product page then add to cart from there. You know every time when you need user to do one more step you will get more chance to lose your client.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So today I will show you how to add a [Add to Cart] quick link or button on the collection product especially on the home page and all the collection pages step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p> Firstly we should know how the Shopify [Add to Cart] link looks like and how it works. Actually, Shopify [Add to Cart] link looks like the following:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>[ <strong>Store Domain</strong> ] + \'/cart/add?id=\' + [<strong>product_variant_id</strong>] + \'&amp;quantity=\' + [<strong>product_quantity</strong>]</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><br>[Store Domain]: is your Shopify store URL, for example, https://www.mojoin.com.<br>[product_variant_id]: is your product variant id, if you don\'t know how to get the product variant id, please have a look at this article.  <br>[product_quantity]: is the number how many products you want to add to the cart for the user, default it is 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finish fully example will be like :<br>https://www.mojoin.com/cart/add?id=2423498823478&amp;quantity=1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Ok, now you have known how to make up the [Add to Cart] link, let\'s move to the next step to add this link to the collection product.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"{{ product.url | within: collection }}\">ADD TO CART</a><br>{% endcomment %}<br>{% assign added_to_cart_link = \'/cart/add?id=\' | append:product.first_available_variant.id | append: \'&amp;quantity=1\' %}<br><a href=\"{{ added_to_cart_link }}\">ADD TO CART</a><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://apps.shopify.com/hypervisual\">Hypervisual</a>&nbsp;has powerful tools to embed your products with variant selectors and an add to cart button. But sometimes you want to create a link which adds a product (or products!) to your cart without the product image, product name or variant selector. Here\'s how to do it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you have Hypervisual installed, open your product page in your store, and add ?LIST_VARIANTS to the end of the URL, for example:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://www.your-store.com/products/amazing?LIST_VARIANTS\">https://www.your-store.com/products/amazing?LIST_VARIANTS</a><br><br>When you visit that page you\'ll get a list of all of your product variants, the add to cart URLs and the direct to checkout URLs.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>(If this doesn\'t work, and your product page URL already has question mark in it, try &amp;LIST_VARIANTS instead.)<br><br>If you don\'t have Hypervisual installed, things get trickier. You need to construct the link manually like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https://www.your-store.com/cart/add?id=12345\"} -->\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps://www.your-store.com/cart/add?id=12345\n</div></figure>\n<!-- /wp:embed -->\n\n<!-- wp:paragraph -->\n<p>and replace&nbsp;<strong>12345</strong>&nbsp;with your variant ID. To find the variant ID, the easiest way is to open the product inside your Shopify admin, click \'Edit\' next to the particular variant you want to have added to the basket, then pick the variant ID up from the URL that\'s then inside your browser address bar: it\'s the very last number at the end of the web address.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>To learn how to make direct-to-checkout links without Hypervisual installed, read this Shopify help article:&nbsp;<a href=\"https://help.shopify.com/themes/customization/cart/use-permalinks-to-preload-cart\">Use permalinks to pre-load the cart</a>.</p>\n<!-- /wp:paragraph -->','Quick Add to Cart button on Collection Product for Debut theme home','','inherit','closed','closed','','311-revision-v1','','','2021-07-01 22:23:29','2021-07-01 22:23:29','',311,'https://www.mojoin.com/?p=343',0,'revision','',0),(344,1,'2021-07-01 22:24:54','2021-07-01 22:24:54','<!-- wp:paragraph -->\n<p>When you install Shopify free Debut theme, on home page there is a featured collection. when you select your favourite product collection to show them, you will find there is no [Add to Cart] quick buy button, so from user experience point of view, it will be better if you can add a quick to buy button and will have more chance to make people to buy you product and user does not need to do another step to click the product go to product page then add to cart from there. You know every time when you need user to do one more step you will get more chance to lose your client.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So today I will show you how to add a [Add to Cart] quick link or button on the collection product especially on the home page and all the collection pages step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p> Firstly we should know how the Shopify [Add to Cart] link looks like and how it works. Actually, Shopify [Add to Cart] link looks like the following:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>[ <strong>Store Domain</strong> ] + \'/cart/add?id=\' + [<strong>product_variant_id</strong>] + \'&amp;quantity=\' + [<strong>product_quantity</strong>]</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><br>[Store Domain]: is your Shopify store URL, for example, https://www.mojoin.com.<br>[product_variant_id]: is your product variant id, if you don\'t know how to get the product variant id, please have a look at this article.  <br>[product_quantity]: is the number how many products you want to add to the cart for the user, default it is 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finish fully example will be like :<br>https://www.mojoin.com/cart/add?id=2423498823478&amp;quantity=1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Ok, now you have known how to construct the [Add to Cart] link, let\'s move to the next step to add this link to the collection product.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>To learn how to make direct-to-checkout links without Hypervisual installed, read this Shopify help article:&nbsp;<a href=\"https://help.shopify.com/themes/customization/cart/use-permalinks-to-preload-cart\">Use permalinks to pre-load the cart</a>.</p>\n<!-- /wp:paragraph -->','Quick Add to Cart button on Collection Product for Debut theme home','','inherit','closed','closed','','311-revision-v1','','','2021-07-01 22:24:54','2021-07-01 22:24:54','',311,'https://www.mojoin.com/?p=344',0,'revision','',0),(345,1,'2021-07-02 00:10:05','2021-07-02 00:10:05','<!-- wp:paragraph -->\n<p>When you install Shopify free Debut theme, on the home page there is a featured collection. when you select your favorite product collection to show them, you will find there is no [Add to Cart] quick buy button, so from a user experience point of view, it will be better if you can add a quick to buy button and will have more chance to make people buy your product directly and the user does not need to do another step to click the product go to product page then add to cart from there. You know every time when you need a user to do one more step you will get more chance to lose your customer.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So today I will show you how to add a [Add to Cart] quick link or button on the collection product especially on the home page and all the collection pages step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Construct Add to Cart Link </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Firstly we should know how the Shopify [Add to Cart] link looks like and how it works. Actually, Shopify [Add to Cart] link looks like the following:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>[ <strong>Store Domain</strong> ] + \'/cart/add?id=\' + [<strong>product_variant_id</strong>] + \'&amp;quantity=\' + [<strong>product_quantity</strong>]</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><br>[Store Domain]: is your Shopify store URL, for example, https://www.mojoin.com. sometimes we can ignore the store domain if you use this link in your store and with HTML &lt;a> tag.<br>[product_variant_id]: is your product variant id, if you don\'t know how to get the product variant id, please have a look at this article.  <br>[product_quantity]: is the number how many products you want to add to the cart for the user, default it is 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finish fully example will be like :<br>https://www.mojoin.com/cart/add?id=2423498823478&amp;quantity=1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Add Link to Collection Product</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Ok, now you have known how to construct the [Add to Cart] link, let\'s move to the next step to add this link to the collection product.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>To learn how to make direct-to-checkout links without Hypervisual installed, read this Shopify help article:&nbsp;<a href=\"https://help.shopify.com/themes/customization/cart/use-permalinks-to-preload-cart\">Use permalinks to pre-load the cart</a>.</p>\n<!-- /wp:paragraph -->','Quick Add to Cart button on Collection Product for Debut theme home','','inherit','closed','closed','','311-revision-v1','','','2021-07-02 00:10:05','2021-07-02 00:10:05','',311,'https://www.mojoin.com/?p=345',0,'revision','',0),(346,1,'2021-07-02 00:10:55','2021-07-02 00:10:55','<!-- wp:paragraph -->\n<p>When you install Shopify free Debut theme, on the home page there is a featured collection. when you select your favorite product collection to show them, you will find there is no [Add to Cart] quick buy button, so from a user experience point of view, it will be better if you can add a quick to buy button and will have more chance to make people buy your product directly and the user does not need to do another step to click the product go to product page then add to cart from there. You know every time when you need a user to do one more step you will get more chance to lose your customer.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So today I will show you how to add a [Add to Cart] quick link or button on the collection product especially on the home page and all the collection pages step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Construct Add to Cart Link </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Firstly we should know how the Shopify [Add to Cart] link looks like and how it works. Actually, Shopify [Add to Cart] link looks like the following:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>[ <strong>Store Domain</strong> ] + \'/cart/add?id=\' + [<strong>product_variant_id</strong>] + \'&amp;quantity=\' + [<strong>product_quantity</strong>]</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><br>[Store Domain]: is your Shopify store URL, for example, https://www.mojoin.com. sometimes we can ignore the store domain if you use this link in your store and with HTML &lt;a> tag.<br>[product_variant_id]: is your product variant id, if you don\'t know how to get the product variant id, please have a look at this article.  <br>[product_quantity]: is the number how many products you want to add to the cart for the user, default it is 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finish fully example will be like :<br>https://www.mojoin.com/cart/add?id=2423498823478&amp;quantity=1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Add Link to Collection Product</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Ok, now you have known how to construct the [Add to Cart] link, let\'s move to the next step to add this link to the collection product.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>To learn how to make direct-to-checkout links without Hypervisual installed, read this Shopify help article:&nbsp;<a href=\"https://help.shopify.com/themes/customization/cart/use-permalinks-to-preload-cart\">Use permalinks to pre-load the cart</a>.</p>\n<!-- /wp:paragraph -->','Quick Add to Cart button on Collection Product for Debut theme Home and Collection','','inherit','closed','closed','','311-revision-v1','','','2021-07-02 00:10:55','2021-07-02 00:10:55','',311,'https://www.mojoin.com/?p=346',0,'revision','',0),(347,1,'2021-07-02 00:19:07','2021-07-02 00:19:07','<!-- wp:paragraph -->\n<p>When you install Shopify free Debut theme, on the home page there is a featured collection. when you select your favorite product collection to show them, you will find there is no [Add to Cart] quick buy button, so from a user experience point of view, it will be better if you can add a quick to buy button and will have more chance to make people buy your product directly and the user does not need to do another step to click the product go to product page then add to cart from there. You know every time when you need a user to do one more step you will get more chance to lose your customer.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So today I will show you how to add a [Add to Cart] quick link or button on the collection product especially on the home page and all the collection pages step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Construct Add to Cart Link </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Firstly we should know how the Shopify [Add to Cart] link looks like and how it works. Actually, Shopify [Add to Cart] link looks like the following:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>[ <strong>Store Domain</strong> ] + \'/cart/add?id=\' + [<strong>product_variant_id</strong>] + \'&amp;quantity=\' + [<strong>product_quantity</strong>]</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><br>[Store Domain]: is your Shopify store URL, for example, https://www.mojoin.com. sometimes we can ignore the store domain if you use this link in your store and with HTML &lt;a> tag.<br>[product_variant_id]: is your product variant id, if you don\'t know how to get the product variant id, please have a look at this article.  <br>[product_quantity]: is the number how many products you want to add to the cart for the user, default it is 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finish fully example will be like :<br>https://www.mojoin.com/cart/add?id=2423498823478&amp;quantity=1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Add Link to Collection Product</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Ok, now you have known how to construct the [Add to Cart] link, let\'s move to the next step to add this link to the collection product.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Login your Shopify store backend edit your Debut theme code, then locate:<br>Sections -> collection-template.liquid -> line 143<br>or search for \'product-card-grid\'.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>then copy the following codes after that line.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% assign added_to_cart_link = \'/cart/add?id=\' | append:product.first_available_variant.id | append: \'&amp;amp;quantity=1\' %}\n&lt;a href=\"{{ added_to_cart_link }}\">&lt;button>ADD TO CART&lt;/button>&lt;/a>\n    </pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>To learn how to make direct-to-checkout links without Hypervisual installed, read this Shopify help article:&nbsp;<a href=\"https://help.shopify.com/themes/customization/cart/use-permalinks-to-preload-cart\">Use permalinks to pre-load the cart</a>.</p>\n<!-- /wp:paragraph -->','Quick Add to Cart button on Collection Product for Debut theme Home and Collection','','inherit','closed','closed','','311-revision-v1','','','2021-07-02 00:19:07','2021-07-02 00:19:07','',311,'https://www.mojoin.com/?p=347',0,'revision','',0),(348,1,'2021-07-02 00:20:31','2021-07-02 00:20:31','','add-tocart-code','','inherit','open','closed','','add-tocart-code','','','2021-07-02 00:20:31','2021-07-02 00:20:31','',311,'https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-code.png',0,'attachment','image/png',0),(349,1,'2021-07-02 00:20:39','2021-07-02 00:20:39','<!-- wp:paragraph -->\n<p>When you install Shopify free Debut theme, on the home page there is a featured collection. when you select your favorite product collection to show them, you will find there is no [Add to Cart] quick buy button, so from a user experience point of view, it will be better if you can add a quick to buy button and will have more chance to make people buy your product directly and the user does not need to do another step to click the product go to product page then add to cart from there. You know every time when you need a user to do one more step you will get more chance to lose your customer.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So today I will show you how to add a [Add to Cart] quick link or button on the collection product especially on the home page and all the collection pages step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Construct Add to Cart Link </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Firstly we should know how the Shopify [Add to Cart] link looks like and how it works. Actually, Shopify [Add to Cart] link looks like the following:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>[ <strong>Store Domain</strong> ] + \'/cart/add?id=\' + [<strong>product_variant_id</strong>] + \'&amp;quantity=\' + [<strong>product_quantity</strong>]</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><br>[Store Domain]: is your Shopify store URL, for example, https://www.mojoin.com. sometimes we can ignore the store domain if you use this link in your store and with HTML &lt;a> tag.<br>[product_variant_id]: is your product variant id, if you don\'t know how to get the product variant id, please have a look at this article.  <br>[product_quantity]: is the number how many products you want to add to the cart for the user, default it is 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finish fully example will be like :<br>https://www.mojoin.com/cart/add?id=2423498823478&amp;quantity=1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Add Link to Collection Product</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Ok, now you have known how to construct the [Add to Cart] link, let\'s move to the next step to add this link to the collection product.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Login your Shopify store backend edit your Debut theme code, then locate:<br>Sections -> collection-template.liquid -> line 143<br>or search for \'product-card-grid\'.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>then copy the following codes after that line.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% assign added_to_cart_link = \'/cart/add?id=\' | append:product.first_available_variant.id | append: \'&amp;amp;quantity=1\' %}\n&lt;a href=\"{{ added_to_cart_link }}\">&lt;button>ADD TO CART&lt;/button>&lt;/a>\n    </pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>when you finished, your file will looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":348,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-code-1024x379.png\" alt=\"\" class=\"wp-image-348\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>To learn how to make direct-to-checkout links without Hypervisual installed, read this Shopify help article: <a href=\"https://help.shopify.com/themes/customization/cart/use-permalinks-to-preload-cart\">Use permalinks to pre-load the cart</a>.</p>\n<!-- /wp:paragraph -->','Quick Add to Cart button on Collection Product for Debut theme Home and Collection','','inherit','closed','closed','','311-revision-v1','','','2021-07-02 00:20:39','2021-07-02 00:20:39','',311,'https://www.mojoin.com/?p=349',0,'revision','',0),(350,1,'2021-07-02 00:34:03','2021-07-02 00:34:03','<!-- wp:paragraph -->\n<p>When you install Shopify free Debut theme, on the home page there is a featured collection. when you select your favorite product collection to show them, you will find there is no [Add to Cart] quick buy button, so from a user experience point of view, it will be better if you can add a quick to buy button and will have more chance to make people buy your product directly and the user does not need to do another step to click the product go to product page then add to cart from there. You know every time when you need a user to do one more step you will get more chance to lose your customer.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So today I will show you how to add a [Add to Cart] quick link or button on the collection product especially on the home page and all the collection pages step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Construct Add to Cart Link </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Firstly we should know how the Shopify [Add to Cart] link looks like and how it works. Actually, Shopify [Add to Cart] link looks like the following:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>[ <strong>Store Domain</strong> ] + \'/cart/add?id=\' + [<strong>product_variant_id</strong>] + \'&amp;quantity=\' + [<strong>product_quantity</strong>]</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><br>[Store Domain]: is your Shopify store URL, for example, https://www.mojoin.com. sometimes we can ignore the store domain if you use this link in your store and with HTML &lt;a> tag.<br>[product_variant_id]: is your product variant id, if you don\'t know how to get the product variant id, please have a look at this article.  <br>[product_quantity]: is the number how many products you want to add to the cart for the user, default it is 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finish fully example will be like :<br>https://www.mojoin.com/cart/add?id=2423498823478&amp;quantity=1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Add Link to Collection Product</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Ok, now you have known how to construct the [Add to Cart] link, let\'s move to the next step to add this link to the collection product.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Login your Shopify store backend edit your Debut theme code, then locate:<br>Sections -> collection-template.liquid -> line 143<br>or search for \'product-card-grid\'.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>then copy the following codes after that line.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% assign added_to_cart_link = \'/cart/add?id=\' | append:product.first_available_variant.id | append: \'&amp;amp;quantity=1\' %}\n&lt;a href=\"{{ added_to_cart_link }}\">&lt;button>ADD TO CART&lt;/button>&lt;/a>\n    </pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Line 1 : we make up Add to Cart link, here we use Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object</a>.  with the object\'s variable <em>first_available_variant </em>we can get our product variant ID. then we add the other quantity parameter with default value 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Line 2 : just add HTML &lt;a> tag with our constructed link. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finished, your file will looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":348,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-code-1024x379.png\" alt=\"\" class=\"wp-image-348\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>To learn how to make direct-to-checkout links without Hypervisual installed, read this Shopify help article: <a href=\"https://help.shopify.com/themes/customization/cart/use-permalinks-to-preload-cart\">Use permalinks to pre-load the cart</a>.</p>\n<!-- /wp:paragraph -->','Quick Add to Cart button on Collection Product for Debut theme Home and Collection','','inherit','closed','closed','','311-revision-v1','','','2021-07-02 00:34:03','2021-07-02 00:34:03','',311,'https://www.mojoin.com/?p=350',0,'revision','',0),(351,1,'2021-07-02 00:44:09','2021-07-02 00:44:09','','add-tocart-cpage','','inherit','open','closed','','add-tocart-cpage','','','2021-07-02 00:44:09','2021-07-02 00:44:09','',311,'https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-cpage.png',0,'attachment','image/png',0),(352,1,'2021-07-02 00:44:16','2021-07-02 00:44:16','<!-- wp:paragraph -->\n<p>When you install Shopify free Debut theme, on the home page there is a featured collection. when you select your favorite product collection to show them, you will find there is no [Add to Cart] quick buy button, so from a user experience point of view, it will be better if you can add a quick to buy button and will have more chance to make people buy your product directly and the user does not need to do another step to click the product go to product page then add to cart from there. You know every time when you need a user to do one more step you will get more chance to lose your customer.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So today I will show you how to add a [Add to Cart] quick link or button on the collection product especially on the home page and all the collection pages step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Construct Add to Cart Link </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Firstly we should know how the Shopify [Add to Cart] link looks like and how it works. Actually, Shopify [Add to Cart] link looks like the following:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>[ <strong>Store Domain</strong> ] + \'/cart/add?id=\' + [<strong>product_variant_id</strong>] + \'&amp;quantity=\' + [<strong>product_quantity</strong>]</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><br>[Store Domain]: is your Shopify store URL, for example, https://www.mojoin.com. sometimes we can ignore the store domain if you use this link in your store and with HTML &lt;a> tag.<br>[product_variant_id]: is your product variant id, if you don\'t know how to get the product variant id, please have a look at this article.  <br>[product_quantity]: is the number how many products you want to add to the cart for the user, default it is 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finish fully example will be like :<br>https://www.mojoin.com/cart/add?id=2423498823478&amp;quantity=1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Add Link to Collection Product</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Ok, now you have known how to construct the [Add to Cart] link, let\'s move to the next step to add this link to the collection product.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Login your Shopify store backend edit your Debut theme code, then locate:<br>Sections -> collection-template.liquid -> line 143<br>or search for \'product-card-grid\'.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>then copy the following codes after that line.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% assign added_to_cart_link = \'/cart/add?id=\' | append:product.first_available_variant.id | append: \'&amp;amp;quantity=1\' %}\n&lt;a href=\"{{ added_to_cart_link }}\">&lt;button>ADD TO CART&lt;/button>&lt;/a>\n    </pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Line 1 : we make up Add to Cart link, here we use Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object</a>.  with the object\'s variable <em>first_available_variant </em>we can get our product variant ID. then we add the other quantity parameter with default value 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Line 2 : just add HTML &lt;a> tag with our constructed link. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finished, your file will looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":348,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-code-1024x379.png\" alt=\"\" class=\"wp-image-348\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now save the changed template file. Go to your browser type any your Shopify store collection page your page will looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":351,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-cpage.png\" alt=\"\" class=\"wp-image-351\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>To learn how to make direct-to-checkout links without Hypervisual installed, read this Shopify help article: <a href=\"https://help.shopify.com/themes/customization/cart/use-permalinks-to-preload-cart\">Use permalinks to pre-load the cart</a>.</p>\n<!-- /wp:paragraph -->','Quick Add to Cart button on Collection Product for Debut theme Home and Collection','','inherit','closed','closed','','311-revision-v1','','','2021-07-02 00:44:16','2021-07-02 00:44:16','',311,'https://www.mojoin.com/?p=352',0,'revision','',0),(353,1,'2021-07-02 00:47:31','2021-07-02 00:47:31','<!-- wp:paragraph -->\n<p>When you install Shopify free Debut theme, on the home page there is a featured collection. when you select your favorite product collection to show them, you will find there is no [Add to Cart] quick buy button, so from a user experience point of view, it will be better if you can add a quick to buy button and will have more chance to make people buy your product directly and the user does not need to do another step to click the product go to product page then add to cart from there. You know every time when you need a user to do one more step you will get more chance to lose your customer.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So today I will show you how to add a [Add to Cart] quick link or button on the collection product especially on the home page and all the collection pages step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Construct Add to Cart Link </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Firstly we should know how the Shopify [Add to Cart] link looks like and how it works. Actually, Shopify [Add to Cart] link looks like the following:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>[ <strong>Store Domain</strong> ] + \'/cart/add?id=\' + [<strong>product_variant_id</strong>] + \'&amp;quantity=\' + [<strong>product_quantity</strong>]</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><br>[Store Domain]: is your Shopify store URL, for example, https://www.mojoin.com. sometimes we can ignore the store domain if you use this link in your store and with HTML &lt;a> tag.<br>[product_variant_id]: is your product variant id, if you don\'t know how to get the product variant id, please have a look at this article.  <br>[product_quantity]: is the number how many products you want to add to the cart for the user, default it is 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finish fully example will be like :<br>https://www.mojoin.com/cart/add?id=2423498823478&amp;quantity=1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Add Link to Collection Product</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Ok, now you have known how to construct the [Add to Cart] link, let\'s move to the next step to add this link to the collection product.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Login your Shopify store backend edit your Debut theme code, then locate:<br>Sections -> collection-template.liquid -> line 143<br>or search for \'product-card-grid\'.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>then copy the following codes after that line.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% assign added_to_cart_link = \'/cart/add?id=\' | append:product.first_available_variant.id | append: \'&amp;amp;quantity=1\' %}\n&lt;a href=\"{{ added_to_cart_link }}\">&lt;button>ADD TO CART&lt;/button>&lt;/a>\n    </pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Line 1 : we make up Add to Cart link, here we use Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object</a>.  with the object\'s variable <em>first_available_variant </em>we can get our product variant ID. then we add the other quantity parameter with default value 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Line 2 : just add HTML &lt;a> tag with our constructed link. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finished, your file will looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":348,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-code-1024x379.png\" alt=\"\" class=\"wp-image-348\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now save the changed template file. Go to your browser type any your Shopify store collection page your page will looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":351,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-cpage.png\" alt=\"\" class=\"wp-image-351\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now click the [Add to Cart] button, your customer will be redirected to the Shopify cart page, then customer can quick check out from the cart.</p>\n<!-- /wp:paragraph -->','Quick Add to Cart button on Collection Product for Debut theme Home and Collection','','inherit','closed','closed','','311-revision-v1','','','2021-07-02 00:47:31','2021-07-02 00:47:31','',311,'https://www.mojoin.com/?p=353',0,'revision','',0),(354,1,'2021-07-02 00:56:47','2021-07-02 00:56:47','','quickadd-tocart-link-cpage','','inherit','open','closed','','quickadd-tocart-link-cpage','','','2021-07-02 00:56:47','2021-07-02 00:56:47','',311,'https://www.mojoin.com/wp-content/uploads/2021/07/quickadd-tocart-link-cpage.jpg',0,'attachment','image/jpeg',0),(355,1,'2021-07-02 00:59:14','2021-07-02 00:59:14','<!-- wp:paragraph -->\n<p>When you install Shopify free Debut theme, on the home page there is a featured collection. when you select your favorite product collection to show them, you will find there is no [Add to Cart] quick buy button, so from a user experience point of view, it will be better if you can add a quick to buy button and will have more chance to make people buy your product directly and the user does not need to do another step to click the product go to product page then add to cart from there. You know every time when you need a user to do one more step you will get more chance to lose your customer.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So today I will show you how to add a [Add to Cart] quick link or button on the collection product especially on the home page and all the collection pages step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Construct Add to Cart Link </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Firstly we should know how the Shopify [Add to Cart] link looks like and how it works. Actually, Shopify [Add to Cart] link looks like the following:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>[ <strong>Store Domain</strong> ] + \'/cart/add?id=\' + [<strong>product_variant_id</strong>] + \'&amp;quantity=\' + [<strong>product_quantity</strong>]</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><br>[Store Domain]: is your Shopify store URL, for example, https://www.mojoin.com. sometimes we can ignore the store domain if you use this link in your store and with HTML &lt;a> tag.<br>[product_variant_id]: is your product variant id.  <br>[product_quantity]: is the number how many products you want to add to the cart for the user, default it is 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finish fully example will be like :<br>https://www.mojoin.com/cart/add?id=2423498823478&amp;quantity=1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Add Link to Collection Product</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Ok, now you have known how to construct the [Add to Cart] link, let\'s move to the next step to add this link to the collection product.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Login your Shopify store backend edit your Debut theme code, then locate:<br>Sections -> collection-template.liquid -> line 143<br>or search for \'product-card-grid\'.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>then copy the following codes after that line.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% assign added_to_cart_link = \'/cart/add?id=\' | append:product.first_available_variant.id | append: \'&amp;amp;quantity=1\' %}\n&lt;a href=\"{{ added_to_cart_link }}\">&lt;button>ADD TO CART&lt;/button>&lt;/a>\n    </pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Line 1 : we make up Add to Cart link, here we use Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object</a>.  with the object\'s variable <em>first_available_variant </em>we can get our product variant ID. then we add the other quantity parameter with default value 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Line 2 : just add HTML &lt;a> tag with our constructed link. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finished, your file will looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":348,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-code-1024x379.png\" alt=\"\" class=\"wp-image-348\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now save the changed template file. Go to your browser type any your Shopify store collection page your page will looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":351,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-cpage.png\" alt=\"\" class=\"wp-image-351\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now click the [Add to Cart] button, your customer will be redirected to the Shopify cart page, then customer can quick check out from the cart.</p>\n<!-- /wp:paragraph -->','Quick Add to Cart button on Collection Product for Debut theme Home and Collection','','inherit','closed','closed','','311-revision-v1','','','2021-07-02 00:59:14','2021-07-02 00:59:14','',311,'https://www.mojoin.com/?p=355',0,'revision','',0),(357,1,'2021-07-04 03:13:29','2021-07-04 03:13:29','','add-tocart-colletion','','inherit','open','closed','','add-tocart-colletion','','','2021-07-04 03:13:29','2021-07-04 03:13:29','',311,'https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-colletion.png',0,'attachment','image/png',0),(358,1,'2021-07-04 03:15:13','2021-07-04 03:15:13','<!-- wp:paragraph -->\n<p>When you install Shopify free Debut theme, on the home page there is a featured collection. when you select your favorite product collection to show them, you will find there is no [Add to Cart] quick buy button, so from a user experience point of view, it will be better if you can add a quick to buy button and will have more chance to make people buy your product directly and the user does not need to do another step to click the product go to product page then add to cart from there. You know every time when you need a user to do one more step you will get more chance to lose your customer.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So today I will show you how to add a [Add to Cart] quick link or button on the collection product especially on the home page and all the collection pages step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Construct Add to Cart Link </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Firstly we should know how the Shopify [Add to Cart] link looks like and how it works. Actually, Shopify [Add to Cart] link looks like the following:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>[ <strong>Store Domain</strong> ] + \'/cart/add?id=\' + [<strong>product_variant_id</strong>] + \'&amp;quantity=\' + [<strong>product_quantity</strong>]</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><br>[Store Domain]: is your Shopify store URL, for example, https://www.mojoin.com. sometimes we can ignore the store domain if you use this link in your store and with HTML &lt;a&gt; tag.<br>[product_variant_id]: is your product variant id.  <br>[product_quantity]: is the number how many products you want to add to the cart for the user, default it is 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finish fully example will be like :<br>https://www.mojoin.com/cart/add?id=2423498823478&amp;quantity=1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Add Link to Collection Product</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Ok, now you have known how to construct the [Add to Cart] link, let\'s move to the next step to add this link to the collection product.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Login your Shopify store backend edit your Debut theme code, then locate:<br>Sections -&gt; collection-template.liquid -&gt; line 143<br>or search for \'product-card-grid\'.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>then copy the following codes after that line 143.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% assign added_to_cart_link = \'/cart/add?id=\' | append:product.first_available_variant.id | append: \'&amp;amp;quantity=1\' %}\n&lt;a href=\"{{ added_to_cart_link }}\">&lt;button>ADD TO CART&lt;/button>&lt;/a>\n    </pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Line 1 : we make up Add to Cart link, here we use Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object</a>.  with the object\'s variable <em>first_available_variant </em>we can get our product variant ID. then we add the other quantity parameter with default value 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Line 2 : just add HTML &lt;a&gt; tag with our constructed link. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finished, your file will looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":348,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-code-1024x379.png\" alt=\"\" class=\"wp-image-348\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now save the changed template file. Go to your browser type any your Shopify store collection page your page will looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":351,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-cpage.png\" alt=\"\" class=\"wp-image-351\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Add to Home Featured Collection Product</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Edit your Debut theme code, then locate:<br>Sections -> collection.liquid -> line 30<br>or search for \'product-card-grid\'.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Then copy the same above codes and insert after line 30.<br>Once you done, your codes will like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":357,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-colletion.png\" alt=\"\" class=\"wp-image-357\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now click the [Add to Cart] button from your home page featured collection products or from your product colletion page directly, your customer will be redirected to the Shopify cart page, then customer can quick check out from their cart.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Hopefully you can get more orders!</p>\n<!-- /wp:paragraph -->','Quick Add to Cart button on Collection Product for Debut theme Home and Collection','','inherit','closed','closed','','311-revision-v1','','','2021-07-04 03:15:13','2021-07-04 03:15:13','',311,'https://www.mojoin.com/?p=358',0,'revision','',0),(359,1,'2021-07-04 06:28:23','2021-07-04 06:28:23','<!-- wp:paragraph -->\n<p>In the Shopify Debut Theme </p>\n<!-- /wp:paragraph -->','How to show product variant under product title in the Debut theme','','inherit','closed','closed','','325-revision-v1','','','2021-07-04 06:28:23','2021-07-04 06:28:23','',325,'https://www.mojoin.com/?p=359',0,'revision','',0),(360,1,'2021-07-04 06:32:02','2021-07-04 06:32:02','<!-- wp:paragraph -->\n<p>In the Shopify Debut Theme, default there is no product variant shown up in the product collection product grid view which means if users want to see the product variants they need to a product detail page. It will take users one more step to get what they want, from a user experience point of view it is not an effective and good way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show product variant under product title in the Debut theme','','inherit','closed','closed','','325-revision-v1','','','2021-07-04 06:32:02','2021-07-04 06:32:02','',325,'https://www.mojoin.com/?p=360',0,'revision','',0),(361,1,'2021-07-04 06:33:50','2021-07-04 06:33:50','<!-- wp:paragraph -->\n<p>In the Shopify Debut Theme, default there is no product variant shown up in the product collection product grid view which means if users want to see the product variants they need to a product detail page. It will take users one more step to get what they want, from a user experience point of view it is not an effective and good way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Thanks for Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object </a>which we can use to get the product variants data, then we can show them at what every page we want.</p>\n<!-- /wp:paragraph -->','How to show product variant under product title in the Debut theme','','inherit','closed','closed','','325-revision-v1','','','2021-07-04 06:33:50','2021-07-04 06:33:50','',325,'https://www.mojoin.com/?p=361',0,'revision','',0);
INSERT INTO `wp_posts` VALUES (362,1,'2021-07-04 06:35:14','2021-07-04 06:35:14','<!-- wp:paragraph -->\n<p>In the Shopify Debut Theme, default there is no product variant shown up in the product collection product grid view which means if users want to see the product variants they need to a product detail page. It will take users one more step to get what they want, from a user experience point of view it is not an effective and good way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Thanks for the Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object </a>which we can use to get the product variants data, then we can show them on whatever page we want.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Lets take <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Shopfiy Debut Theme </a> as an example.</p>\n<!-- /wp:paragraph -->','How to show product variant under product title in the Debut theme','','inherit','closed','closed','','325-revision-v1','','','2021-07-04 06:35:14','2021-07-04 06:35:14','',325,'https://www.mojoin.com/?p=362',0,'revision','',0),(363,1,'2021-07-04 09:29:56','2021-07-04 09:29:56','<!-- wp:paragraph -->\n<p>In the Shopify Debut Theme, default there is no product variant shown up in the product collection product grid view which means if users want to see the product variants they need to a product detail page. It will take users one more step to get what they want, from a user experience point of view it is not an effective and good way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Thanks for the Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object </a>which we can use to get the product variants data, then we can show them on whatever page we want.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Lets take <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Shopfiy Debut Theme </a> as an example. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Edit Collection Template liquid file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Open collection template file at:<br>Edit Code -> Sections -> collection-template.liquid<br>Go to line 143( just for initial Debut Theme without any plugins installed and modifications) otherwise try to search for \"product-card-grid\"</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Then copy the following lines after that</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{%- if product.first_available_variant.title != \"Default Title\" -%}\n        &lt;select name=\"id\" class=\"single-option-selector single-option-selector-product-template product-form__input\">\n           {% for variant in product.variants %}\n           &lt;option value=\"{{ variant.id }}\" data-image=\"{{ variant.image | img_url : \'360x\' }}\"\n                   {%- if variant == current_variant %} selected=\"selected\" {%- endif -%}\n                   >\n             {{ variant.title }}  {%- if variant.available == false %} - {{ \'products.product.sold_out\' | t }}{% endif %}\n                      &lt;/option>\n           {% endfor %}        \n    	&lt;/select>\n        {%- endif -%}</pre>\n<!-- /wp:enlighter/codeblock -->','How to show product variant under product title in the Debut theme','','inherit','closed','closed','','325-revision-v1','','','2021-07-04 09:29:56','2021-07-04 09:29:56','',325,'https://www.mojoin.com/?p=363',0,'revision','',0),(364,1,'2021-07-04 09:35:11','2021-07-04 09:35:11','<!-- wp:paragraph -->\n<p>In the Shopify Debut Theme, default there is no product variant shown up in the product collection product grid view which means if users want to see the product variants they need to a product detail page. It will take users one more step to get what they want, from a user experience point of view it is not an effective and good way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Thanks for the Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object </a>which we can use to get the product variants data, then we can show them on whatever page we want.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Lets take <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Shopfiy Debut Theme </a> as an example. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Edit Collection Template liquid file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Open collection template file at:<br>Edit Code -> Sections -> collection-template.liquid<br>Go to line 143( just for initial Debut Theme without any plugins installed and modifications) otherwise try to search for \"product-card-grid\"</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Then copy the following lines after that</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{%- if product.first_available_variant.title != \"Default Title\" -%}\n        &lt;select name=\"id\" class=\"single-option-selector single-option-selector-product-template product-form__input\">\n           {% for variant in product.variants %}\n           &lt;option value=\"{{ variant.id }}\" data-image=\"{{ variant.image | img_url : \'360x\' }}\"\n                   {%- if variant == current_variant %} selected=\"selected\" {%- endif -%}\n                   >\n             {{ variant.title }}  {%- if variant.available == false %} - {{ \'products.product.sold_out\' | t }}{% endif %}\n                      &lt;/option>\n           {% endfor %}        \n    	&lt;/select>\n        {%- endif -%}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Line 1 : just ignore the product without any variants, in the Shopify backend even you do not set any variant it still need to create a default variant for the product in order to manage the inventory of the product, in this case Shopify default product variant\'s name will be set as  \'Default Title\'. so here we use IF statement check product first available variant\'s title to ignore them.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Line 2-10 : just show the product variants data with SELECT element.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show product variant under product title in the Debut theme','','inherit','closed','closed','','325-revision-v1','','','2021-07-04 09:35:11','2021-07-04 09:35:11','',325,'https://www.mojoin.com/?p=364',0,'revision','',0),(365,1,'2021-07-04 09:35:29','2021-07-04 09:35:29','<!-- wp:paragraph -->\n<p>In the Shopify Debut Theme, default there is no product variant shown up in the product collection product grid view which means if users want to see the product variants they need to a product detail page. It will take users one more step to get what they want, from a user experience point of view it is not an effective and good way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Thanks for the Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object </a>which we can use to get the product variants data, then we can show them on whatever page we want.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Lets take <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Shopfiy Debut Theme </a> as an example. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Edit Collection Template liquid file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Open collection template file at:<br>Edit Code -> Sections -> collection-template.liquid<br>Go to line 143( just for initial Debut Theme without any plugins installed and modifications) otherwise try to search for \"product-card-grid\"</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Then copy the following lines after that</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{%- if product.first_available_variant.title != \"Default Title\" -%}\n        &lt;select name=\"id\" class=\"single-option-selector single-option-selector-product-template product-form__input\">\n           {% for variant in product.variants %}\n           &lt;option value=\"{{ variant.id }}\" data-image=\"{{ variant.image | img_url : \'360x\' }}\"\n                   {%- if variant == current_variant %} selected=\"selected\" {%- endif -%}\n                   >\n             {{ variant.title }}  {%- if variant.available == false %} - {{ \'products.product.sold_out\' | t }}{% endif %}\n                      &lt;/option>\n           {% endfor %}        \n    	&lt;/select>\n        {%- endif -%}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 1 :</strong> just ignore the product without any variants, in the Shopify backend even you do not set any variant it still need to create a default variant for the product in order to manage the inventory of the product, in this case Shopify default product variant\'s name will be set as  \'Default Title\'. so here we use IF statement check product first available variant\'s title to ignore them.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 2-10 :</strong> just show the product variants data with SELECT element.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show product variant under product title in the Debut theme','','inherit','closed','closed','','325-revision-v1','','','2021-07-04 09:35:29','2021-07-04 09:35:29','',325,'https://www.mojoin.com/?p=365',0,'revision','',0),(366,1,'2021-07-04 09:38:02','2021-07-04 09:38:02','','show-pvariants-collection','','inherit','open','closed','','show-pvariants-collection','','','2021-07-04 09:38:02','2021-07-04 09:38:02','',325,'https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-collection.png',0,'attachment','image/png',0),(367,1,'2021-07-04 09:39:13','2021-07-04 09:39:13','<!-- wp:paragraph -->\n<p>In the Shopify Debut Theme, default there is no product variant shown up in the product collection product grid view which means if users want to see the product variants they need to a product detail page. It will take users one more step to get what they want, from a user experience point of view it is not an effective and good way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Thanks for the Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object </a>which we can use to get the product variants data, then we can show them on whatever page we want.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Lets take <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Shopfiy Debut Theme </a> as an example. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Edit Collection Template liquid file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Open collection template file at:<br>Edit Code -> Sections -> collection-template.liquid<br>Go to line 30( just for initial Debut Theme without any plugins installed and modifications) otherwise try to search for \"product-card-grid\"</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Then copy the following lines and paste just after that</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{%- if product.first_available_variant.title != \"Default Title\" -%}\n        &lt;select name=\"id\" class=\"single-option-selector single-option-selector-product-template product-form__input\">\n           {% for variant in product.variants %}\n           &lt;option value=\"{{ variant.id }}\" data-image=\"{{ variant.image | img_url : \'360x\' }}\"\n                   {%- if variant == current_variant %} selected=\"selected\" {%- endif -%}\n                   >\n             {{ variant.title }}  {%- if variant.available == false %} - {{ \'products.product.sold_out\' | t }}{% endif %}\n                      &lt;/option>\n           {% endfor %}        \n    	&lt;/select>\n        {%- endif -%}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 1 :</strong> just ignore the product without any variants, in the Shopify backend even you do not set any variant it still need to create a default variant for the product in order to manage the inventory of the product, in this case Shopify default product variant\'s name will be set as  \'Default Title\'. so here we use IF statement check product first available variant\'s title to ignore them.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 2-10 :</strong> just show the product variants data with SELECT element.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Once you done the above, your collection-template.liquid file will like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":366,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-collection-1024x410.png\" alt=\"\" class=\"wp-image-366\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show product variant under product title in the Debut theme','','inherit','closed','closed','','325-revision-v1','','','2021-07-04 09:39:13','2021-07-04 09:39:13','',325,'https://www.mojoin.com/?p=367',0,'revision','',0),(368,1,'2021-07-04 09:39:57','2021-07-04 09:39:57','<!-- wp:paragraph -->\n<p>In the Shopify Debut Theme, default there is no product variant shown up in the product collection product grid view which means if users want to see the product variants they need to a product detail page. It will take users one more step to get what they want, from a user experience point of view it is not an effective and good way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Thanks for the Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object </a>which we can use to get the product variants data, then we can show them on whatever page we want.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Lets take <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Shopfiy Debut Theme </a> as an example. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Edit Collection Template liquid file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Open collection template file at:<br>Edit Code -> Sections -> collection-template.liquid<br>Go to line 30( just for initial Debut Theme without any plugins installed and modifications) otherwise try to search for \"product-card-grid\"</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Then copy the following lines and paste just after that</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{%- if product.first_available_variant.title != \"Default Title\" -%}\n        &lt;select name=\"id\" class=\"single-option-selector single-option-selector-product-template product-form__input\">\n           {% for variant in product.variants %}\n           &lt;option value=\"{{ variant.id }}\" data-image=\"{{ variant.image | img_url : \'360x\' }}\"\n                   {%- if variant == current_variant %} selected=\"selected\" {%- endif -%}\n                   >\n             {{ variant.title }}  {%- if variant.available == false %} - {{ \'products.product.sold_out\' | t }}{% endif %}\n                      &lt;/option>\n           {% endfor %}        \n    	&lt;/select>\n        {%- endif -%}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 1 :</strong> just ignore the product without any variants, in the Shopify backend even you do not set any variant it still need to create a default variant for the product in order to manage the inventory of the product, in this case Shopify default product variant\'s name will be set as  \'Default Title\'. so here we use IF statement check product first available variant\'s title to ignore them.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 2-10 :</strong> just show the product variants data with SELECT element.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Once you done the above, your collection-template.liquid file will like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":366,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-collection-1024x410.png\" alt=\"\" class=\"wp-image-366\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Save you file, go to any product collection page you will see :</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show product variant under product title in the Debut theme','','inherit','closed','closed','','325-revision-v1','','','2021-07-04 09:39:57','2021-07-04 09:39:57','',325,'https://www.mojoin.com/?p=368',0,'revision','',0),(369,1,'2021-07-04 09:41:10','2021-07-04 09:41:10','<!-- wp:paragraph -->\n<p>In the Shopify Debut Theme, default there is no product variant shown up in the product collection product grid view which means if users want to see the product variants they need to a product detail page. It will take users one more step to get what they want, from a user experience point of view it is not an effective and good way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Thanks for the Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object </a>which we can use to get the product variants data, then we can show them on whatever page we want.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Lets take <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Shopfiy Debut Theme </a> as an example. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Edit Collection Template liquid file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Open collection template file at:<br><strong>Edit Code</strong> -> <strong>Sections</strong> -> <strong>collection-template.liquid</strong><br>Go to line 30( just for initial Debut Theme without any plugins installed and modifications) otherwise try to search for \"<strong>product-card-grid</strong>\"</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Then copy the following lines and paste just after that</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{%- if product.first_available_variant.title != \"Default Title\" -%}\n        &lt;select name=\"id\" class=\"single-option-selector single-option-selector-product-template product-form__input\">\n           {% for variant in product.variants %}\n           &lt;option value=\"{{ variant.id }}\" data-image=\"{{ variant.image | img_url : \'360x\' }}\"\n                   {%- if variant == current_variant %} selected=\"selected\" {%- endif -%}\n                   >\n             {{ variant.title }}  {%- if variant.available == false %} - {{ \'products.product.sold_out\' | t }}{% endif %}\n                      &lt;/option>\n           {% endfor %}        \n    	&lt;/select>\n        {%- endif -%}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 1 :</strong> just ignore the product without any variants, in the Shopify backend even you do not set any variant it still need to create a default variant for the product in order to manage the inventory of the product, in this case Shopify default product variant\'s name will be set as  \'Default Title\'. so here we use IF statement check product first available variant\'s title to ignore them.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 2-10 :</strong> just show the product variants data with SELECT element.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Once you done the above, your collection-template.liquid file will like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":366,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-collection-1024x410.png\" alt=\"\" class=\"wp-image-366\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Save you file, go to any product collection page you will see :</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show product variant under product title in the Debut theme','','inherit','closed','closed','','325-revision-v1','','','2021-07-04 09:41:10','2021-07-04 09:41:10','',325,'https://www.mojoin.com/?p=369',0,'revision','',0),(370,1,'2021-07-04 09:42:47','2021-07-04 09:42:47','<!-- wp:paragraph -->\n<p>In the Shopify Debut Theme, default there is no product variant shown up in the product collection product grid view which means if users want to see the product variants they need to a product detail page. It will take users one more step to get what they want, from a user experience point of view it is not an effective and good way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Thanks for the Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object </a>which we can use to get the product variants data, then we can show them on whatever page we want.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Lets take <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Shopfiy Debut Theme </a> as an example. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Edit Collection liquid file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Open collection template file at:<br><strong>Edit Code</strong> -> <strong>Sections</strong> -> <strong>collection.liquid</strong><br>Go to line 30( just for initial Debut Theme without any plugins installed and modifications) otherwise try to search for \"<strong>product-card-grid</strong>\"</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Then copy the following lines and paste just after that</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{%- if product.first_available_variant.title != \"Default Title\" -%}\n        &lt;select name=\"id\" class=\"single-option-selector single-option-selector-product-template product-form__input\">\n           {% for variant in product.variants %}\n           &lt;option value=\"{{ variant.id }}\" data-image=\"{{ variant.image | img_url : \'360x\' }}\"\n                   {%- if variant == current_variant %} selected=\"selected\" {%- endif -%}\n                   >\n             {{ variant.title }}  {%- if variant.available == false %} - {{ \'products.product.sold_out\' | t }}{% endif %}\n                      &lt;/option>\n           {% endfor %}        \n    	&lt;/select>\n        {%- endif -%}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 1 :</strong> just ignore the product without any variants, in the Shopify backend even you do not set any variant it still need to create a default variant for the product in order to manage the inventory of the product, in this case Shopify default product variant\'s name will be set as  \'Default Title\'. so here we use IF statement check product first available variant\'s title to ignore them.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 2-10 :</strong> just show the product variants data with SELECT element.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Once you done the above, your collection-template.liquid file will like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":366,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-collection-1024x410.png\" alt=\"\" class=\"wp-image-366\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Save you file, go to home page have a look at the featured collection products you will see :</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show product variant under product title in the Debut theme','','inherit','closed','closed','','325-revision-v1','','','2021-07-04 09:42:47','2021-07-04 09:42:47','',325,'https://www.mojoin.com/?p=370',0,'revision','',0),(371,1,'2021-07-04 09:44:31','2021-07-04 09:44:31','','show-pvariants-collection-list','','inherit','open','closed','','show-pvariants-collection-list','','','2021-07-04 09:44:31','2021-07-04 09:44:31','',325,'https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-collection-list.png',0,'attachment','image/png',0),(372,1,'2021-07-04 09:44:34','2021-07-04 09:44:34','<!-- wp:paragraph -->\n<p>In the Shopify Debut Theme, default there is no product variant shown up in the product collection product grid view which means if users want to see the product variants they need to a product detail page. It will take users one more step to get what they want, from a user experience point of view it is not an effective and good way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Thanks for the Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object </a>which we can use to get the product variants data, then we can show them on whatever page we want.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Lets take <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Shopfiy Debut Theme </a> as an example. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Edit Collection liquid file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Open collection template file at:<br><strong>Edit Code</strong> -> <strong>Sections</strong> -> <strong>collection.liquid</strong><br>Go to line 30( just for initial Debut Theme without any plugins installed and modifications) otherwise try to search for \"<strong>product-card-grid</strong>\"</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Then copy the following lines and paste just after that</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{%- if product.first_available_variant.title != \"Default Title\" -%}\n        &lt;select name=\"id\" class=\"single-option-selector single-option-selector-product-template product-form__input\">\n           {% for variant in product.variants %}\n           &lt;option value=\"{{ variant.id }}\" data-image=\"{{ variant.image | img_url : \'360x\' }}\"\n                   {%- if variant == current_variant %} selected=\"selected\" {%- endif -%}\n                   >\n             {{ variant.title }}  {%- if variant.available == false %} - {{ \'products.product.sold_out\' | t }}{% endif %}\n                      &lt;/option>\n           {% endfor %}        \n    	&lt;/select>\n        {%- endif -%}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 1 :</strong> just ignore the product without any variants, in the Shopify backend even you do not set any variant it still need to create a default variant for the product in order to manage the inventory of the product, in this case Shopify default product variant\'s name will be set as  \'Default Title\'. so here we use IF statement check product first available variant\'s title to ignore them.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 2-10 :</strong> just show the product variants data with SELECT element.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Once you done the above, your collection-template.liquid file will like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":366,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-collection-1024x410.png\" alt=\"\" class=\"wp-image-366\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Save you file, go to home page have a look at the featured collection products you will see :</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":371,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-collection-list.png\" alt=\"\" class=\"wp-image-371\"/></figure>\n<!-- /wp:image -->','How to show product variant under product title in the Debut theme','','inherit','closed','closed','','325-revision-v1','','','2021-07-04 09:44:34','2021-07-04 09:44:34','',325,'https://www.mojoin.com/?p=372',0,'revision','',0),(373,1,'2021-07-04 09:45:52','2021-07-04 09:45:52','<!-- wp:paragraph -->\n<p>In the Shopify Debut Theme, default there is no product variant shown up in the product collection product grid view which means if users want to see the product variants they need to a product detail page. It will take users one more step to get what they want, from a user experience point of view it is not an effective and good way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Thanks for the Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object </a>which we can use to get the product variants data, then we can show them on whatever page we want.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Lets take <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Shopfiy Debut Theme </a> as an example. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Edit Collection liquid file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Open collection template file at:<br><strong>Edit Code</strong> -> <strong>Sections</strong> -> <strong>collection.liquid</strong><br>Go to line 30( just for initial Debut Theme without any plugins installed and modifications) otherwise try to search for \"<strong>product-card-grid</strong>\"</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Then copy the following lines and paste just after that</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{%- if product.first_available_variant.title != \"Default Title\" -%}\n        &lt;select name=\"id\" class=\"single-option-selector single-option-selector-product-template product-form__input\">\n           {% for variant in product.variants %}\n           &lt;option value=\"{{ variant.id }}\" data-image=\"{{ variant.image | img_url : \'360x\' }}\"\n                   {%- if variant == current_variant %} selected=\"selected\" {%- endif -%}\n                   >\n             {{ variant.title }}  {%- if variant.available == false %} - {{ \'products.product.sold_out\' | t }}{% endif %}\n                      &lt;/option>\n           {% endfor %}        \n    	&lt;/select>\n        {%- endif -%}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 1 :</strong> just ignore the product without any variants, in the Shopify backend even you do not set any variant it still need to create a default variant for the product in order to manage the inventory of the product, in this case Shopify default product variant\'s name will be set as  \'Default Title\'. so here we use IF statement check product first available variant\'s title to ignore them.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 2-10 :</strong> just show the product variants data with SELECT element.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Once you done the above, your collection-template.liquid file will like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":366,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-collection-1024x410.png\" alt=\"\" class=\"wp-image-366\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Save the file, go to your store home page have a look at the featured collection products you will see :</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":371,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-collection-list.png\" alt=\"\" class=\"wp-image-371\"/></figure>\n<!-- /wp:image -->','How to show product variant under product title in the Debut theme','','inherit','closed','closed','','325-revision-v1','','','2021-07-04 09:45:52','2021-07-04 09:45:52','',325,'https://www.mojoin.com/?p=373',0,'revision','',0),(374,1,'2021-07-04 11:21:44','2021-07-04 11:21:44','','show-pvariants-pcollection-list','','inherit','open','closed','','show-pvariants-pcollection-list','','','2021-07-04 11:21:44','2021-07-04 11:21:44','',325,'https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-pcollection-list.png',0,'attachment','image/png',0),(375,1,'2021-07-04 11:28:17','2021-07-04 11:28:17','','show-pvariants-pcollection-list-2','','inherit','open','closed','','show-pvariants-pcollection-list-2','','','2021-07-04 11:28:17','2021-07-04 11:28:17','',325,'https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-pcollection-list-2.png',0,'attachment','image/png',0),(376,1,'2021-07-04 11:30:57','2021-07-04 11:30:57','<!-- wp:paragraph -->\n<p>In the Shopify Debut Theme, default there is no product variant shown up in the product collection product grid view which means if users want to see the product variants they need to a product detail page. It will take users one more step to get what they want, from a user experience point of view it is not an effective and good way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Thanks for the Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object </a>which we can use to get the product variants data, then we can show them on whatever page we want.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Lets take <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Shopfiy Debut Theme </a> as an example. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Edit Collection Liquid File</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Open collection file at:<br><strong>Edit Code</strong> -> <strong>Sections</strong> -> <strong>collection.liquid</strong><br>Go to line 30( just for initial Debut Theme without any plugins installed and modifications) otherwise try to search for \"<strong>product-card-grid</strong>\"</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Then copy the following lines and paste just after that</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{%- if product.first_available_variant.title != \"Default Title\" -%}\n        &lt;select name=\"id\" class=\"single-option-selector single-option-selector-product-template product-form__input\">\n           {% for variant in product.variants %}\n           &lt;option value=\"{{ variant.id }}\" data-image=\"{{ variant.image | img_url : \'360x\' }}\"\n                   {%- if variant == current_variant %} selected=\"selected\" {%- endif -%}\n                   >\n             {{ variant.title }}  {%- if variant.available == false %} - {{ \'products.product.sold_out\' | t }}{% endif %}\n                      &lt;/option>\n           {% endfor %}        \n    	&lt;/select>\n        {%- endif -%}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 1 :</strong> just ignore the product without any variants, in the Shopify backend even you do not set any variant it still need to create a default variant for the product in order to manage the inventory of the product, in this case Shopify default product variant\'s name will be set as  \'Default Title\'. so here we use IF statement check product first available variant\'s title to ignore them.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 2-10 :</strong> just show the product variants data with SELECT element.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Once you done the above, your collection-template.liquid file will like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":366,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-collection-1024x410.png\" alt=\"\" class=\"wp-image-366\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Save the file, go to your store home page have a look at the featured collection products you will see :</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":371,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-collection-list.png\" alt=\"\" class=\"wp-image-371\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Edito Collection Template Liquid File</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Open collection template file at:<br><strong>Edit Code</strong> -> <strong>Sections</strong> -> <strong>collection-template.liquid</strong><br>Go to line 143( just for initial Debut Theme without any plugins installed and modifications) otherwise try to search for \"<strong>product-card-grid</strong>\"</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Copy the above lines at just after that. Once you done your codes will like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":374,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-pcollection-list-1024x493.png\" alt=\"\" class=\"wp-image-374\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now your collection page looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":375,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-pcollection-list-2.png\" alt=\"\" class=\"wp-image-375\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>TIPS</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>You might want to add [Add to Cart] button or link to the product grid list as well, please refer to :<br><a href=\"https://www.mojoin.com/create-shopify-add-to-cart-link/\">Quick Add to Cart button on Collection Product for Debut theme Home and Collection</a></p>\n<!-- /wp:paragraph -->','How to show product variant under product title in the Debut theme','','inherit','closed','closed','','325-revision-v1','','','2021-07-04 11:30:57','2021-07-04 11:30:57','',325,'https://www.mojoin.com/?p=376',0,'revision','',0),(378,1,'2021-07-04 11:33:58','2021-07-04 11:33:58','<!-- wp:paragraph -->\n<p>When you install Shopify free Debut theme, on the home page there is a featured collection. when you select your favorite product collection to show them, you will find there is no [Add to Cart] quick buy button, so from a user experience point of view, it will be better if you can add a quick to buy button and will have more chance to make people buy your product directly and the user does not need to do another step to click the product go to product page then add to cart from there. You know every time when you need a user to do one more step you will get more chance to lose your customer.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So today I will show you how to add a [Add to Cart] quick link or button on the collection product especially on the home page and all the collection pages step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Construct Add to Cart Link </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Firstly we should know how the Shopify [Add to Cart] link looks like and how it works. Actually, Shopify [Add to Cart] link looks like the following:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>[ <strong>Store Domain</strong> ] + \'/cart/add?id=\' + [<strong>product_variant_id</strong>] + \'&amp;quantity=\' + [<strong>product_quantity</strong>]</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><br>[Store Domain]: is your Shopify store URL, for example, https://www.mojoin.com. sometimes we can ignore the store domain if you use this link in your store and with HTML &lt;a&gt; tag.<br>[product_variant_id]: is your product variant id.  <br>[product_quantity]: is the number how many products you want to add to the cart for the user, default it is 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finish fully example will be like :<br>https://www.mojoin.com/cart/add?id=2423498823478&amp;quantity=1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Add Link to Collection Product</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Ok, now you have known how to construct the [Add to Cart] link, let\'s move to the next step to add this link to the collection product.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Login your Shopify store backend edit your Debut theme code, then locate:<br>Sections -&gt; collection-template.liquid -&gt; line 143<br>or search for \'product-card-grid\'.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>then copy the following codes after that line 143.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% assign added_to_cart_link = \'/cart/add?id=\' | append:product.first_available_variant.id | append: \'&amp;amp;quantity=1\' %}\n&lt;a href=\"{{ added_to_cart_link }}\">&lt;button>ADD TO CART&lt;/button>&lt;/a>\n    </pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Line 1 : we make up Add to Cart link, here we use Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object</a>.  with the object\'s variable <em>first_available_variant </em>we can get our product variant ID. then we add the other quantity parameter with default value 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Line 2 : just add HTML &lt;a&gt; tag with our constructed link. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finished, your file will looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":348,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-code-1024x379.png\" alt=\"\" class=\"wp-image-348\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now save the changed template file. Go to your browser type any your Shopify store collection page your page will looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":351,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-cpage.png\" alt=\"\" class=\"wp-image-351\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Add to Home Featured Collection Product</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Edit your Debut theme code, then locate:<br>Sections -&gt; collection.liquid -&gt; line 30<br>or search for \'product-card-grid\'.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Then copy the same above codes and insert after line 30.<br>Once you done, your codes will like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":357,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-colletion.png\" alt=\"\" class=\"wp-image-357\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now click the [Add to Cart] button from your home page featured collection products or from your product colletion page directly, your customer will be redirected to the Shopify cart page, then customer can quick check out from their cart.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Hopefully you can get more orders!</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>TIPS</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>You might want to show product variant at the product grid list as well, please refer to:<br><a href=\"https://www.mojoin.com/show-product-variant-incolletion-shopify/\">How to show product variant under product title in the Debut theme</a></p>\n<!-- /wp:paragraph -->','Quick Add to Cart button on Collection Product for Debut theme Home and Collection','','inherit','closed','closed','','311-revision-v1','','','2021-07-04 11:33:58','2021-07-04 11:33:58','',311,'https://www.mojoin.com/?p=378',0,'revision','',0),(380,1,'2021-07-04 11:36:09','2021-07-04 11:36:09','<!-- wp:paragraph -->\n<p>When you install Shopify free Debut theme, on the home page there is a featured collection. when you select your favorite product collection to show them, you will find there is no [Add to Cart] quick buy button, so from a user experience point of view, it will be better if you can add a quick to buy button and will have more chance to make people buy your product directly and the user does not need to do another step to click the product go to product page then add to cart from there. You know every time when you need a user to do one more step you will get more chances to lose your customer.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So today I will show you how to add a [Add to Cart] quick link or button on the collection product especially on the home page and all the collection pages step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Construct Add to Cart Link </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Firstly we should know how the Shopify [Add to Cart] link looks like and how it works. Actually, Shopify [Add to Cart] link looks like the following:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>[ <strong>Store Domain</strong> ] + \'/cart/add?id=\' + [<strong>product_variant_id</strong>] + \'&amp;quantity=\' + [<strong>product_quantity</strong>]</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><br>[Store Domain]: is your Shopify store URL, for example, https://www.mojoin.com. sometimes we can ignore the store domain if you use this link in your store and with HTML &lt;a&gt; tag.<br>[product_variant_id]: is your product variant id.  <br>[product_quantity]: is the number how many products you want to add to the cart for the user, default it is 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finish fully example will be like :<br>https://www.mojoin.com/cart/add?id=2423498823478&amp;quantity=1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Add Link to Collection Product</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Ok, now you have known how to construct the [Add to Cart] link, let\'s move to the next step to add this link to the collection product.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Log in your Shopify store backend edit your Debut theme code, then locate:<br><strong>Sections</strong> -> <strong>collection-template.liquid </strong>-> <strong>line 143</strong><br>or search for \'<strong>product-card-grid</strong>\'.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>then copy the following codes after line 143.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% assign added_to_cart_link = \'/cart/add?id=\' | append:product.first_available_variant.id | append: \'&amp;amp;quantity=1\' %}\n&lt;a href=\"{{ added_to_cart_link }}\">&lt;button>ADD TO CART&lt;/button>&lt;/a>\n    </pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Line 1 : we make up Add to Cart link, here we use the Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object</a>.  with the object\'s variable <em>first_available_variant </em>we can get our product variant ID. then we add the other quantity parameter with default value 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Line 2 : just add HTML &lt;a&gt; tag with our constructed link. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finished, your file will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":348,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-code-1024x379.png\" alt=\"\" class=\"wp-image-348\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now save the changed template file. Go to your browser type any your Shopify store collection page your page will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":351,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-cpage.png\" alt=\"\" class=\"wp-image-351\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Add to Home Featured Collection Product</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Edit your Debut theme code, then locate:<br><strong>Sections </strong>-> <strong>collection.liquid</strong> -> <strong>line 30</strong><br>or search for \'<strong>product-card-grid</strong>\'.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Then copy the same above codes and insert them after line 30.<br>Once you have done, your codes will like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":357,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-colletion.png\" alt=\"\" class=\"wp-image-357\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now click the [Add to Cart] button from your home page featured collection products or from your product collection page directly, your customer will be redirected to the Shopify cart page, then customers can quickly check out from their cart.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Hopefully, you can get more orders!</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>TIPS</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>You might want to show product variants at the product grid list as well, please refer to:<br><a href=\"https://www.mojoin.com/show-product-variant-incolletion-shopify/\">How to show product variant under product title in the Debut theme</a></p>\n<!-- /wp:paragraph -->','Quick Add to Cart button on Collection Product for Debut theme Home and Collection','','inherit','closed','closed','','311-revision-v1','','','2021-07-04 11:36:09','2021-07-04 11:36:09','',311,'https://www.mojoin.com/?p=380',0,'revision','',0),(382,1,'2021-07-04 11:39:38','2021-07-04 11:39:38','<!-- wp:paragraph -->\n<p>In the Shopify Debut Theme, default there is no product variant shown up in the product collection product grid view which means if users want to see the product variants they need to a product detail page. It will take users one more step to get what they want, from a user experience point of view it is not an effective and good way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Thanks for the Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object </a>which we can use to get the product variants data, then we can show them on whatever page we want.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Lets take <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Shopfiy Debut Theme </a> as an example. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Edit Collection Liquid File</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Open collection file at:<br><strong>Edit Code</strong> -&gt; <strong>Sections</strong> -&gt; <strong>collection.liquid</strong><br>Go to line 30( just for initial Debut Theme without any plugins installed and modifications) otherwise try to search for \"<strong>product-card-grid</strong>\"</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Then copy the following lines and paste just after that</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{%- if product.first_available_variant.title != \"Default Title\" -%}\n        &lt;select name=\"id\" class=\"single-option-selector single-option-selector-product-template product-form__input\">\n           {% for variant in product.variants %}\n           &lt;option value=\"{{ variant.id }}\" data-image=\"{{ variant.image | img_url : \'360x\' }}\"\n                   {%- if variant == current_variant %} selected=\"selected\" {%- endif -%}\n                   >\n             {{ variant.title }}  {%- if variant.available == false %} - {{ \'products.product.sold_out\' | t }}{% endif %}\n                      &lt;/option>\n           {% endfor %}        \n    	&lt;/select>\n        {%- endif -%}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 1 :</strong> just ignore the product without any variants, in the Shopify backend even you do not set any variant it still need to create a default variant for the product in order to manage the inventory of the product, in this case Shopify default product variant\'s name will be set as  \'Default Title\'. so here we use IF statement check product first available variant\'s title to ignore them.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 2-10 :</strong> just show the product variants data with SELECT element.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Once you done the above, your collection-template.liquid file will like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":366,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-collection-1024x410.png\" alt=\"\" class=\"wp-image-366\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Save the file, go to your store home page have a look at the featured collection products you will see :</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":371,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-collection-list.png\" alt=\"\" class=\"wp-image-371\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Edito Collection Template Liquid File</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Open collection template file at:<br><strong>Edit Code</strong> -&gt; <strong>Sections</strong> -&gt; <strong>collection-template.liquid</strong><br>Go to line 143( just for initial Debut Theme without any plugins installed and modifications) otherwise try to search for \"<strong>product-card-grid</strong>\"</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Copy the above lines at just after that. Once you done your codes will like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":374,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-pcollection-list-1024x493.png\" alt=\"\" class=\"wp-image-374\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now your collection page looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":375,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-pcollection-list-2.png\" alt=\"\" class=\"wp-image-375\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>TIPS</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>You might want to add [Add to Cart] button or link to the product grid list as well, please refer to :<br><a href=\"https://www.mojoin.com/create-shopify-add-to-cart-link/\">Quick Add to Cart button on Collection Product for Debut theme Home and Collection</a></p>\n<!-- /wp:paragraph -->','How to show product variant under product title in the Debut theme','','inherit','closed','closed','','325-revision-v1','','','2021-07-04 11:39:38','2021-07-04 11:39:38','',325,'https://www.mojoin.com/?p=382',0,'revision','',0),(383,1,'2021-07-04 11:40:35','2021-07-04 11:40:35','<!-- wp:paragraph -->\n<p>When you install Shopify free Debut theme, on the home page there is a featured collection. when you select your favorite product collection to show them, you will find there is no [Add to Cart] quick buy button, so from a user experience point of view, it will be better if you can add a quick to buy button and will have more chance to make people buy your product directly and the user does not need to do another step to click the product go to product page then add to cart from there. You know every time when you need a user to do one more step you will get more chances to lose your customer.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So today I will show you how to add a [Add to Cart] quick link or button on the collection product especially on the home page and all the collection pages step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Construct Add to Cart Link </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Firstly we should know how the Shopify [Add to Cart] link looks like and how it works. Actually, Shopify [Add to Cart] link looks like the following:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>[ <strong>Store Domain</strong> ] + \'/cart/add?id=\' + [<strong>product_variant_id</strong>] + \'&amp;quantity=\' + [<strong>product_quantity</strong>]</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><br>[Store Domain]: is your Shopify store URL, for example, https://www.mojoin.com. sometimes we can ignore the store domain if you use this link in your store and with HTML &lt;a&gt; tag.<br>[product_variant_id]: is your product variant id.  <br>[product_quantity]: is the number how many products you want to add to the cart for the user, default it is 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finish fully example will be like :<br>https://www.mojoin.com/cart/add?id=2423498823478&amp;quantity=1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Add Link to Collection Product</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Ok, now you have known how to construct the [Add to Cart] link, let\'s move to the next step to add this link to the collection product.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Log in your Shopify store backend edit your Debut theme code, then locate:<br><strong>Sections</strong> -&gt; <strong>collection-template.liquid </strong>-&gt; <strong>line 143</strong><br>or search for \'<strong>product-card-grid</strong>\'.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>then copy the following codes after line 143.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% assign added_to_cart_link = \'/cart/add?id=\' | append:product.first_available_variant.id | append: \'&amp;amp;quantity=1\' %}\n&lt;a href=\"{{ added_to_cart_link }}\">&lt;button>ADD TO CART&lt;/button>&lt;/a>\n    </pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Line 1 : we make up Add to Cart link, here we use the Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object</a>.  with the object\'s variable <em>first_available_variant </em>we can get our product variant ID. then we add the other quantity parameter with default value 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Line 2 : just add HTML &lt;a&gt; tag with our constructed link. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finished, your file will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":348,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-code-1024x379.png\" alt=\"\" class=\"wp-image-348\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now save the changed template file. Go to your browser type any your Shopify store collection page your page will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":351,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-cpage.png\" alt=\"\" class=\"wp-image-351\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Add to Home Featured Collection Product</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Edit your Debut theme code, then locate:<br><strong>Sections </strong>-&gt; <strong>collection.liquid</strong> -&gt; <strong>line 30</strong><br>or search for \'<strong>product-card-grid</strong>\'.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Then copy the same above codes and insert them after line 30.<br>Once you have done, your codes will like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":357,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-colletion.png\" alt=\"\" class=\"wp-image-357\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now click the [Add to Cart] button from your home page featured collection products or from your product collection page directly, your customer will be redirected to the Shopify cart page, then customers can quickly check out from their cart.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Hopefully, you can get more orders!</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>TIPS</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>You might want to show product variants at the product grid list as well, please refer to:<br><a href=\"https://www.mojoin.com/show-product-variant-incolletion-shopify/\">How to show product variant under product title in the Debut theme</a></p>\n<!-- /wp:paragraph -->','Quick Add to Cart button on Collection Product for Debut theme Home and Collection','','inherit','closed','closed','','311-revision-v1','','','2021-07-04 11:40:35','2021-07-04 11:40:35','',311,'https://www.mojoin.com/?p=383',0,'revision','',0),(384,1,'2021-07-04 11:48:36','2021-07-04 11:48:36','','show-pv-atcollection-grid','','inherit','open','closed','','show-pv-atcollection-grid','','','2021-07-04 11:48:36','2021-07-04 11:48:36','',325,'https://www.mojoin.com/wp-content/uploads/2021/07/show-pv-atcollection-grid.jpg',0,'attachment','image/jpeg',0),(386,1,'2021-07-14 08:13:39','0000-00-00 00:00:00','<!-- wp:paragraph -->\n<p>is there away to add a shop button on the desktop image?</p>\n<!-- /wp:paragraph -->','Add shop button on desktop image  Debut theme','','draft','open','open','','','','','2021-07-14 08:13:39','2021-07-14 08:13:39','',0,'https://www.mojoin.com/?p=386',0,'post','',0),(387,1,'2021-07-14 08:13:31','2021-07-14 08:13:31','<!-- wp:paragraph -->\n<p>is there away to add a shop button on the desktop image?</p>\n<!-- /wp:paragraph -->','Add shop button on desktop image  Debut theme','','inherit','closed','closed','','386-revision-v1','','','2021-07-14 08:13:31','2021-07-14 08:13:31','',386,'https://www.mojoin.com/?p=387',0,'revision','',0),(390,1,'2021-07-16 05:17:16','2021-07-16 05:17:16','<!-- wp:image {\"align\":\"center\",\"id\":132,\"width\":768,\"height\":402,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/show-diff-pcmobile-banner-images-1024x536.jpg\" alt=\"different banner image for PC &amp; Mobile\" class=\"wp-image-132\" width=\"768\" height=\"402\"/><figcaption>different banner image for PC &amp; Mobile</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>In Shopify default <strong>Debut</strong> theme, there are sections called \"image with text\" and \"image with text overlay\". You can use them to put an image with text on your home page, but you can\'t set different images for Desktop or Mobile, so the reality is it is very difficult to make one image size to support both Desktop and Mobile and make them both looks perfect on two devices.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In order to solve the above problem, we need to customize the default theme, here we will use the Shopify Debut theme to show you how to implement this functionality, I will guide you through the whole process following the below steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong><a href=\"#define-our-section\">define your sections in the Shopify Debut theme</a></strong></li><li><strong><a href=\"#add-image-to-section\" title=\"#add-image-to-section\">add image set in the section</a></strong></li><li><strong><a href=\"#add-css-style\">put our CSS code into the theme</a></strong></li><li><strong><a href=\"#debug-and-test\" title=\"#debug-and-test\">debug and test</a></strong></li><li><strong><a href=\"#make-it-live\" title=\"#make-it-live\">publish the theme</a></strong></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"define-our-section\">Define your own sections </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>login to your store backend,select your theme to edit code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":137,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/edit-them-code.png\" alt=\"edit theme code\" class=\"wp-image-137\"/><figcaption>edit theme code</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Add new section called \"yx-desktop-banner\",then your can see a liquid file called yx-desktop-banner.liquid will be added in your sections directory.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":139,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/add-new-section-2-theme.png\" alt=\"add new section\" class=\"wp-image-139\"/><figcaption>add new section</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Repeat above step to create the other section named as \"yx-mobile-banner\".</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"add-image-to-section\">Add Image Picker to the section</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Click the above created yx-desktop-banner.liquid file to edit it. Delete all the default codes in the file, replace them with the below lines:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"page-width yx-desktop-banner-container yx-mobile-hidden\">\n &lt;div class=\"container-full\">\n   {% for block in section.blocks limit: 1 %}\n	&lt;img class=\"img-responsive lazyload\"  data-src=\"{{ block.settings.yx_image_picker | img_url: \'2000x\' }}\" />\n   {% endfor %}\n&lt;/div>\n&lt;/div>\n{% schema %}\n  {\n    \"name\": \"YX Desktop Banner\",\n    \"class\": \"yx-desktop-banner-section\",\n    \"max_blocks\": 1,\n    \"blocks\": [\n    {\n      \"type\": \"image_picker\",\n      \"name\": \"Desktop Banner Image\",\n      \"settings\": [\n        {\n          \"label\": \"Desktop Banner Image\",\n          \"id\": \"yx_image_picker\",\n          \"type\": \"image_picker\"\n        }\n      ]\n    }\n  ],\n \"presets\": [\n    {\n      \"name\": \"YX Desktop Banner\",\n      \"category\": \"Home\",\n\"blocks\":[{\"type\" : \"image_picker\"}]\n    }\n]\n  }\n{% endschema %}\n{% stylesheet %}\n{% endstylesheet %}\n{% javascript %}\n{% endjavascript %}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>You can get the above file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/yx-desktop-banner.liquid\">GitHub</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Save it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Replaced yx-mobile-banner.liquid file content with the following lines:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"page-width yx-mobile-banner-container yx-desktop-hidden\">\n &lt;div class=\"container-full\">\n   {% for block in section.blocks limit: 1 %}\n	&lt;img class=\"img-responsive lazyload\"  data-src=\"{{ block.settings.yx_image_picker | img_url: \'750x\' }}\" />\n   {% endfor %}\n&lt;/div>\n&lt;/div>\n{% schema %}\n  {\n    \"name\": \"YX Mobile Banner\",\n    \"class\": \"yx-mobile-banner-section\",\n    \"max_blocks\": 1,\n    \"blocks\": [\n    {\n      \"type\": \"image_picker\",\n      \"name\": \"Mobile Banner Image\",\n      \"settings\": [\n        {\n          \"label\": \"Mobile Banner Image\",\n          \"id\": \"yx_image_picker\",\n          \"type\": \"image_picker\"\n        }\n      ]\n    }\n  ],\n \"presets\": [\n    {\n      \"name\": \"YX Mobile Banner\",\n      \"category\": \"Home\",\n      \"blocks\":[{\"type\" : \"image_picker\"}]\n    }\n ]\n}\n{% endschema %}\n{% stylesheet %}\n{% endstylesheet %}\n{% javascript %}\n{% endjavascript %}\n</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>You can get the above file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/yx-mobile-banner.liquid\">GitHub</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t forget to save it as well.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Now when you customize your theme, click <strong>[Add section]</strong> you will see two new sections: \'\'<strong>YX Desktop Banner</strong>\" and \"<strong>YX Mobile Banner</strong>\".</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":179,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/new-section-added.png\" alt=\"\" class=\"wp-image-179\"/><figcaption>new section shown up</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2 id=\"add-css-style\">Add CSS codes to control our style</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>After you add newly created sections to your home page, obviously we don\'t want to show both of them on mobile and desktop. We want to show a mobile banner on mobile and show a desktop banner on the desktop only. How to do this? you may have noticed we have added a specific class named \"<strong>yx-desktop-hidden</strong>\" for the mobile banner container and put a class named \"<strong>yx-mobile-hidden</strong>\" into the desktop banner container. And we have given mobile and desktop banner container-related class name \"<strong>yx-mobile-banner-container</strong>\" and \"<strong>yx-desktop-banner-container</strong>\". Now we can easily use a CSS style to control them.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>add the below CSS style codes into Debut theme CSS file. Your theme.css ( for old version Debut theme it will be theme.css.liquid ) file will be under the <strong>Assets</strong> directory.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":334,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/06/debut-theme-css-location.png\" alt=\"\" class=\"wp-image-334\"/><figcaption>theme.css file location in Debut Theme</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media only screen and (max-width: 749px) {\n   .yx-mobile-hidden{\n      display:none;\n    }\n   .yx-desktop-hidden{\n      display:block;\n    }\n}\n\n@media only screen and (min-width: 750px) {\n   .yx-mobile-hidden{\n      display:block;\n   }\n   .yx-desktop-hidden{\n      display:none;\n    }\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>You can copy and past the codes from <a href=\"https://jsfiddle.net/yxmaomao/7z2mgf4a/6/\">JSFiddle</a> as well.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>As you can see we use CSS @media and screen size(<strong>750px</strong> as a threshold screen width) to differentiate mobile from desktop. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"debug-and-test\">Debug and Test</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>In order to get the best performance and visual looking, we highly recommend &nbsp;<strong>1920(width) * 1080(height)</strong> for desktop and <strong>800(width) * 800(height) </strong> for mobile. after you set your mobile and desktop banner image separately. you can preview your theme and switch between mobile and desktop to have a review.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":158,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/preview-banner-images-1024x395.png\" alt=\"shopify theme preview\" class=\"wp-image-158\"/><figcaption>shopify theme preview</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>If you don\'t like the default style, you can customer them by adding special attributes for \"<strong>yx-mobile-banner-container</strong>\" class to control mobile banner style and do similar changes to \"<strong>yx-desktop-banner-container</strong>\" class for your desktop banner.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"make-it-live\">Make it live</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>So far all good, if you and your customer both are satisfied with the changes. Congratulations! you have got a big success, last step so easy just click the publish button to make it live.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>publish a theme when you are editing it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":160,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/publish-a-theme-1024x52.png\" alt=\"publish a theme\" class=\"wp-image-160\"/><figcaption>publish a theme</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>publish a theme from theme list. <strong><em>Themes</em></strong> <em><strong>-&gt;Actions -&gt;Publish</strong></em>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":162,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/publish-a-theme-main-1024x373.png\" alt=\"publish a theme \" class=\"wp-image-162\"/><figcaption>publish a theme from theme list </figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Conclusions</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Now you have got a basic idea on how to implement showing different image banners for Desktop and mobile, you can make it better for your theme. We only use the free Debut theme as an example, actually, a different theme maybe needs a few changes to adapt to your environment. if you find it is very difficult for you to accomplish these, please do not hesitate to leave a message at the below comment area or <a href=\"https://www.mojoin.com/about-us/\">contact us</a>, we will try our best to help you out.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>TIPS</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Shopify has deprecated the sass supporting in the theme editor, for more details please visit <a href=\"https://www.shopify.com.au/partners/blog/deprecating-sass\" target=\"_blank\" rel=\"noreferrer noopener\">here</a> </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:html -->\n<script async src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>\n<!-- mojoin-home-page -->\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-client=\"ca-pub-6569971233827474\"\n     data-ad-slot=\"4992576575\"\n     data-ad-format=\"auto\"\n     data-full-width-responsive=\"true\"></ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n</script>\n<!-- /wp:html -->','Show Different Shopify Banner Image on Desktop and Mobile','','inherit','closed','closed','','66-revision-v1','','','2021-07-16 05:17:16','2021-07-16 05:17:16','',66,'https://www.mojoin.com/?p=390',0,'revision','',0),(391,1,'2021-07-16 05:43:20','2021-07-16 05:43:20','<!-- wp:paragraph -->\n<p>In the Shopify Debut Theme, default there is no product variant shown up in the product collection product grid view which means if users want to see the product variants they need to a product detail page. It will take users one more step to get what they want, from a user experience point of view it is not an effective and good way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Thanks for the Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object </a>which we can use to get the product variants data, then we can show them on whatever page we want.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Lets take <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Shopfiy Debut Theme </a> as an example. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Edit Collection Liquid File</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Open collection file at:<br><strong>Edit Code</strong> -&gt; <strong>Sections</strong> -&gt; <strong>collection.liquid</strong><br>Go to line 30( just for initial Debut Theme without any plugins installed and modifications) otherwise try to search for \"<strong>product-card-grid</strong>\"</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Then copy the following lines and paste just after that</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{%- if product.first_available_variant.title != \"Default Title\" -%}\n        &lt;select name=\"id\" class=\"single-option-selector single-option-selector-product-template product-form__input\">\n           {% for variant in product.variants %}\n           &lt;option value=\"{{ variant.id }}\" data-image=\"{{ variant.image | img_url : \'360x\' }}\"\n                   {%- if variant == current_variant %} selected=\"selected\" {%- endif -%}\n                   >\n             {{ variant.title }}  {%- if variant.available == false %} - {{ \'products.product.sold_out\' | t }}{% endif %}\n                      &lt;/option>\n           {% endfor %}        \n    	&lt;/select>\n        {%- endif -%}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 1 :</strong> just ignore the product without any variants, in the Shopify backend even you do not set any variant it still need to create a default variant for the product in order to manage the inventory of the product, in this case Shopify default product variant\'s name will be set as  \'Default Title\'. so here we use IF statement check product first available variant\'s title to ignore them.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 2-10 :</strong> just show the product variants data with SELECT element.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Once you done the above, your collection-template.liquid file will like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":366,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-collection-1024x410.png\" alt=\"\" class=\"wp-image-366\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Save the file, go to your store home page have a look at the featured collection products you will see :</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":371,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-collection-list.png\" alt=\"\" class=\"wp-image-371\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Edito Collection Template Liquid File</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Open collection template file at:<br><strong>Edit Code</strong> -&gt; <strong>Sections</strong> -&gt; <strong>collection-template.liquid</strong><br>Go to line 143( just for initial Debut Theme without any plugins installed and modifications) otherwise try to search for \"<strong>product-card-grid</strong>\"</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Copy the above lines at just after that. Once you done your codes will like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":374,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-pcollection-list-1024x493.png\" alt=\"\" class=\"wp-image-374\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now your collection page looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":375,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/show-pvariants-pcollection-list-2.png\" alt=\"\" class=\"wp-image-375\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>TIPS</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>You might want to add [Add to Cart] button or link to the product grid list as well, please refer to :<br><a href=\"https://www.mojoin.com/create-shopify-add-to-cart-link/\">Quick Add to Cart button on Collection Product for Debut theme Home and Collection</a></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:html -->\n<script async=\"\" src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>\n<!-- mojoin-home-page -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-6569971233827474\" data-ad-slot=\"4992576575\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"></ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n</script>\n<!-- /wp:html -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show product variant under product title in the Debut theme','','inherit','closed','closed','','325-revision-v1','','','2021-07-16 05:43:20','2021-07-16 05:43:20','',325,'https://www.mojoin.com/?p=391',0,'revision','',0),(392,1,'2021-07-16 05:45:12','2021-07-16 05:45:12','<!-- wp:paragraph -->\n<p>When you install Shopify free Debut theme, on the home page there is a featured collection. when you select your favorite product collection to show them, you will find there is no [Add to Cart] quick buy button, so from a user experience point of view, it will be better if you can add a quick to buy button and will have more chance to make people buy your product directly and the user does not need to do another step to click the product go to product page then add to cart from there. You know every time when you need a user to do one more step you will get more chances to lose your customer.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So today I will show you how to add a [Add to Cart] quick link or button on the collection product especially on the home page and all the collection pages step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:html -->\n<script async=\"\" src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>\n<!-- mojoin-home-page -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-6569971233827474\" data-ad-slot=\"4992576575\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"></ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n</script>\n<!-- /wp:html -->\n\n<!-- wp:heading -->\n<h2>Construct Add to Cart Link </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Firstly we should know how the Shopify [Add to Cart] link looks like and how it works. Actually, Shopify [Add to Cart] link looks like the following:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>[ <strong>Store Domain</strong> ] + \'/cart/add?id=\' + [<strong>product_variant_id</strong>] + \'&amp;quantity=\' + [<strong>product_quantity</strong>]</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><br>[Store Domain]: is your Shopify store URL, for example, https://www.mojoin.com. sometimes we can ignore the store domain if you use this link in your store and with HTML &lt;a&gt; tag.<br>[product_variant_id]: is your product variant id.  <br>[product_quantity]: is the number how many products you want to add to the cart for the user, default it is 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finish fully example will be like :<br>https://www.mojoin.com/cart/add?id=2423498823478&amp;quantity=1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Add Link to Collection Product</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Ok, now you have known how to construct the [Add to Cart] link, let\'s move to the next step to add this link to the collection product.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Log in your Shopify store backend edit your Debut theme code, then locate:<br><strong>Sections</strong> -&gt; <strong>collection-template.liquid </strong>-&gt; <strong>line 143</strong><br>or search for \'<strong>product-card-grid</strong>\'.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>then copy the following codes after line 143.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% assign added_to_cart_link = \'/cart/add?id=\' | append:product.first_available_variant.id | append: \'&amp;amp;quantity=1\' %}\n&lt;a href=\"{{ added_to_cart_link }}\">&lt;button>ADD TO CART&lt;/button>&lt;/a>\n    </pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Line 1 : we make up Add to Cart link, here we use the Shopify <a href=\"https://shopify.dev/api/liquid/objects/product\">product object</a>.  with the object\'s variable <em>first_available_variant </em>we can get our product variant ID. then we add the other quantity parameter with default value 1.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Line 2 : just add HTML &lt;a&gt; tag with our constructed link. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>when you finished, your file will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":348,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-code-1024x379.png\" alt=\"\" class=\"wp-image-348\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now save the changed template file. Go to your browser type any your Shopify store collection page your page will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":351,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-cpage.png\" alt=\"\" class=\"wp-image-351\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Add to Home Featured Collection Product</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Edit your Debut theme code, then locate:<br><strong>Sections </strong>-&gt; <strong>collection.liquid</strong> -&gt; <strong>line 30</strong><br>or search for \'<strong>product-card-grid</strong>\'.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Then copy the same above codes and insert them after line 30.<br>Once you have done, your codes will like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":357,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-colletion.png\" alt=\"\" class=\"wp-image-357\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now click the [Add to Cart] button from your home page featured collection products or from your product collection page directly, your customer will be redirected to the Shopify cart page, then customers can quickly check out from their cart.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Hopefully, you can get more orders!</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>TIPS</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>You might want to show product variants at the product grid list as well, please refer to:<br><a href=\"https://www.mojoin.com/show-product-variant-incolletion-shopify/\">How to show product variant under product title in the Debut theme</a></p>\n<!-- /wp:paragraph -->','Quick Add to Cart button on Collection Product for Debut theme Home and Collection','','inherit','closed','closed','','311-revision-v1','','','2021-07-16 05:45:12','2021-07-16 05:45:12','',311,'https://www.mojoin.com/?p=392',0,'revision','',0),(393,1,'2021-07-16 05:45:43','2021-07-16 05:45:43','<!-- wp:paragraph -->\n<p>Many of our customers ask for us to help them change their Shopify home page slideshow images\' ALT text because they want to get a perfect search engine optimization(<strong><a href=\"https://en.wikipedia.org/wiki/Search_engine_optimization\">SEO</a></strong>), At the first time, we think that it is very simple why so hard for a normal store manager to change it by themself.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>When we tried to accomplish this task, we knew the answer is you need at least 5 steps to update it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:html -->\n<script async=\"\" src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>\n<!-- mojoin-home-page -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-6569971233827474\" data-ad-slot=\"4992576575\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"></ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n</script>\n<!-- /wp:html -->\n\n<!-- wp:paragraph -->\n<p>So today we would like to share these steps with your guys, hopefully, it can help you out sometimes.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Login your store with admin </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>-&gt; <strong>Customize your them </strong></li><li>-&gt; <strong>Click Slideshow section</strong>(if not there you can add one section called Slideshow) </li><li>-&gt; <strong>Click Image slide</strong> </li><li>-&gt; <strong>If image not there please select one image</strong> </li><li>-&gt; <strong>Click Edit Button </strong></li><li>-&gt; <strong>Type your ALT text</strong> (maximum text is 225)</li><li>-&gt; <strong>Save It</strong></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>If you are still confused , please refer to the following screenshot:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":265,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/01/edit-shopify-image-alttxt-1024x516.png\" alt=\"Update Shopify Image ALT text\" class=\"wp-image-265\"/><figcaption>Update Shopify Image ALT text</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>The above method has been tested with Shopify <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Debut</a>, <a href=\"https://themes.shopify.com/themes/venture/styles/outdoors\">Venture</a>, <a href=\"https://themes.shopify.com/themes/brooklyn/styles/classic\">Brooklyn</a>, and <a href=\"https://themes.shopify.com/themes/minimal/styles/fashion\">Minimal </a>themes.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you found it is very hard to make it work for your theme, please do not hesitate to let us know via leave a message at the bottom comment area or <a href=\"https://www.mojoin.com/about-us\">contact us</a>. We will try our test to help you out for free.</p>\n<!-- /wp:paragraph -->','How to Edit Shopify Theme Slideshow Image ALT Text','','inherit','closed','closed','','258-revision-v1','','','2021-07-16 05:45:43','2021-07-16 05:45:43','',258,'https://www.mojoin.com/?p=393',0,'revision','',0),(394,1,'2021-07-16 05:46:16','2021-07-16 05:46:16','<!-- wp:image {\"align\":\"center\",\"id\":234,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/fixed-displaying-2ps-collectionpage-1024x536.jpg\" alt=\"fixed products\" class=\"wp-image-234\"/><figcaption>Fixed Display Products on Collection Page</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>When we customize the Shopify store for our clients, a few of them ask to see if we can keep some products always at the top of a collection page no matter what sort of conditions selected. We deep into the Shopify collection template liquid source code, eventually we found a solution to accomplish this task. Today, I will show you how to achieve this feature step by step, We are assuming you are using the Shopify Debut theme. Because we are going to use the free Debut theme as an example, all the others, a similar logic should be applied.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In the Shopify Collection template, we use the Shopify <a href=\"https://shopify.dev/docs/storefront-api/reference/products/collection\">Collection</a> object\'s <a href=\"https://shopify.dev/docs/storefront-api/reference/products/product\">products </a>property to get our specific product data.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:html -->\n<script async=\"\" src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>\n<!-- mojoin-home-page -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-6569971233827474\" data-ad-slot=\"4992576575\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"></ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n</script>\n<!-- /wp:html -->\n\n<!-- wp:paragraph -->\n<p>So our algorithm as below:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li><strong>Define specific products by the handle</strong></li><li><strong>Loop all products from the collection show specific products on the top of the product grid</strong></li><li><strong>Remove specific products from the original product list on the current page</strong></li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>Edit Collection Template File</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Login in Shopify with administrator, then <strong><em>Themes -&gt; Debut Theme -&gt; Edit Code -&gt; Sections/collection-template.liquid</em></strong>:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":243,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/edit-collection-template-1024x407.png\" alt=\"edit collection template\" class=\"wp-image-243\"/><figcaption>edit shopify collection template</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:html -->\n<p><h3>Define Specific Products by product handle </h3></p>\n<!-- /wp:html -->\n\n<!-- wp:paragraph -->\n<p>From about <strong>line 18</strong>, please copy and paste the following lines in:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n  define specific top products handles\n  {{top_specify_product_handles[0] }}  &lt;br/>\n  {{top_specify_product_handles[1] }} &lt;br/>\n{% endcomment %}\n{%- capture top_specify_products_str -%}\n  baroque-freshwater-pearl-earrings-handmade-shell-jewelry,\n  baroque-freshwater-pearl-earrings-handmade-square-jewelry\n{%- endcapture -%}\n{%- assign top_specify_product_handles = top_specify_products_str | split: \',\' -%}\n{%- assign all_products = collection.products -%}\n{%- assign limit_top_index_max = top_specify_product_handles | size | minus: 1 -%}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 6-9:</strong> define the specific top products by Shopify product handle as a string delimited by comma.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 10:</strong> Split the string with comma again into an array of the product handle.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 11:</strong> Save a temporary all collection products array which will be used to look for our specific products by product handle.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 12: </strong>Get the size of our specific products.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:html -->\n<p><h3>Insert Specific Products at the Top</h3></p>\n<!-- /wp:html -->\n\n<!-- wp:paragraph -->\n<p>Search for keywords  \"<strong>for product in collection.products</strong>\" in the Sections/collection-template.liquid file, then insert the below lines just before the first found position:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"> {% for product in all_products %}\n    {% for i in (0..limit_top_index_max) %}\n      {%- assign tmp_handle = top_specify_product_handles[i] | strip -%}\n      {% if product.handle == tmp_handle %}\n        &lt;li class=\"grid__item grid__item--{{section.id}} {{ grid_item_width }}\">\n           {% include \'product-card-grid\', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}\n        &lt;/li>\n        {% break %}\n      {% endif %}\n    {% endfor %}\n  {% endfor %}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>The above lines aim to show our specific top products.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Next we need to ignore the specific products from normal products list, just insert the following lines after the above found the position. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{%- assign show_product = true -%}\n {% for i in (0..limit_top_index_max) %}\n {%- assign tmp_handle = top_specify_product_handles[i] | strip -%}\n        {% if product.handle == tmp_handle %}\n          {%- assign show_product = false -%}\n          {% break %}\n        {% endif %}\n  {% endfor %}\n  {% if show_product %}\n 	&lt;li class=\"grid__item grid__item--{{section.id}} {{ grid_item_width }}\">\n       {% include \'product-card-grid\', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}\n    &lt;/li>\n  {% endif %}\n </pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>And don\'t forget to delete the original &lt;li&gt; tag lines:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><em>{% include \'product-card-grid\', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}</em></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Save it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Have a test</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Now you can preview your Debut theme and go to any collection page, you will see your specific products always showing up at the top of your list whatever your change sort conditions or go to the next page.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Conclusion</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>The article just uses the free Debut theme as an example, your theme might not be the exactly same one, but the basic idea is similar. If you found it is very hard to make it work please do not hesitate to let us know via leave a message at the bottom comment area or <a href=\"https://www.mojoin.com/about-us\">contact us</a>. We will try our test to help you out for free.</p>\n<!-- /wp:paragraph -->','Fixed Display Two Products on the Top of the Shopify Collection Page','','inherit','closed','closed','','57-revision-v1','','','2021-07-16 05:46:16','2021-07-16 05:46:16','',57,'https://www.mojoin.com/?p=394',0,'revision','',0),(395,1,'2021-07-16 05:47:16','2021-07-16 05:47:16','<!-- wp:image {\"align\":\"center\",\"id\":188,\"width\":768,\"height\":402,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/11/back-to-top-in-shopify-theme-1024x536.jpg\" alt=\"back to top in shopify store\" class=\"wp-image-188\" width=\"768\" height=\"402\"/><figcaption>back to top in Shopify store theme</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>For a Shopify store with more than 50 products, you always want to put as many products and product promotion information as on the home page or give more product detail information on the product page. But when clients are viewing your page scroll down and down ...., they will find it is a little bit noisy if they are going to return to the top again, normally clients need to scroll up and up again. it is wasting user\'s time and not convenient for the clients. So definitely it is not friendly for your clients.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If we can add a floating button somewhere on the page, for example at the right bottom corner or at the middle of the screen right edge, whenever clients want to return to the top, they just need to click or tap the button. It will be very convenient for your clients.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will show you how to add this feature into your Shopify theme step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong><a href=\"#scroll-top-injs\" title=\"#scroll-top-injs\">Scroll to the top in JavaScript</a></strong></li><li><strong><a href=\"#wrapped-in-shopify-theme\">Wrapped in Shopify snippets</a></strong></li><li><strong><a href=\"#call-snippet-intheme\">Call snippet in Shopify Theme</a></strong></li><li><strong><a href=\"#conclusions-tips\">More Tips</a></strong></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"scroll-top-injs\">Scroll to the top implementation in JavaScript</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Here we will use <a href=\"https://en.wikipedia.org/wiki/JQuery\" title=\"About JQuery library\">jQuery </a>free JavaScript library and <a href=\"https://api.jquery.com/scrolltop/\" title=\"jquery scrollTop function\">scrollTop()</a>, <a href=\"https://api.jquery.com/fadeIn/\">fadeIn()</a>, <a href=\"https://api.jquery.com/fadeOut/\">fadeOut()</a> and <a href=\"https://api.jquery.com/animate/\">animate()</a> functions.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script>\nwindow.onload = function() {\n jQuery(function($) {\n   var offset = 300;\n   var duration = 500;\n   $(window).scroll(function() {\n     if ($(this).scrollTop() > offset) {\n       $(\'.yx-back-to-top\').fadeIn(duration);\n     } \n     else {\n       $(\'.yx-back-to-top\').fadeOut(duration);\n     }\n   });\n   $(\'.yx-back-to-top\').unbind(\'click.smoothscroll\').bind(\'click\', function(e) {\n     e.preventDefault();\n     $(\'html, body\').animate( { scrollTop: 0 }, duration);\n     return false;\n   })\n });\n}\n&lt;/script>\n</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 2</strong>: make our code called when the whole page has been loaded. including all dependent resources such as CSS files and images.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 4-5</strong>: Define two constants to control when the floating button will appear or disappear and fadeIn/fadeOut duration.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 6-12</strong> : Control to show or hide the floating button.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 14-18 </strong>: Scroll to the TOP of the current page.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"wrapped-in-shopify-theme\">Wrapped the code in Shopify Snippets</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Add a new snippet named \"back-to-top\" in your theme snippets.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":206,\"width\":946,\"height\":398,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large is-resized\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/add-new-snippet.png\" alt=\"Add New Snippet in Shopify Theme\" class=\"wp-image-206\" width=\"946\" height=\"398\"/><figcaption>Add a New Snippet in Shopify Theme</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Copy and Paste the flowing lines into back-to-top.liquid file, save it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %} \n  vertical_offset -  Control how far scroll down make back to top button appear\n  That value is in pixels.\n  pos_from_bottom - set button position offset from bottom of browser\n{% endcomment %}\n{% assign vertical_offset = 300 %}\n{% assign pos_from_bottom = \'50%\' %}\n&lt;a href=\"#\" title=\"Back to the top\" class=\"yx-back-to-top\">\n &lt;i class=\"fa fa-arrow-circle-o-up fa-2x\">&lt;/i> \n&lt;/a>\n{{ \'//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css\' | stylesheet_tag }}\n&lt;style>\n.back-to-top {\n  position: fixed;\n  bottom: {{ pos_from_bottom }};\n  right: 0px;\n  text-decoration: none;\n  color: #999;\n  font-size: 16px;\n  padding: 0.3em;\n  display: none;\n  -webkit-border-top-left-radius: 3px;\n  -webkit-border-bottom-left-radius: 3px;\n  -moz-border-radius-topleft: 3px;\n  -moz-border-radius-bottomleft: 3px;\n  border-top-left-radius: 3px;\n  border-bottom-left-radius: 3px;\n  z-index: 60000;\n}\n.yx-back-to-top i {\n  vertical-align: middle;\n}\n.yx-back-to-top span {\n  padding-left: 0.5em;\n}\n.yx-back-to-top i + span {\n  padding-left: 0;\n}\n.yx-back-to-top:hover {\n  text-decoration: none;\n  color: #555;\n}\n&lt;/style>\n&lt;script>\n (function($) {\n   $(document).ready(function(e){\n     var offset = {{ vertical_offset }};\n     var duration = 500;\n     $(window).scroll(function() {\n       if ($(this).scrollTop() > offset) {\n         $(\'.back-to-top\').fadeIn(duration);\n       } \n       else {\n         $(\'.back-to-top\').fadeOut(duration);\n       }\n     });\n     $(\'.back-to-top\').unbind(\'click.smoothscroll\').bind(\'click\', function(e) {\n       e.preventDefault();\n       $(\'html, body\').animate( { scrollTop: 0 }, duration);\n       return false;\n     })\n   });\n })(jQuery);\n&lt;/script></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Or you can download this file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/back-to-top.liquid\">GitHub</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 1-5</strong>: comments about why we define these two constants, as for Shopify comment syntax please check <a href=\"https://shopify.github.io/liquid/tags/comment/\">here</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 8-10</strong>: HTML tags to show the floating button, here we use font-awesome font library.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 11</strong>: load font-awesome font library when page loaded as well.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 12-43</strong>: CSS style to control the floating button style and position.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"call-snippet-intheme\">Call the above snippet in Shopify Theme</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Open your theme <strong>layout/theme.liquid</strong> file, insert the below line:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><em>{% render \'back-to-top\' %}</em></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>just at before \"&lt;/body&gt;\" tag. then save it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":218,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/call-b2t-snippet-intheme-1024x359.png\" alt=\"call snippet \" class=\"wp-image-218\"/><figcaption>call snippet  in Shopify theme</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2 id=\"conclusions-tips\">Conclusions</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>In this article, you have learned how to add a floating button in your Shopify theme and click the button to scroll back to the top of your browser. in the codes you can easily adjust the position of the floating button and when the button will appear. As for button style, you can change it to whatever your favorite from font-awesome font library.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:html -->\n<script async=\"\" src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>\n<!-- mojoin-home-page -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-6569971233827474\" data-ad-slot=\"4992576575\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"></ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n</script>\n<!-- /wp:html -->\n\n<!-- wp:paragraph -->\n<p>If you found it is very hard for you to make it work in your theme, please leave a message at the bottom comment area or <a href=\"https://www.mojoin.com/about-us/\">contact us</a>, we will try our best to help you out for free.</p>\n<!-- /wp:paragraph -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2021-07-16 05:47:16','2021-07-16 05:47:16','',64,'https://www.mojoin.com/?p=395',0,'revision','',0),(396,1,'2021-07-16 05:48:00','2021-07-16 05:48:00','<!-- wp:image {\"align\":\"center\",\"id\":132,\"width\":768,\"height\":402,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/show-diff-pcmobile-banner-images-1024x536.jpg\" alt=\"different banner image for PC &amp; Mobile\" class=\"wp-image-132\" width=\"768\" height=\"402\"/><figcaption>different banner image for PC &amp; Mobile</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>In Shopify default <strong>Debut</strong> theme, there are sections called \"image with text\" and \"image with text overlay\". You can use them to put an image with text on your home page, but you can\'t set different images for Desktop or Mobile, so the reality is it is very difficult to make one image size to support both Desktop and Mobile and make them both looks perfect on two devices.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In order to solve the above problem, we need to customize the default theme, here we will use the Shopify Debut theme to show you how to implement this functionality, I will guide you through the whole process following the below steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong><a href=\"#define-our-section\">define your sections in the Shopify Debut theme</a></strong></li><li><strong><a href=\"#add-image-to-section\" title=\"#add-image-to-section\">add image set in the section</a></strong></li><li><strong><a href=\"#add-css-style\">put our CSS code into the theme</a></strong></li><li><strong><a href=\"#debug-and-test\" title=\"#debug-and-test\">debug and test</a></strong></li><li><strong><a href=\"#make-it-live\" title=\"#make-it-live\">publish the theme</a></strong></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"define-our-section\">Define your own sections </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>login to your store backend,select your theme to edit code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":137,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/edit-them-code.png\" alt=\"edit theme code\" class=\"wp-image-137\"/><figcaption>edit theme code</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Add new section called \"yx-desktop-banner\",then your can see a liquid file called yx-desktop-banner.liquid will be added in your sections directory.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":139,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/add-new-section-2-theme.png\" alt=\"add new section\" class=\"wp-image-139\"/><figcaption>add new section</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Repeat above step to create the other section named as \"yx-mobile-banner\".</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"add-image-to-section\">Add Image Picker to the section</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Click the above created yx-desktop-banner.liquid file to edit it. Delete all the default codes in the file, replace them with the below lines:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"page-width yx-desktop-banner-container yx-mobile-hidden\">\n &lt;div class=\"container-full\">\n   {% for block in section.blocks limit: 1 %}\n	&lt;img class=\"img-responsive lazyload\"  data-src=\"{{ block.settings.yx_image_picker | img_url: \'2000x\' }}\" />\n   {% endfor %}\n&lt;/div>\n&lt;/div>\n{% schema %}\n  {\n    \"name\": \"YX Desktop Banner\",\n    \"class\": \"yx-desktop-banner-section\",\n    \"max_blocks\": 1,\n    \"blocks\": [\n    {\n      \"type\": \"image_picker\",\n      \"name\": \"Desktop Banner Image\",\n      \"settings\": [\n        {\n          \"label\": \"Desktop Banner Image\",\n          \"id\": \"yx_image_picker\",\n          \"type\": \"image_picker\"\n        }\n      ]\n    }\n  ],\n \"presets\": [\n    {\n      \"name\": \"YX Desktop Banner\",\n      \"category\": \"Home\",\n\"blocks\":[{\"type\" : \"image_picker\"}]\n    }\n]\n  }\n{% endschema %}\n{% stylesheet %}\n{% endstylesheet %}\n{% javascript %}\n{% endjavascript %}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>You can get the above file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/yx-desktop-banner.liquid\">GitHub</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Save it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:html -->\n<script async=\"\" src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>\n<!-- mojoin-home-page -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-6569971233827474\" data-ad-slot=\"4992576575\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"></ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n</script>\n<!-- /wp:html -->\n\n<!-- wp:paragraph -->\n<p>Replaced yx-mobile-banner.liquid file content with the following lines:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"page-width yx-mobile-banner-container yx-desktop-hidden\">\n &lt;div class=\"container-full\">\n   {% for block in section.blocks limit: 1 %}\n	&lt;img class=\"img-responsive lazyload\"  data-src=\"{{ block.settings.yx_image_picker | img_url: \'750x\' }}\" />\n   {% endfor %}\n&lt;/div>\n&lt;/div>\n{% schema %}\n  {\n    \"name\": \"YX Mobile Banner\",\n    \"class\": \"yx-mobile-banner-section\",\n    \"max_blocks\": 1,\n    \"blocks\": [\n    {\n      \"type\": \"image_picker\",\n      \"name\": \"Mobile Banner Image\",\n      \"settings\": [\n        {\n          \"label\": \"Mobile Banner Image\",\n          \"id\": \"yx_image_picker\",\n          \"type\": \"image_picker\"\n        }\n      ]\n    }\n  ],\n \"presets\": [\n    {\n      \"name\": \"YX Mobile Banner\",\n      \"category\": \"Home\",\n      \"blocks\":[{\"type\" : \"image_picker\"}]\n    }\n ]\n}\n{% endschema %}\n{% stylesheet %}\n{% endstylesheet %}\n{% javascript %}\n{% endjavascript %}\n</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>You can get the above file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/yx-mobile-banner.liquid\">GitHub</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t forget to save it as well.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Now when you customize your theme, click <strong>[Add section]</strong> you will see two new sections: \'\'<strong>YX Desktop Banner</strong>\" and \"<strong>YX Mobile Banner</strong>\".</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":179,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/new-section-added.png\" alt=\"\" class=\"wp-image-179\"/><figcaption>new section shown up</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2 id=\"add-css-style\">Add CSS codes to control our style</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>After you add newly created sections to your home page, obviously we don\'t want to show both of them on mobile and desktop. We want to show a mobile banner on mobile and show a desktop banner on the desktop only. How to do this? you may have noticed we have added a specific class named \"<strong>yx-desktop-hidden</strong>\" for the mobile banner container and put a class named \"<strong>yx-mobile-hidden</strong>\" into the desktop banner container. And we have given mobile and desktop banner container-related class name \"<strong>yx-mobile-banner-container</strong>\" and \"<strong>yx-desktop-banner-container</strong>\". Now we can easily use a CSS style to control them.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>add the below CSS style codes into Debut theme CSS file. Your theme.css ( for old version Debut theme it will be theme.css.liquid ) file will be under the <strong>Assets</strong> directory.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":334,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/06/debut-theme-css-location.png\" alt=\"\" class=\"wp-image-334\"/><figcaption>theme.css file location in Debut Theme</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media only screen and (max-width: 749px) {\n   .yx-mobile-hidden{\n      display:none;\n    }\n   .yx-desktop-hidden{\n      display:block;\n    }\n}\n\n@media only screen and (min-width: 750px) {\n   .yx-mobile-hidden{\n      display:block;\n   }\n   .yx-desktop-hidden{\n      display:none;\n    }\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>You can copy and past the codes from <a href=\"https://jsfiddle.net/yxmaomao/7z2mgf4a/6/\">JSFiddle</a> as well.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>As you can see we use CSS @media and screen size(<strong>750px</strong> as a threshold screen width) to differentiate mobile from desktop. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"debug-and-test\">Debug and Test</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>In order to get the best performance and visual looking, we highly recommend &nbsp;<strong>1920(width) * 1080(height)</strong> for desktop and <strong>800(width) * 800(height) </strong> for mobile. after you set your mobile and desktop banner image separately. you can preview your theme and switch between mobile and desktop to have a review.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":158,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/preview-banner-images-1024x395.png\" alt=\"shopify theme preview\" class=\"wp-image-158\"/><figcaption>shopify theme preview</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>If you don\'t like the default style, you can customer them by adding special attributes for \"<strong>yx-mobile-banner-container</strong>\" class to control mobile banner style and do similar changes to \"<strong>yx-desktop-banner-container</strong>\" class for your desktop banner.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"make-it-live\">Make it live</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>So far all good, if you and your customer both are satisfied with the changes. Congratulations! you have got a big success, last step so easy just click the publish button to make it live.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>publish a theme when you are editing it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":160,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/publish-a-theme-1024x52.png\" alt=\"publish a theme\" class=\"wp-image-160\"/><figcaption>publish a theme</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>publish a theme from theme list. <strong><em>Themes</em></strong> <em><strong>-&gt;Actions -&gt;Publish</strong></em>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":162,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/publish-a-theme-main-1024x373.png\" alt=\"publish a theme \" class=\"wp-image-162\"/><figcaption>publish a theme from theme list </figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Conclusions</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Now you have got a basic idea on how to implement showing different image banners for Desktop and mobile, you can make it better for your theme. We only use the free Debut theme as an example, actually, a different theme maybe needs a few changes to adapt to your environment. if you find it is very difficult for you to accomplish these, please do not hesitate to leave a message at the below comment area or <a href=\"https://www.mojoin.com/about-us/\">contact us</a>, we will try our best to help you out.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>TIPS</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Shopify has deprecated the sass supporting in the theme editor, for more details please visit <a href=\"https://www.shopify.com.au/partners/blog/deprecating-sass\" target=\"_blank\" rel=\"noreferrer noopener\">here</a> </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:html -->\n<script async=\"\" src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>\n<!-- mojoin-home-page -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-6569971233827474\" data-ad-slot=\"4992576575\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"></ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n</script>\n<!-- /wp:html -->','Show Different Shopify Banner Image on Desktop and Mobile','','inherit','closed','closed','','66-revision-v1','','','2021-07-16 05:48:00','2021-07-16 05:48:00','',66,'https://www.mojoin.com/?p=396',0,'revision','',0),(397,1,'2021-07-16 05:48:15','2021-07-16 05:48:15','<!-- wp:image {\"align\":\"center\",\"id\":125,\"width\":768,\"height\":402,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/call-js-content-loaded-1024x536.jpg\" alt=\"call js after content loaded\" class=\"wp-image-125\" width=\"768\" height=\"402\"/><figcaption>call JavaScript after content loaded</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>when we try to customize a Shopify product, collection, or check-out page, in most cases we need to implement special features with JavaScript.  For example, show the most favorite products on the product page or on the check-out page, we need to write some JavaScript function to do some changes in your DOM object after all the pages content loaded. then we need to know how we can call JavaScipt after content loaded.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:html -->\n<script async=\"\" src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>\n<!-- mojoin-home-page -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-6569971233827474\" data-ad-slot=\"4992576575\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"></ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n</script>\n<!-- /wp:html -->\n\n<!-- wp:paragraph -->\n<p>From frontend point of view, JavaScript has an event listener called \"DOMContentLoaded\" which we can use to call our JavaScript function codes.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>The&nbsp;<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event\"><strong><code>DOMContentLoaded</code></strong>&nbsp;</a>event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So codes like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">document.addEventListener(\'DOMContentLoaded\', function() {\n   // your code here\n},false);</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>The above implementation method is based on raw JavaScript. But if a <a href=\"https://jquery.com/download/\" title=\"https://jquery.com/download/\">JQuery JavaScript library</a> already included in your theme, you can put your logic code in the JQuery wrapped function as below:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$( document ).ready(function() {\n    // put your logic code here\n});</pre>\n<!-- /wp:enlighter/codeblock -->','Shopify How to Call  javascript after Content Loaded','','inherit','closed','closed','','61-revision-v1','','','2021-07-16 05:48:15','2021-07-16 05:48:15','',61,'https://www.mojoin.com/?p=397',0,'revision','',0),(398,1,'2021-07-16 05:48:28','2021-07-16 05:48:28','<!-- wp:image {\"align\":\"center\",\"id\":120,\"width\":768,\"height\":402,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/get-url-parameters-in-liquid-1024x536.jpg\" alt=\"get url parameters in liquid\" class=\"wp-image-120\" width=\"768\" height=\"402\"/><figcaption>get url parameters in liquid</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>One of our customers asks for customizing the Shopify Collection page for them, their requirement is very simple, just wants to keep one or two specified products always showing on the top whenever user change sort by conditions.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Basically there are two ways to do this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>First one:</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>append a special parameter to the collection page URL.</li><li>check to see if the specified URL parameter existing or not.</li><li>if existing then <a href=\"https://www.mojoin.com/get-shopify-product-data-json-format/\">get the specified product data from Shopify Store</a>.</li><li>insert the specified product into the collection product list at the head.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p><strong>Second one:</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>in the Shopify Collection template file loop all the <a href=\"https://shopify.dev/docs/storefront-api/reference/products/collection#connections-2020-10\">collecion.products </a>to get the specified top two products.</li><li>remove original top two products from the collection product list.</li><li>insert these two products at the top of the collection product list.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>in this article we will focus on first method and how to get URL parameters in the Shopify frontend.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In order to implement this feature, we need to use JavaScript <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/URL/URL\">URL</a> and <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams\">URLSearchParams</a> objects. with URL() object to get a URL object and with get() function of URLSearchParams object to get the parameter which we want.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:html -->\n<script async=\"\" src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>\n<!-- mojoin-home-page -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-6569971233827474\" data-ad-slot=\"4992576575\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"></ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n</script>\n<!-- /wp:html -->\n\n<!-- wp:paragraph -->\n<p>Example codes as below:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">(function($){\n    $(document).ready(function(e){\n      var url = new URL(location.href);\n      var params = new URLSearchParams(url.search);\n      var show_top_flag = params.get(\'show_top\');\n      if ( show_top_flag != null ) {  \n          // show top two products logic here\n          // ... \n      }\n});\n})(jQuery);</pre>\n<!-- /wp:enlighter/codeblock -->','How to Get URL parameters in Shopify Frontend','','inherit','closed','closed','','90-revision-v1','','','2021-07-16 05:48:28','2021-07-16 05:48:28','',90,'https://www.mojoin.com/?p=398',0,'revision','',0),(399,1,'2021-07-16 05:48:40','2021-07-16 05:48:40','<!-- wp:image {\"align\":\"center\",\"id\":98,\"width\":768,\"height\":402,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/12/get-productjson-data-1024x536.jpg\" alt=\"get shopify product data  json data\" class=\"wp-image-98\" width=\"768\" height=\"402\"/><figcaption>get shopify product json data</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Get Shopify Product Data with Jason Format in JavaScript will be useful when you try to customize a Shopify Theme for Collection or Product List pages.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will show you how to implement this feature with Shopify product API.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:html -->\n<script async=\"\" src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>\n<!-- mojoin-home-page -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-6569971233827474\" data-ad-slot=\"4992576575\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"></ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n</script>\n<!-- /wp:html -->\n\n<!-- wp:paragraph -->\n<p>Firstly magic thing is we can get any Shopify store\'s product data by a URL like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><em>https://<strong>{shopify-store-url}/</strong>products<strong>/{product-handle}</strong>.json</em></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>here <strong><em>{</em></strong><em><strong>shopify-store-url}</strong></em> is your shopify store full URL, for example : https://neonbeach.com/, <strong><em>{product-handle}</em></strong> is product unique ID in your shopify store, for example: babe-you-look-so-cool-neon-sign, then we can get a full URL:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://neonbeach.com/products/babe-you-look-so-cool-neon-sign.json\">https://neonbeach.com/products/babe-you-look-so-cool-neon-sign.json</a></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Click the above link or copy them to your favorite browser, you can see the product JSON data returned.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>here returned data with all the properties of your product, if you are not familiar with product properties please see Shopify API about <a href=\"https://shopify.dev/docs/admin-api/rest/reference/products/product\">product properties</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Then the rest of thing is easy, just wrap this URL and call it in JavaScript. all codes like below:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">(function($){\n    $(document).ready(function(e){\n      var store_url = \"https://neonbeach.com/\"; // replaced with your shopify store url\n      var product_id = \"babe-you-look-so-cool-neon-sign\"; // replaced with your product id\n      var full_url = store_url + \'/products/\' + product_id + \'.json\';\n      \n      $.ajax({\n        url: full_url,\n        success: function(data) {\n          console.log(\"product id:\" + data.product.id);\n          console.log(\"product title:\" + data.product.title);\n          // ... to do \n          // all your process with product data logic\n        }\n      });\n      \n      });\n    })(jQuery);</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>You can try to run the above lines directly from <a href=\"https://jsfiddle.net/yxmaomao/nh92j8ta/17/\" target=\"_blank\" rel=\"noreferrer noopener\">JSFiddle</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:html /-->','How to Get Shopify Product Data with JSON Format in Frontend','','inherit','closed','closed','','55-revision-v1','','','2021-07-16 05:48:40','2021-07-16 05:48:40','',55,'https://www.mojoin.com/?p=399',0,'revision','',0),(400,1,'2021-07-16 05:49:03','2021-07-16 05:49:03','<!-- wp:paragraph -->\n<p>Some times we want to know what the version number of current using Shopify theme.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today, I will show you how to find it. I will use the Shopify free Debut theme as an example. To be honest almost all Shopify themes are the same.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Firstly login in your Shopify store backend</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:html -->\n<script async=\"\" src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>\n<!-- mojoin-home-page -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-6569971233827474\" data-ad-slot=\"4992576575\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"></ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n</script>\n<!-- /wp:html -->\n\n<!-- wp:paragraph -->\n<p>then go to Edit code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":44,\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/10/shopify-edit-code-1024x315.png\" alt=\"shopify edit code\" class=\"wp-image-44\"/><figcaption>Shopify Them Edit Code</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Open <strong><em>Themes</em></strong> -&gt;<strong> <em>Config</em></strong> -&gt;<strong> <em>settings_schema.json</em></strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":47,\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/11/shopify-theme-version.png\" alt=\"\" class=\"wp-image-47\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>You will find key : theme_version in the <a href=\"https://www.shopify.com.au/partners/blog/shopify-theme-styles-and-presets\" target=\"_blank\" rel=\"noreferrer noopener\">settings_schema.json</a> file</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>that\'s it!</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https://youtu.be/4SZk7B3piOU\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"responsive\":true,\"align\":\"center\",\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps://youtu.be/4SZk7B3piOU\n</div><figcaption>Get Shopify Theme Current Version</figcaption></figure>\n<!-- /wp:embed -->','How to check Shopify theme version number','','inherit','closed','closed','','42-revision-v1','','','2021-07-16 05:49:03','2021-07-16 05:49:03','',42,'https://www.mojoin.com/?p=400',0,'revision','',0),(402,1,'2021-07-17 01:23:34','2021-07-17 01:23:34','<!-- wp:paragraph -->\n<p>to shopify order history list refer to : https://freakdesign.com.au/blogs/news/129660999-how-to-create-a-button-to-let-customers-repeat-their-previous-order</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','inherit','closed','closed','','295-revision-v1','','','2021-07-17 01:23:34','2021-07-17 01:23:34','',295,'https://www.mojoin.com/?p=402',0,'revision','',0),(403,1,'2021-07-17 01:27:22','2021-07-17 01:27:22','<!-- wp:paragraph -->\n<p>Free Shopify theme does not include Reorder or Buy Again shortcut in the customer account and order history panel. As we all know reorder functionality is a very easy way to increase your profit and very convenient for customers as well.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>to shopify order history list refer to : https://freakdesign.com.au/blogs/news/129660999-how-to-create-a-button-to-let-customers-repeat-their-previous-order</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','inherit','closed','closed','','295-revision-v1','','','2021-07-17 01:27:22','2021-07-17 01:27:22','',295,'https://www.mojoin.com/?p=403',0,'revision','',0),(404,1,'2021-07-17 04:43:27','2021-07-17 04:43:27','<!-- wp:paragraph -->\n<p>As we all know reorder functionality is a very easy way to increase your profit and very convenient for customers as well. but unfortunately, the Free Shopify themes do not include Reorder or Buy Again shortcut in the customer account and order history panel.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you are struggling with this tough job, this article is just for you. I will show you how to add Reorder or Buy Again button into your customer account and the order history page of your Shopify store.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>to shopify order history list refer to : https://freakdesign.com.au/blogs/news/129660999-how-to-create-a-button-to-let-customers-repeat-their-previous-order</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','inherit','closed','closed','','295-revision-v1','','','2021-07-17 04:43:27','2021-07-17 04:43:27','',295,'https://www.mojoin.com/?p=404',0,'revision','',0),(405,1,'2021-07-17 04:44:15','2021-07-17 04:44:15','<!-- wp:paragraph -->\n<p>As we all know Reorder or Buy Again functionality is a very easy way to increase your profit and very convenient for customers as well. but unfortunately, the Free Shopify themes do not include Reorder or Buy Again shortcut in the customer account and order history panel.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you are struggling with this tough job, this article is just for you. I will show you how to add Reorder or Buy Again button into your customer account and the order history page of your Shopify store.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>to shopify order history list refer to : https://freakdesign.com.au/blogs/news/129660999-how-to-create-a-button-to-let-customers-repeat-their-previous-order</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','inherit','closed','closed','','295-revision-v1','','','2021-07-17 04:44:15','2021-07-17 04:44:15','',295,'https://www.mojoin.com/?p=405',0,'revision','',0),(406,1,'2021-07-17 04:47:44','2021-07-17 04:47:44','<!-- wp:paragraph -->\n<p>As we all know Reorder or Buy Again functionality is a very easy way to increase your profit and very convenient for customers as well. but unfortunately, the Free Shopify themes do not include Reorder or Buy Again shortcut in the customer account and order history panel.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you are struggling with this tough job, this article is just for you. I will show you how to add Reorder or Buy Again button into your customer account and the order history page of your Shopify store step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Step 1:  add customize javascript file<br>Step 2:  add Reorder button styles<br>Step 3:  create snippets for reorder button function<br>Step 4:  render reorder button in the customer account page<br>Step 5:  render reorder button in the order history page<br>Step 6:  Test<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>to shopify order history list refer to : https://freakdesign.com.au/blogs/news/129660999-how-to-create-a-button-to-let-customers-repeat-their-previous-order</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','inherit','closed','closed','','295-revision-v1','','','2021-07-17 04:47:44','2021-07-17 04:47:44','',295,'https://www.mojoin.com/?p=406',0,'revision','',0),(407,1,'2021-07-17 04:51:05','2021-07-17 04:51:05','<!-- wp:paragraph -->\n<p>As we all know Reorder or Buy Again functionality is a very easy way to increase your profit and very convenient for customers as well. but unfortunately, the Free Shopify themes do not include Reorder or Buy Again shortcut in the customer account and order history panel.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you are struggling with this tough job, this article is just for you. I will show you how to add Reorder or Buy Again button into your customer account and the order history page of your Shopify store step by step.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Step 1:  add customize javascript file<br>Step 2:  add Reorder button styles<br>Step 3:  create snippets for reorder button function<br>Step 4:  render reorder button on the customer account page<br>Step 5:  render reorder button in the order history page<br>Step 6:  Test<br>Step 7:  Conclusion</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Step 1: add customize javascript file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>to shopify order history list refer to : https://freakdesign.com.au/blogs/news/129660999-how-to-create-a-button-to-let-customers-repeat-their-previous-order</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','inherit','closed','closed','','295-revision-v1','','','2021-07-17 04:51:05','2021-07-17 04:51:05','',295,'https://www.mojoin.com/?p=407',0,'revision','',0),(408,1,'2021-07-17 04:53:11','2021-07-17 04:53:11','<!-- wp:paragraph -->\n<p>As we all know Reorder or Buy Again functionality is a very easy way to increase your profit and very convenient for customers as well. but unfortunately, the Free Shopify themes do not include Reorder or Buy Again shortcut in the customer account and order history panel.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you are struggling with this tough job, this article is just for you. I will show you how to add Reorder or Buy Again button into your customer account and the order history page of your Shopify store step by step.  Let us take Shopify free Debut theme as an example. for all others, the backend logic is very similar.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Step 1:  add customize javascript file<br>Step 2:  add Reorder button styles<br>Step 3:  create snippets for reorder button function<br>Step 4:  render reorder button on the customer account page<br>Step 5:  render reorder button in the order history page<br>Step 6:  Test<br>Step 7:  Conclusion</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Step 1: add customize javascript file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>to shopify order history list refer to : https://freakdesign.com.au/blogs/news/129660999-how-to-create-a-button-to-let-customers-repeat-their-previous-order</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','inherit','closed','closed','','295-revision-v1','','','2021-07-17 04:53:11','2021-07-17 04:53:11','',295,'https://www.mojoin.com/?p=408',0,'revision','',0),(409,1,'2021-07-17 04:56:08','2021-07-17 04:56:08','<!-- wp:paragraph -->\n<p>As we all know Reorder or Buy Again functionality is a very easy way to increase your profit and very convenient for customers as well. but unfortunately, the Free Shopify themes do not include Reorder or Buy Again shortcut in the customer account and order history panel.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you are struggling with this tough job, this article is just for you. I will show you how to add Reorder or Buy Again button into your customer account and the order history page of your Shopify store step by step.  Let us take Shopify free <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Debut theme</a> as an example. for all others, the backend logic is very similar.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Step 1:  add customize javascript file<br>Step 2:  add Reorder button styles<br>Step 3:  create snippets for reorder button function<br>Step 4:  render reorder button on the customer account page<br>Step 5:  render reorder button in the order history page<br>Step 6:  Test<br>Step 7:  Conclusion</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Step 1: add customize javascript file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>to shopify order history list refer to : https://freakdesign.com.au/blogs/news/129660999-how-to-create-a-button-to-let-customers-repeat-their-previous-order</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','inherit','closed','closed','','295-revision-v1','','','2021-07-17 04:56:08','2021-07-17 04:56:08','',295,'https://www.mojoin.com/?p=409',0,'revision','',0),(410,1,'2021-07-17 05:01:38','2021-07-17 05:01:38','<!-- wp:paragraph -->\n<p>As we all know Reorder or Buy Again functionality is a very easy way to increase your profit and very convenient for customers as well. but unfortunately, the Free Shopify themes do not include Reorder or Buy Again shortcut in the customer account and order history panel.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you are struggling with this tough job, this article is just for you. I will show you how to add Reorder or Buy Again button into your customer account and the order history page of your Shopify store step by step.  Let us take Shopify free <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Debut theme</a> as an example. for all others, the backend logic is very similar.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong><a href=\"#step1-add-cjf\" title=\"#step1-add-cjf\">Step 1:  add customize javascript file</a></strong><br>Step 2:  add Reorder button styles<br>Step 3:  create snippets for reorder button function<br>Step 4:  render reorder button on the customer account page<br>Step 5:  render reorder button in the order history page<br>Step 6:  Test<br>Step 7:  Conclusion</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step1-add-cjf\">Step 1: add customize javascript file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>to shopify order history list refer to : https://freakdesign.com.au/blogs/news/129660999-how-to-create-a-button-to-let-customers-repeat-their-previous-order</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','inherit','closed','closed','','295-revision-v1','','','2021-07-17 05:01:38','2021-07-17 05:01:38','',295,'https://www.mojoin.com/?p=410',0,'revision','',0),(411,1,'2021-07-17 05:29:08','2021-07-17 05:29:08','<!-- wp:paragraph -->\n<p>As we all know Reorder or Buy Again functionality is a very easy way to increase your profit and very convenient for customers as well. but unfortunately, the Free Shopify themes do not include Reorder or Buy Again shortcut in the customer account and order history panel.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you are struggling with this tough job, this article is just for you. I will show you how to add Reorder or Buy Again button into your customer account and the order history page of your Shopify store step by step.  Let us take Shopify free <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Debut theme</a> as an example. for all others, the backend logic is very similar.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong><a href=\"#step1-add-cjf\" title=\"#step1-add-cjf\">Step 1:  add customize javascript file</a></strong><br>Step 2:  add Reorder button styles<br>Step 3:  create snippets for reorder button function<br>Step 4:  render reorder button on the customer account page<br>Step 5:  render reorder button in the order history page<br>Step 6:  Test<br>Step 7:  Conclusion</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step1-add-cjf\">Step 1: add customize javascript file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Create a new js file and assets folder and name as stx_custom.js.<br>Copy and paste the following code in:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">(function($) {\n  \n  \n  // stx reorder \n  this.reorder = new function(){\n    var self = this;\n\n    this.pushQueue = function(i, data, el){\n\n      //LOW STOCK -- add as many as possible if stock is below requested ammount\n      if(data[i].check_inventory){\n        data[i].quantity = Math.min(parseInt(data[i].inventory), parseInt(data[i].quantity));\n      }\n\n      $.ajax({\n        url: \'/cart/add.js\',\n        method: \'POST\',\n        data: {\n          quantity: data[i].quantity,\n          id: data[i].id\n        },\n        complete: function(res){\n          if(i >= data.length - 1){\n            //products from queue are now added to the cart -> stop loading signal and go to cart\n            el.removeClass(\'loading\');\n            window.location.href = \'/cart\';\n            return;\n          }else{\n            // Calls are async as required by Shopify Docs\n               self.pushQueue(i+1, data, el);\n          }\n        }\n      });\n    }\n\n    this.listen = function(){\n      var el = $(this);\n      var ids = el.attr(\'data-variant-ids\').split(\',\');\n      var quantities = el.attr(\'data-variant-quantities\').split(\',\');\n      var inventories = el.attr(\'data-variant-inventories\').split(\',\');\n      var inventory_policies = el.attr(\'data-variant-inventory-policies\').split(\',\');\n      var inventory_trackers = el.attr(\'data-variant-inventory-trackers\').split(\',\');\n      ids.splice(-1, 1);\n      quantities.splice(-1, 1);\n      inventories.splice(-1, 1);\n      inventory_policies.splice(-1, 1);\n      inventory_trackers.splice(-1, 1);\n\n      var data = [];\n      for(var i=0; i&lt;ids.length; i++){\n        data.push({\n          id: ids[i],\n          quantity: quantities[i],\n          inventory: inventories[i],\n          check_inventory: (inventory_policies[i] == \"deny\" &amp;&amp; inventory_trackers[i] != \"\")\n        });\n      }\n      el.addClass(\'loading\');\n      self.pushQueue(0, data, el);\n    }\n\n    this.init = function(){\n      $(\'.reorder-btn\').on(\'click\', self.listen);\n    }\n  }\n\n  $(reorder.init);\n \n  \n})(jQuery)</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can also download this file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/stx_custom.js\">Github</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>to shopify order history list refer to : https://freakdesign.com.au/blogs/news/129660999-how-to-create-a-button-to-let-customers-repeat-their-previous-order</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','inherit','closed','closed','','295-revision-v1','','','2021-07-17 05:29:08','2021-07-17 05:29:08','',295,'https://www.mojoin.com/?p=411',0,'revision','',0),(412,1,'2021-07-17 06:28:31','2021-07-17 06:28:31','<!-- wp:paragraph -->\n<p>As we all know Reorder or Buy Again functionality is a very easy way to increase your profit and very convenient for customers as well. but unfortunately, the Free Shopify themes do not include Reorder or Buy Again shortcut in the customer account and order history panel.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you are struggling with this tough job, this article is just for you. I will show you how to add Reorder or Buy Again button into your customer account and the order history page of your Shopify store step by step.  Let us take Shopify free <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Debut theme</a> as an example. for all others, the backend logic is very similar.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong><a href=\"#step1-add-cjf\" title=\"#step1-add-cjf\">Step 1:  add customize javascript file</a></strong><br>Step 2:  add Reorder button styles<br>Step 3:  create snippets for reorder button function<br>Step 4:  render reorder button on the customer account page<br>Step 5:  render reorder button in the order history page<br>Step 6:  Test<br>Step 7:  Conclusion</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step1-add-cjf\">Step 1: add customize javascript file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Create a new js file under the Assets folder and name it as stx_custom.js.<br>Copy and paste the following code in:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">(function($) {\n  \n  \n  // stx reorder \n  this.reorder = new function(){\n    var self = this;\n\n    this.pushQueue = function(i, data, el){\n\n      //LOW STOCK -- add as many as possible if stock is below requested ammount\n      if(data[i].check_inventory){\n        data[i].quantity = Math.min(parseInt(data[i].inventory), parseInt(data[i].quantity));\n      }\n\n      $.ajax({\n        url: \'/cart/add.js\',\n        method: \'POST\',\n        data: {\n          quantity: data[i].quantity,\n          id: data[i].id\n        },\n        complete: function(res){\n          if(i >= data.length - 1){\n            //products from queue are now added to the cart -> stop loading signal and go to cart\n            el.removeClass(\'loading\');\n            window.location.href = \'/cart\';\n            return;\n          }else{\n            // Calls are async as required by Shopify Docs\n               self.pushQueue(i+1, data, el);\n          }\n        }\n      });\n    }\n\n    this.listen = function(){\n      var el = $(this);\n      var ids = el.attr(\'data-variant-ids\').split(\',\');\n      var quantities = el.attr(\'data-variant-quantities\').split(\',\');\n      var inventories = el.attr(\'data-variant-inventories\').split(\',\');\n      var inventory_policies = el.attr(\'data-variant-inventory-policies\').split(\',\');\n      var inventory_trackers = el.attr(\'data-variant-inventory-trackers\').split(\',\');\n      ids.splice(-1, 1);\n      quantities.splice(-1, 1);\n      inventories.splice(-1, 1);\n      inventory_policies.splice(-1, 1);\n      inventory_trackers.splice(-1, 1);\n\n      var data = [];\n      for(var i=0; i&lt;ids.length; i++){\n        data.push({\n          id: ids[i],\n          quantity: quantities[i],\n          inventory: inventories[i],\n          check_inventory: (inventory_policies[i] == \"deny\" &amp;&amp; inventory_trackers[i] != \"\")\n        });\n      }\n      el.addClass(\'loading\');\n      self.pushQueue(0, data, el);\n    }\n\n    this.init = function(){\n      $(\'.reorder-btn\').on(\'click\', self.listen);\n    }\n  }\n\n  $(reorder.init);\n \n  \n})(jQuery)</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can also download this file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/stx_custom.js\">Github</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>to shopify order history list refer to : https://freakdesign.com.au/blogs/news/129660999-how-to-create-a-button-to-let-customers-repeat-their-previous-order</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','inherit','closed','closed','','295-revision-v1','','','2021-07-17 06:28:31','2021-07-17 06:28:31','',295,'https://www.mojoin.com/?p=412',0,'revision','',0),(413,1,'2021-07-17 07:49:23','2021-07-17 07:49:23','<!-- wp:paragraph -->\n<p>As we all know Reorder or Buy Again functionality is a very easy way to increase your profit and very convenient for customers as well. but unfortunately, the Free Shopify themes do not include Reorder or Buy Again shortcut in the customer account and order history panel.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you are struggling with this tough job, this article is just for you. I will show you how to add Reorder or Buy Again button into your customer account and the order history page of your Shopify store step by step.  Let us take Shopify free <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Debut theme</a> as an example. for all others, the backend logic is very similar.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong><a href=\"#step1-add-cjf\" title=\"#step1-add-cjf\">Step 1:  add customize javascript file</a></strong><br>Step 2:  add Reorder button styles<br>Step 3:  create snippets for reorder button function<br>Step 4:  render reorder button on the customer account page<br>Step 5:  render reorder button in the order history page<br>Step 6:  Test<br>Step 7:  Conclusion</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step1-add-cjf\">Step 1: add customize javascript file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Create a new js file under the Assets folder and name it as stx_custom.js.<br>Copy and paste the following code in:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">(function($) {\n  \n  \n  // stx reorder \n  this.reorder = new function(){\n    var self = this;\n\n    this.pushQueue = function(i, data, el){\n\n      //LOW STOCK -- add as many as possible if stock is below requested ammount\n      if(data[i].check_inventory){\n        data[i].quantity = Math.min(parseInt(data[i].inventory), parseInt(data[i].quantity));\n      }\n\n      $.ajax({\n        url: \'/cart/add.js\',\n        method: \'POST\',\n        data: {\n          quantity: data[i].quantity,\n          id: data[i].id\n        },\n        complete: function(res){\n          if(i >= data.length - 1){\n            //products from queue are now added to the cart -> stop loading signal and go to cart\n            el.removeClass(\'loading\');\n            window.location.href = \'/cart\';\n            return;\n          }else{\n            // Calls are async as required by Shopify Docs\n               self.pushQueue(i+1, data, el);\n          }\n        }\n      });\n    }\n\n    this.listen = function(){\n      var el = $(this);\n      var ids = el.attr(\'data-variant-ids\').split(\',\');\n      var quantities = el.attr(\'data-variant-quantities\').split(\',\');\n      var inventories = el.attr(\'data-variant-inventories\').split(\',\');\n      var inventory_policies = el.attr(\'data-variant-inventory-policies\').split(\',\');\n      var inventory_trackers = el.attr(\'data-variant-inventory-trackers\').split(\',\');\n      ids.splice(-1, 1);\n      quantities.splice(-1, 1);\n      inventories.splice(-1, 1);\n      inventory_policies.splice(-1, 1);\n      inventory_trackers.splice(-1, 1);\n\n      var data = [];\n      for(var i=0; i&lt;ids.length; i++){\n        data.push({\n          id: ids[i],\n          quantity: quantities[i],\n          inventory: inventories[i],\n          check_inventory: (inventory_policies[i] == \"deny\" &amp;&amp; inventory_trackers[i] != \"\")\n        });\n      }\n      el.addClass(\'loading\');\n      self.pushQueue(0, data, el);\n    }\n\n    this.init = function(){\n      $(\'.reorder-btn\').on(\'click\', self.listen);\n    }\n  }\n\n  $(reorder.init);\n \n  \n})(jQuery)</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can also download this file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/stx_custom.js\">Github</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>line 5: we define an object to process reorder request, it includes three functions: pushQueue, listen and init.<br>line 8: function pushQueue to call Shopify <a href=\"https://shopify.dev/api/ajax/reference/cart\">Ajax add-to-cart API</a> directly push our product into customer\'s cart.<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>to shopify order history list refer to : https://freakdesign.com.au/blogs/news/129660999-how-to-create-a-button-to-let-customers-repeat-their-previous-order</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','inherit','closed','closed','','295-revision-v1','','','2021-07-17 07:49:23','2021-07-17 07:49:23','',295,'https://www.mojoin.com/?p=413',0,'revision','',0),(414,1,'2021-07-17 07:49:44','2021-07-17 07:49:44','<!-- wp:paragraph -->\n<p>As we all know Reorder or Buy Again functionality is a very easy way to increase your profit and very convenient for customers as well. but unfortunately, the Free Shopify themes do not include Reorder or Buy Again shortcut in the customer account and order history panel.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you are struggling with this tough job, this article is just for you. I will show you how to add Reorder or Buy Again button into your customer account and the order history page of your Shopify store step by step.  Let us take Shopify free <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Debut theme</a> as an example. for all others, the backend logic is very similar.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong><a href=\"#step1-add-cjf\" title=\"#step1-add-cjf\">Step 1:  add customize javascript file</a></strong><br>Step 2:  add Reorder button styles<br>Step 3:  create snippets for reorder button function<br>Step 4:  render reorder button on the customer account page<br>Step 5:  render reorder button in the order history page<br>Step 6:  Test<br>Step 7:  Conclusion</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step1-add-cjf\">Step 1: add customize javascript file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Create a new js file under the Assets folder and name it as stx_custom.js.<br>Copy and paste the following code in:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">(function($) {\n  \n  \n  // stx reorder \n  this.reorder = new function(){\n    var self = this;\n\n    this.pushQueue = function(i, data, el){\n\n      //LOW STOCK -- add as many as possible if stock is below requested ammount\n      if(data[i].check_inventory){\n        data[i].quantity = Math.min(parseInt(data[i].inventory), parseInt(data[i].quantity));\n      }\n\n      $.ajax({\n        url: \'/cart/add.js\',\n        method: \'POST\',\n        data: {\n          quantity: data[i].quantity,\n          id: data[i].id\n        },\n        complete: function(res){\n          if(i >= data.length - 1){\n            //products from queue are now added to the cart -> stop loading signal and go to cart\n            el.removeClass(\'loading\');\n            window.location.href = \'/cart\';\n            return;\n          }else{\n            // Calls are async as required by Shopify Docs\n               self.pushQueue(i+1, data, el);\n          }\n        }\n      });\n    }\n\n    this.listen = function(){\n      var el = $(this);\n      var ids = el.attr(\'data-variant-ids\').split(\',\');\n      var quantities = el.attr(\'data-variant-quantities\').split(\',\');\n      var inventories = el.attr(\'data-variant-inventories\').split(\',\');\n      var inventory_policies = el.attr(\'data-variant-inventory-policies\').split(\',\');\n      var inventory_trackers = el.attr(\'data-variant-inventory-trackers\').split(\',\');\n      ids.splice(-1, 1);\n      quantities.splice(-1, 1);\n      inventories.splice(-1, 1);\n      inventory_policies.splice(-1, 1);\n      inventory_trackers.splice(-1, 1);\n\n      var data = [];\n      for(var i=0; i&lt;ids.length; i++){\n        data.push({\n          id: ids[i],\n          quantity: quantities[i],\n          inventory: inventories[i],\n          check_inventory: (inventory_policies[i] == \"deny\" &amp;&amp; inventory_trackers[i] != \"\")\n        });\n      }\n      el.addClass(\'loading\');\n      self.pushQueue(0, data, el);\n    }\n\n    this.init = function(){\n      $(\'.reorder-btn\').on(\'click\', self.listen);\n    }\n  }\n\n  $(reorder.init);\n \n  \n})(jQuery)</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can also download this file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/stx_custom.js\">Github</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>line 5: we define an object to process reorder request, it includes three functions: pushQueue, listen and init.<br>line 8: pushQueue function implementation to call Shopify <a href=\"https://shopify.dev/api/ajax/reference/cart\">Ajax add-to-cart API</a> directly push our product into customer\'s cart.<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>to shopify order history list refer to : https://freakdesign.com.au/blogs/news/129660999-how-to-create-a-button-to-let-customers-repeat-their-previous-order</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','inherit','closed','closed','','295-revision-v1','','','2021-07-17 07:49:44','2021-07-17 07:49:44','',295,'https://www.mojoin.com/?p=414',0,'revision','',0),(415,1,'2021-07-17 09:57:29','2021-07-17 09:57:29','<!-- wp:paragraph -->\n<p>As we all know Reorder or Buy Again functionality is a very easy way to increase your profit and very convenient for customers as well. but unfortunately, the Free Shopify themes do not include Reorder or Buy Again shortcut in the customer account and order history panel.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you are struggling with this tough job, this article is just for you. I will show you how to add Reorder or Buy Again button into your customer account and the order history page of your Shopify store step by step.  Let us take Shopify free <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Debut theme</a> as an example. for all others, the backend logic is very similar.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong><a href=\"#step1-add-cjf\" title=\"#step1-add-cjf\">Step 1:  add customize javascript file</a></strong><br>Step 2:  add Reorder button styles<br>Step 3:  create snippets for reorder button function<br>Step 4:  render reorder button on the customer account page<br>Step 5:  render reorder button in the order history page<br>Step 6:  Test<br>Step 7:  Conclusion</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step1-add-cjf\">Step 1: add customize javascript file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Create a new js file under the Assets folder and name it as stx_custom.js.<br>Copy and paste the following code in:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">(function($) {\n  \n  \n  // stx reorder \n  this.reorder = new function(){\n    var self = this;\n\n    this.pushQueue = function(i, data, el){\n\n      //LOW STOCK -- add as many as possible if stock is below requested ammount\n      if(data[i].check_inventory){\n        data[i].quantity = Math.min(parseInt(data[i].inventory), parseInt(data[i].quantity));\n      }\n\n      $.ajax({\n        url: \'/cart/add.js\',\n        method: \'POST\',\n        data: {\n          quantity: data[i].quantity,\n          id: data[i].id\n        },\n        complete: function(res){\n          if(i >= data.length - 1){\n            //products from queue are now added to the cart -> stop loading signal and go to cart\n            el.removeClass(\'loading\');\n            window.location.href = \'/cart\';\n            return;\n          }else{\n            // Calls are async as required by Shopify Docs\n               self.pushQueue(i+1, data, el);\n          }\n        }\n      });\n    }\n\n    this.listen = function(){\n      var el = $(this);\n      var ids = el.attr(\'data-variant-ids\').split(\',\');\n      var quantities = el.attr(\'data-variant-quantities\').split(\',\');\n      var inventories = el.attr(\'data-variant-inventories\').split(\',\');\n      var inventory_policies = el.attr(\'data-variant-inventory-policies\').split(\',\');\n      var inventory_trackers = el.attr(\'data-variant-inventory-trackers\').split(\',\');\n      ids.splice(-1, 1);\n      quantities.splice(-1, 1);\n      inventories.splice(-1, 1);\n      inventory_policies.splice(-1, 1);\n      inventory_trackers.splice(-1, 1);\n\n      var data = [];\n      for(var i=0; i&lt;ids.length; i++){\n        data.push({\n          id: ids[i],\n          quantity: quantities[i],\n          inventory: inventories[i],\n          check_inventory: (inventory_policies[i] == \"deny\" &amp;&amp; inventory_trackers[i] != \"\")\n        });\n      }\n      el.addClass(\'loading\');\n      self.pushQueue(0, data, el);\n    }\n\n    this.init = function(){\n      $(\'.reorder-btn\').on(\'click\', self.listen);\n    }\n  }\n\n  $(reorder.init);\n \n  \n})(jQuery)</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can also download this file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/stx_custom.js\">Github</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>let\'s explain a little bit more for the  above codes:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>line 5</strong>: we define an object to process reorder request, it includes three functions: pushQueue, listen, and init.<br><strong>line 8</strong>: pushQueue function implementation to call Shopify <a href=\"https://shopify.dev/api/ajax/reference/cart\">Ajax add-to-cart API</a> directly push our product into customer\'s cart.<br><strong>line 36</strong>: listen function to deal with reorder button click event.<br><strong>line 62</strong>: init function in order to bind the click event with our listen function.<br><strong>line 67</strong>: call init function to bind the click event when page load js file finished.<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>to shopify order history list refer to : https://freakdesign.com.au/blogs/news/129660999-how-to-create-a-button-to-let-customers-repeat-their-previous-order</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','inherit','closed','closed','','295-revision-v1','','','2021-07-17 09:57:29','2021-07-17 09:57:29','',295,'https://www.mojoin.com/?p=415',0,'revision','',0),(416,1,'2021-07-17 09:59:37','2021-07-17 09:59:37','<!-- wp:paragraph -->\n<p>As we all know Reorder or Buy Again functionality is a very easy way to increase your profit and very convenient for customers as well. but unfortunately, the Free Shopify themes do not include Reorder or Buy Again shortcut in the customer account and order history panel.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you are struggling with this tough job, this article is just for you. I will show you how to add Reorder or Buy Again button into your customer account and the order history page of your Shopify store step by step.  Let us take Shopify free <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Debut theme</a> as an example. for all others, the backend logic is very similar.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong><a href=\"#step1-add-cjf\" title=\"#step1-add-cjf\">Step 1:  add customize javascript file</a></strong><br>Step 2:  add Reorder button styles<br>Step 3:  create snippets for reorder button function<br>Step 4:  render reorder button on the customer account page<br>Step 5:  render reorder button in the order history page<br>Step 6:  Test<br>Step 7:  Conclusion</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step1-add-cjf\">Step 1: add customize javascript file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Create a new js file under the Assets folder and name it as stx_custom.js.<br>Copy and paste the following code in:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">(function($) {\n  \n  \n  // stx reorder \n  this.reorder = new function(){\n    var self = this;\n\n    this.pushQueue = function(i, data, el){\n\n      //LOW STOCK -- add as many as possible if stock is below requested ammount\n      if(data[i].check_inventory){\n        data[i].quantity = Math.min(parseInt(data[i].inventory), parseInt(data[i].quantity));\n      }\n\n      $.ajax({\n        url: \'/cart/add.js\',\n        method: \'POST\',\n        data: {\n          quantity: data[i].quantity,\n          id: data[i].id\n        },\n        complete: function(res){\n          if(i >= data.length - 1){\n            //products from queue are now added to the cart -> stop loading signal and go to cart\n            el.removeClass(\'loading\');\n            window.location.href = \'/cart\';\n            return;\n          }else{\n            // Calls are async as required by Shopify Docs\n               self.pushQueue(i+1, data, el);\n          }\n        }\n      });\n    }\n\n    this.listen = function(){\n      var el = $(this);\n      var ids = el.attr(\'data-variant-ids\').split(\',\');\n      var quantities = el.attr(\'data-variant-quantities\').split(\',\');\n      var inventories = el.attr(\'data-variant-inventories\').split(\',\');\n      var inventory_policies = el.attr(\'data-variant-inventory-policies\').split(\',\');\n      var inventory_trackers = el.attr(\'data-variant-inventory-trackers\').split(\',\');\n      ids.splice(-1, 1);\n      quantities.splice(-1, 1);\n      inventories.splice(-1, 1);\n      inventory_policies.splice(-1, 1);\n      inventory_trackers.splice(-1, 1);\n\n      var data = [];\n      for(var i=0; i&lt;ids.length; i++){\n        data.push({\n          id: ids[i],\n          quantity: quantities[i],\n          inventory: inventories[i],\n          check_inventory: (inventory_policies[i] == \"deny\" &amp;&amp; inventory_trackers[i] != \"\")\n        });\n      }\n      el.addClass(\'loading\');\n      self.pushQueue(0, data, el);\n    }\n\n    this.init = function(){\n      $(\'.reorder-btn\').on(\'click\', self.listen);\n    }\n  }\n\n  $(reorder.init);\n \n  \n})(jQuery)</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can also download this file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/stx_custom.js\">Github</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>let\'s explain a little bit more for the  above codes:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>line 5</strong>: we define an object to process reorder request, it includes three functions: pushQueue, listen, and init.<br><strong>line 8</strong>: pushQueue function implementation to call Shopify <a href=\"https://shopify.dev/api/ajax/reference/cart\">Ajax add-to-cart API</a> directly push our product into customer\'s cart.<br><strong>line 36</strong>: listen function to deal with reorder button click event.<br><strong>line 62</strong>: init function in order to bind the click event with our listen function.<br><strong>line 67</strong>: call init function to bind the click event when page load js file finished.<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step2-reorder-style\">Step 2: add Reorder button styles</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>to shopify order history list refer to : https://freakdesign.com.au/blogs/news/129660999-how-to-create-a-button-to-let-customers-repeat-their-previous-order</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','inherit','closed','closed','','295-revision-v1','','','2021-07-17 09:59:37','2021-07-17 09:59:37','',295,'https://www.mojoin.com/?p=416',0,'revision','',0),(417,1,'2021-07-17 09:59:55','2021-07-17 09:59:55','<!-- wp:paragraph -->\n<p>As we all know Reorder or Buy Again functionality is a very easy way to increase your profit and very convenient for customers as well. but unfortunately, the Free Shopify themes do not include Reorder or Buy Again shortcut in the customer account and order history panel.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you are struggling with this tough job, this article is just for you. I will show you how to add Reorder or Buy Again button into your customer account and the order history page of your Shopify store step by step.  Let us take Shopify free <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Debut theme</a> as an example. for all others, the backend logic is very similar.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong><a href=\"#step1-add-cjf\" title=\"#step1-add-cjf\">Step 1:  add customize javascript file</a></strong><br><a href=\"#step2-reorder-style\">Step 2:  add Reorder button styles</a><br>Step 3:  create snippets for reorder button function<br>Step 4:  render reorder button on the customer account page<br>Step 5:  render reorder button in the order history page<br>Step 6:  Test<br>Step 7:  Conclusion</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step1-add-cjf\">Step 1: add customize javascript file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Create a new js file under the Assets folder and name it as stx_custom.js.<br>Copy and paste the following code in:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">(function($) {\n  \n  \n  // stx reorder \n  this.reorder = new function(){\n    var self = this;\n\n    this.pushQueue = function(i, data, el){\n\n      //LOW STOCK -- add as many as possible if stock is below requested ammount\n      if(data[i].check_inventory){\n        data[i].quantity = Math.min(parseInt(data[i].inventory), parseInt(data[i].quantity));\n      }\n\n      $.ajax({\n        url: \'/cart/add.js\',\n        method: \'POST\',\n        data: {\n          quantity: data[i].quantity,\n          id: data[i].id\n        },\n        complete: function(res){\n          if(i >= data.length - 1){\n            //products from queue are now added to the cart -> stop loading signal and go to cart\n            el.removeClass(\'loading\');\n            window.location.href = \'/cart\';\n            return;\n          }else{\n            // Calls are async as required by Shopify Docs\n               self.pushQueue(i+1, data, el);\n          }\n        }\n      });\n    }\n\n    this.listen = function(){\n      var el = $(this);\n      var ids = el.attr(\'data-variant-ids\').split(\',\');\n      var quantities = el.attr(\'data-variant-quantities\').split(\',\');\n      var inventories = el.attr(\'data-variant-inventories\').split(\',\');\n      var inventory_policies = el.attr(\'data-variant-inventory-policies\').split(\',\');\n      var inventory_trackers = el.attr(\'data-variant-inventory-trackers\').split(\',\');\n      ids.splice(-1, 1);\n      quantities.splice(-1, 1);\n      inventories.splice(-1, 1);\n      inventory_policies.splice(-1, 1);\n      inventory_trackers.splice(-1, 1);\n\n      var data = [];\n      for(var i=0; i&lt;ids.length; i++){\n        data.push({\n          id: ids[i],\n          quantity: quantities[i],\n          inventory: inventories[i],\n          check_inventory: (inventory_policies[i] == \"deny\" &amp;&amp; inventory_trackers[i] != \"\")\n        });\n      }\n      el.addClass(\'loading\');\n      self.pushQueue(0, data, el);\n    }\n\n    this.init = function(){\n      $(\'.reorder-btn\').on(\'click\', self.listen);\n    }\n  }\n\n  $(reorder.init);\n \n  \n})(jQuery)</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can also download this file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/stx_custom.js\">Github</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>let\'s explain a little bit more for the  above codes:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>line 5</strong>: we define an object to process reorder request, it includes three functions: pushQueue, listen, and init.<br><strong>line 8</strong>: pushQueue function implementation to call Shopify <a href=\"https://shopify.dev/api/ajax/reference/cart\">Ajax add-to-cart API</a> directly push our product into customer\'s cart.<br><strong>line 36</strong>: listen function to deal with reorder button click event.<br><strong>line 62</strong>: init function in order to bind the click event with our listen function.<br><strong>line 67</strong>: call init function to bind the click event when page load js file finished.<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step2-reorder-style\">Step 2: add Reorder button styles</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>to shopify order history list refer to : https://freakdesign.com.au/blogs/news/129660999-how-to-create-a-button-to-let-customers-repeat-their-previous-order</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','inherit','closed','closed','','295-revision-v1','','','2021-07-17 09:59:55','2021-07-17 09:59:55','',295,'https://www.mojoin.com/?p=417',0,'revision','',0),(418,1,'2021-07-17 10:32:59','2021-07-17 10:32:59','<!-- wp:paragraph -->\n<p>As we all know Reorder or Buy Again functionality is a very easy way to increase your profit and very convenient for customers as well. but unfortunately, the Free Shopify themes do not include Reorder or Buy Again shortcut in the customer account and order history panel.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you are struggling with this tough job, this article is just for you. I will show you how to add Reorder or Buy Again button into your customer account and the order history page of your Shopify store step by step.  Let us take Shopify free <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Debut theme</a> as an example. for all others, the backend logic is very similar.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong><a href=\"#step1-add-cjf\" title=\"#step1-add-cjf\">Step 1:  add customize javascript file</a></strong><br><a href=\"#step2-reorder-style\"><strong>Step 2:  add Reorder button styles</strong></a><br>Step 3:  create snippets for reorder button function<br>Step 4:  render reorder button on the customer account page<br>Step 5:  render reorder button in the order history page<br>Step 6:  Test<br>Step 7:  Conclusion</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step1-add-cjf\">Step 1: add customize javascript file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Create a new js file under the Assets folder and name it as stx_custom.js.<br>Copy and paste the following code in:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">(function($) {\n  \n  \n  // stx reorder \n  this.reorder = new function(){\n    var self = this;\n\n    this.pushQueue = function(i, data, el){\n\n      //LOW STOCK -- add as many as possible if stock is below requested ammount\n      if(data[i].check_inventory){\n        data[i].quantity = Math.min(parseInt(data[i].inventory), parseInt(data[i].quantity));\n      }\n\n      $.ajax({\n        url: \'/cart/add.js\',\n        method: \'POST\',\n        data: {\n          quantity: data[i].quantity,\n          id: data[i].id\n        },\n        complete: function(res){\n          if(i >= data.length - 1){\n            //products from queue are now added to the cart -> stop loading signal and go to cart\n            el.removeClass(\'loading\');\n            window.location.href = \'/cart\';\n            return;\n          }else{\n            // Calls are async as required by Shopify Docs\n               self.pushQueue(i+1, data, el);\n          }\n        }\n      });\n    }\n\n    this.listen = function(){\n      var el = $(this);\n      var ids = el.attr(\'data-variant-ids\').split(\',\');\n      var quantities = el.attr(\'data-variant-quantities\').split(\',\');\n      var inventories = el.attr(\'data-variant-inventories\').split(\',\');\n      var inventory_policies = el.attr(\'data-variant-inventory-policies\').split(\',\');\n      var inventory_trackers = el.attr(\'data-variant-inventory-trackers\').split(\',\');\n      ids.splice(-1, 1);\n      quantities.splice(-1, 1);\n      inventories.splice(-1, 1);\n      inventory_policies.splice(-1, 1);\n      inventory_trackers.splice(-1, 1);\n\n      var data = [];\n      for(var i=0; i&lt;ids.length; i++){\n        data.push({\n          id: ids[i],\n          quantity: quantities[i],\n          inventory: inventories[i],\n          check_inventory: (inventory_policies[i] == \"deny\" &amp;&amp; inventory_trackers[i] != \"\")\n        });\n      }\n      el.addClass(\'loading\');\n      self.pushQueue(0, data, el);\n    }\n\n    this.init = function(){\n      $(\'.reorder-btn\').on(\'click\', self.listen);\n    }\n  }\n\n  $(reorder.init);\n \n  \n})(jQuery)</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can also download this file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/stx_custom.js\">Github</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>let\'s explain a little bit more for the  above codes:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>line 5</strong>: we define an object to process reorder request, it includes three functions: pushQueue, listen, and init.<br><strong>line 8</strong>: pushQueue function implementation to call Shopify <a href=\"https://shopify.dev/api/ajax/reference/cart\">Ajax add-to-cart API</a> directly push our product into customer\'s cart.<br><strong>line 36</strong>: listen function to deal with reorder button click event.<br><strong>line 62</strong>: init function in order to bind the click event with our listen function.<br><strong>line 67</strong>: call init function to bind the click event when page load js file finished.<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step2-reorder-style\">Step 2: add Reorder button styles</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>to shopify order history list refer to : https://freakdesign.com.au/blogs/news/129660999-how-to-create-a-button-to-let-customers-repeat-their-previous-order</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','inherit','closed','closed','','295-revision-v1','','','2021-07-17 10:32:59','2021-07-17 10:32:59','',295,'https://www.mojoin.com/?p=418',0,'revision','',0),(419,1,'2021-07-18 00:18:46','2021-07-18 00:18:46','<!-- wp:paragraph -->\n<p>As we all know Reorder or Buy Again functionality is a very easy way to increase your profit and very convenient for customers as well. but unfortunately, the Free Shopify themes do not include Reorder or Buy Again shortcut in the customer account and order history panel.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you are struggling with this tough job, this article is just for you. I will show you how to add Reorder or Buy Again button into your customer account and the order history page of your Shopify store step by step.  Let us take Shopify free <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Debut theme</a> as an example. for all others, the backend logic is very similar.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong><a href=\"#step1-add-cjf\" title=\"#step1-add-cjf\">Step 1:  add customize javascript file</a></strong><br><a href=\"#step2-reorder-style\"><strong>Step 2:  add Reorder button styles</strong></a><br>Step 3:  create snippets for reorder button function<br>Step 4:  render reorder button on the customer account page<br>Step 5:  render reorder button in the order history page<br>Step 6:  Test<br>Step 7:  Conclusion</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step1-add-cjf\">Step 1: add customize javascript file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Create a new js file under the Assets folder and name it as stx_custom.js.<br>Copy and paste the following code in:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">(function($) {\n  \n  \n  // stx reorder \n  this.reorder = new function(){\n    var self = this;\n\n    this.pushQueue = function(i, data, el){\n\n      //LOW STOCK -- add as many as possible if stock is below requested ammount\n      if(data[i].check_inventory){\n        data[i].quantity = Math.min(parseInt(data[i].inventory), parseInt(data[i].quantity));\n      }\n\n      $.ajax({\n        url: \'/cart/add.js\',\n        method: \'POST\',\n        data: {\n          quantity: data[i].quantity,\n          id: data[i].id\n        },\n        complete: function(res){\n          if(i >= data.length - 1){\n            //products from queue are now added to the cart -> stop loading signal and go to cart\n            el.removeClass(\'loading\');\n            window.location.href = \'/cart\';\n            return;\n          }else{\n            // Calls are async as required by Shopify Docs\n               self.pushQueue(i+1, data, el);\n          }\n        }\n      });\n    }\n\n    this.listen = function(){\n      var el = $(this);\n      var ids = el.attr(\'data-variant-ids\').split(\',\');\n      var quantities = el.attr(\'data-variant-quantities\').split(\',\');\n      var inventories = el.attr(\'data-variant-inventories\').split(\',\');\n      var inventory_policies = el.attr(\'data-variant-inventory-policies\').split(\',\');\n      var inventory_trackers = el.attr(\'data-variant-inventory-trackers\').split(\',\');\n      ids.splice(-1, 1);\n      quantities.splice(-1, 1);\n      inventories.splice(-1, 1);\n      inventory_policies.splice(-1, 1);\n      inventory_trackers.splice(-1, 1);\n\n      var data = [];\n      for(var i=0; i&lt;ids.length; i++){\n        data.push({\n          id: ids[i],\n          quantity: quantities[i],\n          inventory: inventories[i],\n          check_inventory: (inventory_policies[i] == \"deny\" &amp;&amp; inventory_trackers[i] != \"\")\n        });\n      }\n      el.addClass(\'loading\');\n      self.pushQueue(0, data, el);\n    }\n\n    this.init = function(){\n      $(\'.reorder-btn\').on(\'click\', self.listen);\n    }\n  }\n\n  $(reorder.init);\n \n  \n})(jQuery)</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can also download this file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/stx_custom.js\">Github</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>let\'s explain a little bit more for the  above codes:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>line 5</strong>: we define an object to process reorder request, it includes three functions: pushQueue, listen, and init.<br><strong>line 8</strong>: pushQueue function implementation to call Shopify <a href=\"https://shopify.dev/api/ajax/reference/cart\">Ajax add-to-cart API</a> directly push our product into customer\'s cart.<br><strong>line 36</strong>: listen function to deal with reorder button click event.<br><strong>line 62</strong>: init function in order to bind the click event with our listen function.<br><strong>line 67</strong>: call init function to bind the click event when page load js file finished.<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step2-reorder-style\">Step 2: add Reorder button styles</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Locate shopify store Debut theme\'s style file at:<br>Themes -> Edit Code -> Layout -> theme.liquid</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Copy and past the following lines in the end of the above theme style file.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">/* reorder style */\n\n@-webkit-keyframes rotating{\n    from{\n        -webkit-transform:rotate(0deg);\n        -o-transform:rotate(0deg);\n        transform:rotate(0deg)\n    }\n    to{\n        -webkit-transform:rotate(360deg);\n        -o-transform:rotate(360deg);\n        transform:rotate(360deg)\n    }\n}\n@keyframes rotating{\n    from{\n        -ms-transform:rotate(0deg);\n        -moz-transform:rotate(0deg);\n        -webkit-transform:rotate(0deg);\n        -o-transform:rotate(0deg);\n        transform:rotate(0deg)\n    }\n    to{\n        -ms-transform:rotate(360deg);\n        -moz-transform:rotate(360deg);\n        -webkit-transform:rotate(360deg);\n        -o-transform:rotate(360deg);\n        transform:rotate(360deg)\n    }\n}\n\n\n.pt-spinner {\n    -webkit-animation: rotating .5s linear infinite;\n    animation: rotating .5s linear infinite;\n    height: 100%;\n  \n}\n\n.pt-spinner-container{\n  display: none;\n  height: 22px;\n  margin-top: -4px;\n}\n\n.reorder-btn{\n  width: 100px;\n  height: 38px;\n  display: inline-block;\n  padding: 12px 14px 9px;\n  margin: 0;\n  line-height: 1;\n  text-align: center;\n  vertical-align: middle;\n  white-space: nowrap;\n  cursor: pointer;\n  border: 1px solid transparent;\n  border-radius: 2px;\n  font-size: 13px;\n  background-color: #fdb819;\n  color: #000;\n  -webkit-transition: background-color 0.2s ease-out;\n  -moz-transition: background-color 0.2s ease-out;\n  -ms-transition: background-color 0.2s ease-out;\n  -o-transition: background-color 0.2s ease-out;\n  transition: background-color 0.2s ease-out;\n}\n.reorder-btn:hover{\n  background-color: #fdb819;\n}\n\n\n.reorder-btn.loading .pt-spinner-container{\n  display: inline-block;\n}\n\n.reorder-btn.loading .pt-reorder-text{\n  display: none;\n}\n/* reorder style end */</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can also get this content from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/stx_reorder_style.css\">Github</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>to shopify order history list refer to : https://freakdesign.com.au/blogs/news/129660999-how-to-create-a-button-to-let-customers-repeat-their-previous-order</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','inherit','closed','closed','','295-revision-v1','','','2021-07-18 00:18:46','2021-07-18 00:18:46','',295,'https://www.mojoin.com/?p=419',0,'revision','',0),(420,1,'2021-07-18 04:49:15','2021-07-18 04:49:15','','reorder-button-in-customer-account','','inherit','open','closed','','reorder-button-in-customer-account','','','2021-07-18 04:49:15','2021-07-18 04:49:15','',295,'https://www.mojoin.com/wp-content/uploads/2021/07/reorder-button-in-customer-account.png',0,'attachment','image/png',0),(421,1,'2021-07-18 04:59:00','2021-07-18 04:59:00','','reorder-button-in-customer-order','','inherit','open','closed','','reorder-button-in-customer-order','','','2021-07-18 04:59:00','2021-07-18 04:59:00','',295,'https://www.mojoin.com/wp-content/uploads/2021/07/reorder-button-in-customer-order.png',0,'attachment','image/png',0),(422,1,'2021-07-18 05:13:27','2021-07-18 05:13:27','','reorder-button-inyouraccount','','inherit','open','closed','','reorder-button-inyouraccount','','','2021-07-18 05:13:27','2021-07-18 05:13:27','',295,'https://www.mojoin.com/wp-content/uploads/2021/07/reorder-button-inyouraccount.png',0,'attachment','image/png',0),(423,1,'2021-07-18 05:17:18','2021-07-18 05:17:18','','reorder-button-in-order-details','','inherit','open','closed','','reorder-button-in-order-details','','','2021-07-18 05:17:18','2021-07-18 05:17:18','',295,'https://www.mojoin.com/wp-content/uploads/2021/07/reorder-button-in-order-details.png',0,'attachment','image/png',0),(424,1,'2021-07-18 05:34:41','2021-07-18 05:34:41','<!-- wp:paragraph -->\n<p>As we all know Reorder or Buy Again functionality is a very easy way to increase your profit and very convenient for customers as well. but unfortunately, the Free Shopify themes do not include Reorder or Buy Again shortcut in the customer account and order history panel.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you are struggling with this tough job, this article is just for you. I will show you how to add Reorder or Buy Again button into your customer account and the order details page of your Shopify store step by step.  Let us take Shopify free <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Debut theme</a> as an example. for all others, the backend logic is very similar. You can tailor as your requirement. if you can\'t get it, do not hesitate to <a href=\"https://www.mojoin.com/about-us/\">contact us</a>. we would like to help you out.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong><a href=\"#step1-add-cjf\" title=\"#step1-add-cjf\">Step 1:  add customize javascript file</a></strong><br><a href=\"#step2-reorder-style\"><strong>Step 2:  add Reorder button styles</strong></a><br><strong><a href=\"#step3-reorder-button-func\">Step 3:  create snippets for reorder button function</a></strong><br><strong><a href=\"#step4-reorder-in-account\">Step 4:  render reorder button on the customer account page</a></strong><br><strong><a href=\"#step5-reoder-button-inorder\">Step 5:  render reorder button in the order details page</a></strong><br><strong><a href=\"#step6-test\">Step 6:  Test</a></strong><br><strong><a href=\"#step7-conclusion\">Step 7:  Conclusion</a></strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step1-add-cjf\">Step 1: add customize javascript file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Create a new js file under the Assets folder and name it stx_custom.js. your file location will be :<br><strong>Themes </strong>-&gt; <strong>Edit Code</strong> -&gt; <strong>Assets </strong>-&gt; <strong>stx_custom.js</strong><br>Copy and paste the following code in:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">(function($) {\n  \n  \n  // stx reorder \n  this.reorder = new function(){\n    var self = this;\n\n    this.pushQueue = function(i, data, el){\n\n      //LOW STOCK -- add as many as possible if stock is below requested ammount\n      if(data[i].check_inventory){\n        data[i].quantity = Math.min(parseInt(data[i].inventory), parseInt(data[i].quantity));\n      }\n\n      $.ajax({\n        url: \'/cart/add.js\',\n        method: \'POST\',\n        data: {\n          quantity: data[i].quantity,\n          id: data[i].id\n        },\n        complete: function(res){\n          if(i >= data.length - 1){\n            //products from queue are now added to the cart -> stop loading signal and go to cart\n            el.removeClass(\'loading\');\n            window.location.href = \'/cart\';\n            return;\n          }else{\n            // Calls are async as required by Shopify Docs\n               self.pushQueue(i+1, data, el);\n          }\n        }\n      });\n    }\n\n    this.listen = function(){\n      var el = $(this);\n      var ids = el.attr(\'data-variant-ids\').split(\',\');\n      var quantities = el.attr(\'data-variant-quantities\').split(\',\');\n      var inventories = el.attr(\'data-variant-inventories\').split(\',\');\n      var inventory_policies = el.attr(\'data-variant-inventory-policies\').split(\',\');\n      var inventory_trackers = el.attr(\'data-variant-inventory-trackers\').split(\',\');\n      ids.splice(-1, 1);\n      quantities.splice(-1, 1);\n      inventories.splice(-1, 1);\n      inventory_policies.splice(-1, 1);\n      inventory_trackers.splice(-1, 1);\n\n      var data = [];\n      for(var i=0; i&lt;ids.length; i++){\n        data.push({\n          id: ids[i],\n          quantity: quantities[i],\n          inventory: inventories[i],\n          check_inventory: (inventory_policies[i] == \"deny\" &amp;&amp; inventory_trackers[i] != \"\")\n        });\n      }\n      el.addClass(\'loading\');\n      self.pushQueue(0, data, el);\n    }\n\n    this.init = function(){\n      $(\'.reorder-btn\').on(\'click\', self.listen);\n    }\n  }\n\n  $(reorder.init);\n \n  \n})(jQuery)</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can also download this file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/stx_custom.js\">Github</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>let\'s explain a little bit more for the  above codes:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>line 5</strong>: we define an object to process reorder request, it includes three functions: pushQueue, listen, and init.<br><strong>line 8</strong>: pushQueue function implementation to call Shopify <a href=\"https://shopify.dev/api/ajax/reference/cart\">Ajax add-to-cart API</a> directly push our product into customer\'s cart.<br><strong>line 36</strong>: listen function to deal with reorder button click event.<br><strong>line 62</strong>: init function in order to bind the click event with our listen function.<br><strong>line 67</strong>: call init function to bind the click event when page load js file finished.<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step2-reorder-style\">Step 2: add Reorder button styles</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Locate shopify store Debut theme\'s style file at:<br><strong>Themes </strong>-&gt; <strong>Edit Code</strong> -&gt; <strong>Layout</strong> -&gt; <strong>theme.liquid</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Copy and past the following lines in the end of the above theme style liquid file.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">/* reorder style */\n\n@-webkit-keyframes rotating{\n    from{\n        -webkit-transform:rotate(0deg);\n        -o-transform:rotate(0deg);\n        transform:rotate(0deg)\n    }\n    to{\n        -webkit-transform:rotate(360deg);\n        -o-transform:rotate(360deg);\n        transform:rotate(360deg)\n    }\n}\n@keyframes rotating{\n    from{\n        -ms-transform:rotate(0deg);\n        -moz-transform:rotate(0deg);\n        -webkit-transform:rotate(0deg);\n        -o-transform:rotate(0deg);\n        transform:rotate(0deg)\n    }\n    to{\n        -ms-transform:rotate(360deg);\n        -moz-transform:rotate(360deg);\n        -webkit-transform:rotate(360deg);\n        -o-transform:rotate(360deg);\n        transform:rotate(360deg)\n    }\n}\n\n\n.pt-spinner {\n    -webkit-animation: rotating .5s linear infinite;\n    animation: rotating .5s linear infinite;\n    height: 100%;\n  \n}\n\n.pt-spinner-container{\n  display: none;\n  height: 22px;\n  margin-top: -4px;\n}\n\n.reorder-btn{\n  width: 100px;\n  height: 38px;\n  display: inline-block;\n  padding: 12px 14px 9px;\n  margin: 0;\n  line-height: 1;\n  text-align: center;\n  vertical-align: middle;\n  white-space: nowrap;\n  cursor: pointer;\n  border: 1px solid transparent;\n  border-radius: 2px;\n  font-size: 13px;\n  background-color: #fdb819;\n  color: #000;\n  -webkit-transition: background-color 0.2s ease-out;\n  -moz-transition: background-color 0.2s ease-out;\n  -ms-transition: background-color 0.2s ease-out;\n  -o-transition: background-color 0.2s ease-out;\n  transition: background-color 0.2s ease-out;\n}\n.reorder-btn:hover{\n  background-color: #fdb819;\n}\n\n\n.reorder-btn.loading .pt-spinner-container{\n  display: inline-block;\n}\n\n.reorder-btn.loading .pt-reorder-text{\n  display: none;\n}\n/* reorder style end */</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can also get this content from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/stx_reorder_style.css\">Github</a>.<br>here we define the reorder button style and effect when you click the button.<br>obviously you can customize them as your need.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step3-reorder-button-func\">Step 3: create snippets for reorder button function</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Create a new snippet file called stx_reorder.liquid at :<br><strong>Themes </strong>-&gt; <strong>Edit Code</strong> -&gt; <strong>Snippets</strong> -&gt; <strong>stx_reorder.liquid</strong><br>Copy and paste the following codes in :</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% capture variant_ids %}{% for line_item in order.line_items %}{{ line_item.variant_id }},{% endfor %}{% endcapture %}\n{% capture variant_quantities %}{% for line_item in order.line_items %}{{ line_item.quantity }},{% endfor %}{% endcapture %}\n{% capture variant_inventories %}{% for line_item in order.line_items %}{{ line_item.variant.inventory_quantity }},{% endfor %}{% endcapture %}\n{% capture variant_inventory_policies %}{% for line_item in order.line_items %}{{ line_item.variant.inventory_policy }},{% endfor %}{% endcapture %}\n{% capture variant_inventory_trackers %}{% for line_item in order.line_items %}{{ line_item.variant.inventory_management }},{% endfor %}{% endcapture %}\n\n&lt;div class=\"reorder-btn btn flip-front\"\n    data-variant-ids=\"{{ variant_ids }}\"\n    data-variant-quantities=\"{{ variant_quantities }}\"\n    data-variant-inventories=\"{{ variant_inventories }}\"\n    data-variant-inventory-policies=\"{{ variant_inventory_policies }}\"\n    data-variant-inventory-trackers=\"{{ variant_inventory_trackers }}\">\n  &lt;span class=\"pt-reorder-text\">REORDER&lt;/span>\n  &lt;span class=\"pt-spinner-container\">\n    &lt;svg class=\"pt-spinner\" viewBox=\"0 0 20 20\" aria-label=\"Loading\" role=\"status\">\n      &lt;path d=\"M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z\" style=\"fill: white;\">&lt;/path>\n    &lt;/svg>\n  &lt;/span>\n&lt;/div>\n</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>line 1-5</strong>: get the product variant data from <a href=\"https://shopify.dev/api/liquid/objects/line_item\">line_item</a> object of your <a href=\"https://shopify.dev/api/liquid/objects/order\">order</a> object . as you can see we need you pass the order object in.<br><strong>line 7-12</strong>: save the product variant data in Reorder button <a href=\"https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes\">data-* attributes</a>, once reorder button clicked will get them and push to Shopify cart backend.<br><strong>line 13</strong>: Reorder button name, whatever name you like, you can put here, for example : Buy Me Again.<br><strong>line 14-17</strong>: loading effect when reorder button clicked, implemented with <a href=\"https://www.w3schools.com/html/html5_svg.asp\">SVG</a> graphics element.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step4-reorder-in-account\">Step 4: render reorder button on the customer account page</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Add the following line :<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;td>{% render \"stx_reorder\" order:order %}&lt;/td></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>into your customer account template file:<br><strong>Themes</strong> -&gt; <strong>Edit Code</strong> -&gt; <strong>Templates </strong>-&gt; <strong>customers/account.liquid</strong><br>at <strong>line 31</strong>, just in the order line loop.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Once you done, you account liquid file will look like this:<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":420,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/reorder-button-in-customer-account.png\" alt=\"\" class=\"wp-image-420\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2 id=\"step5-reoder-button-inorder\">Step 5: render reorder button in the order details page</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Add the following line :<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"stx-reorder-button\">{% render \"stx_reorder\" %}&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>into your customer account template file:<br><strong>Themes</strong> -&gt; <strong>Edit Code</strong> -&gt; <strong>Templates </strong>-&gt; <strong>customers/order.liquid</strong><br>at around <strong>line 209</strong>，if you have changed the original file, please refer to the following screenshot to put it at the right location.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Once you done, you order liquid file will look like this:<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":421,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/reorder-button-in-customer-order.png\" alt=\"\" class=\"wp-image-421\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2 id=\"step6-test\">Step 6: Test</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>if all are correct , now you can login your store and visit your account, you will see reorder button in your order history table as below screenshot shown:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":422,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/reorder-button-inyouraccount.png\" alt=\"\" class=\"wp-image-422\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>click reorder button, the order product will be added into your Shopify cart and your will be redirected to the cart page.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In your order details page , reorder button will be end of order data table, looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p> </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":423,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/reorder-button-in-order-details.png\" alt=\"\" class=\"wp-image-423\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Actually you can put the button wherever you want, you just need to modify your customers/order.liquid file.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step7-conclusion\">Step 7: Conclusion</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>In this guide, I show you how to add Reorder or Buy Again button in Shopify account and order details page from scratch. In this way your customer can re-purchase their favourite products quickly from their account or purchased history which means we save customer\'s time and you have more chance to increase your profit from your existing customers. If you got any problems please  <a href=\"https://www.mojoin.com/about-us/\">let us</a> know.</p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','inherit','closed','closed','','295-revision-v1','','','2021-07-18 05:34:41','2021-07-18 05:34:41','',295,'https://www.mojoin.com/?p=424',0,'revision','',0),(425,1,'2021-07-18 05:40:49','2021-07-18 05:40:49','<!-- wp:paragraph -->\n<p>As we all know Reorder or Buy Again functionality is a very easy way to increase your profit and very convenient for customers as well. but unfortunately, the Free Shopify themes do not include Reorder or Buy Again shortcut in the customer account and order history panel.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you are struggling with this tough job, this article is just for you. I will show you how to add Reorder or Buy Again button into your customer account and the order details page of your Shopify store step by step.  Let us take Shopify free <a href=\"https://themes.shopify.com/themes/debut/styles/default\">Debut theme</a> as an example. for all others, the backend logic is very similar. You can tailor as your requirement. if you can\'t get it, do not hesitate to <a href=\"https://www.mojoin.com/about-us/\">contact us</a>. we would like to help you out.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong><a href=\"#step1-add-cjf\" title=\"#step1-add-cjf\">Step 1:  add customize javascript file</a></strong><br><a href=\"#step2-reorder-style\"><strong>Step 2:  add Reorder button styles</strong></a><br><strong><a href=\"#step3-reorder-button-func\">Step 3:  create snippets for reorder button function</a></strong><br><strong><a href=\"#step4-reorder-in-account\">Step 4:  render reorder button on the customer account page</a></strong><br><strong><a href=\"#step5-reoder-button-inorder\">Step 5:  render reorder button in the order details page</a></strong><br><strong><a href=\"#step6-test\">Step 6:  Test</a></strong><br><strong><a href=\"#step7-conclusion\">Step 7:  Conclusion</a></strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step1-add-cjf\">Step 1: add customize javascript file</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Create a new js file under the Assets folder and name it stx_custom.js. your file location will be :<br><strong>Themes </strong>-&gt; <strong>Edit Code</strong> -&gt; <strong>Assets </strong>-&gt; <strong>stx_custom.js</strong><br>Copy and paste the following code in:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">(function($) {\n  \n  \n  // stx reorder \n  this.reorder = new function(){\n    var self = this;\n\n    this.pushQueue = function(i, data, el){\n\n      //LOW STOCK -- add as many as possible if stock is below requested ammount\n      if(data[i].check_inventory){\n        data[i].quantity = Math.min(parseInt(data[i].inventory), parseInt(data[i].quantity));\n      }\n\n      $.ajax({\n        url: \'/cart/add.js\',\n        method: \'POST\',\n        data: {\n          quantity: data[i].quantity,\n          id: data[i].id\n        },\n        complete: function(res){\n          if(i >= data.length - 1){\n            //products from queue are now added to the cart -> stop loading signal and go to cart\n            el.removeClass(\'loading\');\n            window.location.href = \'/cart\';\n            return;\n          }else{\n            // Calls are async as required by Shopify Docs\n               self.pushQueue(i+1, data, el);\n          }\n        }\n      });\n    }\n\n    this.listen = function(){\n      var el = $(this);\n      var ids = el.attr(\'data-variant-ids\').split(\',\');\n      var quantities = el.attr(\'data-variant-quantities\').split(\',\');\n      var inventories = el.attr(\'data-variant-inventories\').split(\',\');\n      var inventory_policies = el.attr(\'data-variant-inventory-policies\').split(\',\');\n      var inventory_trackers = el.attr(\'data-variant-inventory-trackers\').split(\',\');\n      ids.splice(-1, 1);\n      quantities.splice(-1, 1);\n      inventories.splice(-1, 1);\n      inventory_policies.splice(-1, 1);\n      inventory_trackers.splice(-1, 1);\n\n      var data = [];\n      for(var i=0; i&lt;ids.length; i++){\n        data.push({\n          id: ids[i],\n          quantity: quantities[i],\n          inventory: inventories[i],\n          check_inventory: (inventory_policies[i] == \"deny\" &amp;&amp; inventory_trackers[i] != \"\")\n        });\n      }\n      el.addClass(\'loading\');\n      self.pushQueue(0, data, el);\n    }\n\n    this.init = function(){\n      $(\'.reorder-btn\').on(\'click\', self.listen);\n    }\n  }\n\n  $(reorder.init);\n \n  \n})(jQuery)</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can also download this file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/stx_custom.js\">Github</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>let\'s explain a little bit more for the  above codes:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>line 5</strong>: we define an object to process reorder request, it includes three functions: pushQueue, listen, and init.<br><strong>line 8</strong>: pushQueue function implementation to call Shopify <a href=\"https://shopify.dev/api/ajax/reference/cart\">Ajax add-to-cart API</a> directly push our product into customer\'s cart.<br><strong>line 36</strong>: listen function to deal with reorder button click event.<br><strong>line 62</strong>: init function in order to bind the click event with our listen function.<br><strong>line 67</strong>: call init function to bind the click event when page load js file finished.<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step2-reorder-style\">Step 2: add Reorder button styles</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Locate shopify store Debut theme\'s style file at:<br><strong>Themes </strong>-&gt; <strong>Edit Code</strong> -&gt; <strong>Layout</strong> -&gt; <strong>theme.liquid</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Copy and past the following lines in the end of the above theme style liquid file.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">/* reorder style */\n\n@-webkit-keyframes rotating{\n    from{\n        -webkit-transform:rotate(0deg);\n        -o-transform:rotate(0deg);\n        transform:rotate(0deg)\n    }\n    to{\n        -webkit-transform:rotate(360deg);\n        -o-transform:rotate(360deg);\n        transform:rotate(360deg)\n    }\n}\n@keyframes rotating{\n    from{\n        -ms-transform:rotate(0deg);\n        -moz-transform:rotate(0deg);\n        -webkit-transform:rotate(0deg);\n        -o-transform:rotate(0deg);\n        transform:rotate(0deg)\n    }\n    to{\n        -ms-transform:rotate(360deg);\n        -moz-transform:rotate(360deg);\n        -webkit-transform:rotate(360deg);\n        -o-transform:rotate(360deg);\n        transform:rotate(360deg)\n    }\n}\n\n\n.pt-spinner {\n    -webkit-animation: rotating .5s linear infinite;\n    animation: rotating .5s linear infinite;\n    height: 100%;\n  \n}\n\n.pt-spinner-container{\n  display: none;\n  height: 22px;\n  margin-top: -4px;\n}\n\n.reorder-btn{\n  width: 100px;\n  height: 38px;\n  display: inline-block;\n  padding: 12px 14px 9px;\n  margin: 0;\n  line-height: 1;\n  text-align: center;\n  vertical-align: middle;\n  white-space: nowrap;\n  cursor: pointer;\n  border: 1px solid transparent;\n  border-radius: 2px;\n  font-size: 13px;\n  background-color: #fdb819;\n  color: #000;\n  -webkit-transition: background-color 0.2s ease-out;\n  -moz-transition: background-color 0.2s ease-out;\n  -ms-transition: background-color 0.2s ease-out;\n  -o-transition: background-color 0.2s ease-out;\n  transition: background-color 0.2s ease-out;\n}\n.reorder-btn:hover{\n  background-color: #fdb819;\n}\n\n\n.reorder-btn.loading .pt-spinner-container{\n  display: inline-block;\n}\n\n.reorder-btn.loading .pt-reorder-text{\n  display: none;\n}\n/* reorder style end */</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can also get this content from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/stx_reorder_style.css\">Github</a>.<br>here we define the reorder button style and effect when you click the button.<br>obviously you can customize them as your need.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step3-reorder-button-func\">Step 3: create snippets for reorder button function</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Create a new snippet file called stx_reorder.liquid at :<br><strong>Themes </strong>-&gt; <strong>Edit Code</strong> -&gt; <strong>Snippets</strong> -&gt; <strong>stx_reorder.liquid</strong><br>Copy and paste the following codes in :</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% capture variant_ids %}{% for line_item in order.line_items %}{{ line_item.variant_id }},{% endfor %}{% endcapture %}\n{% capture variant_quantities %}{% for line_item in order.line_items %}{{ line_item.quantity }},{% endfor %}{% endcapture %}\n{% capture variant_inventories %}{% for line_item in order.line_items %}{{ line_item.variant.inventory_quantity }},{% endfor %}{% endcapture %}\n{% capture variant_inventory_policies %}{% for line_item in order.line_items %}{{ line_item.variant.inventory_policy }},{% endfor %}{% endcapture %}\n{% capture variant_inventory_trackers %}{% for line_item in order.line_items %}{{ line_item.variant.inventory_management }},{% endfor %}{% endcapture %}\n\n&lt;div class=\"reorder-btn btn flip-front\"\n    data-variant-ids=\"{{ variant_ids }}\"\n    data-variant-quantities=\"{{ variant_quantities }}\"\n    data-variant-inventories=\"{{ variant_inventories }}\"\n    data-variant-inventory-policies=\"{{ variant_inventory_policies }}\"\n    data-variant-inventory-trackers=\"{{ variant_inventory_trackers }}\">\n  &lt;span class=\"pt-reorder-text\">REORDER&lt;/span>\n  &lt;span class=\"pt-spinner-container\">\n    &lt;svg class=\"pt-spinner\" viewBox=\"0 0 20 20\" aria-label=\"Loading\" role=\"status\">\n      &lt;path d=\"M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z\" style=\"fill: white;\">&lt;/path>\n    &lt;/svg>\n  &lt;/span>\n&lt;/div>\n</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>line 1-5</strong>: get the product variant data from <a href=\"https://shopify.dev/api/liquid/objects/line_item\">line_item</a> object of your <a href=\"https://shopify.dev/api/liquid/objects/order\">order</a> object . as you can see we need you pass the order object in.<br><strong>line 7-12</strong>: save the product variant data in Reorder button <a href=\"https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes\">data-* attributes</a>, once reorder button clicked will get them and push to Shopify cart backend.<br><strong>line 13</strong>: Reorder button name, whatever name you like, you can put here, for example : Buy Me Again.<br><strong>line 14-17</strong>: loading effect when reorder button clicked, implemented with <a href=\"https://www.w3schools.com/html/html5_svg.asp\">SVG</a> graphics element.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"step4-reorder-in-account\">Step 4: render reorder button on the customer account page</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Add the following line :<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;td>{% render \"stx_reorder\" order:order %}&lt;/td></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>into your customer account template file:<br><strong>Themes</strong> -&gt; <strong>Edit Code</strong> -&gt; <strong>Templates </strong>-&gt; <strong>customers/account.liquid</strong><br>at <strong>line 31</strong>, just in the order line loop.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Once you done, you account liquid file will look like this:<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":420,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/reorder-button-in-customer-account.png\" alt=\"\" class=\"wp-image-420\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2 id=\"step5-reoder-button-inorder\">Step 5: render reorder button in the order details page</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Add the following line :<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"stx-reorder-button\">{% render \"stx_reorder\" %}&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>into your customer account template file:<br><strong>Themes</strong> -&gt; <strong>Edit Code</strong> -&gt; <strong>Templates </strong>-&gt; <strong>customers/order.liquid</strong><br>at around <strong>line 209</strong>，if you have changed the original file, please refer to the following screenshot to put it at the right location.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Once you done, you order liquid file will look like this:<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":421,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/reorder-button-in-customer-order.png\" alt=\"\" class=\"wp-image-421\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2 id=\"step6-test\">Step 6: Test</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>if all are correct , now you can login your store and visit your account, you will see reorder button in your order history table as below screenshot shown:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":422,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/reorder-button-inyouraccount.png\" alt=\"\" class=\"wp-image-422\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>click reorder button, the order product will be added into your Shopify cart and your will be redirected to the cart page.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In your order details page , reorder button will be end of order data table, looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p> </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":423,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/07/reorder-button-in-order-details.png\" alt=\"\" class=\"wp-image-423\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Actually you can put the button wherever you want, you just need to modify your customers/order.liquid file.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:html -->\n<script async=\"\" src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>\n<!-- mojoin-home-page -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-6569971233827474\" data-ad-slot=\"4992576575\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"></ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n</script>\n<!-- /wp:html -->\n\n<!-- wp:heading -->\n<h2 id=\"step7-conclusion\">Step 7: Conclusion</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>In this guide, I show you how to add Reorder or Buy Again button in Shopify account and order details page from scratch. In this way your customer can re-purchase their favourite products quickly from their account or purchased history which means we save customer\'s time and you have more chance to increase your profit from your existing customers. If you got any problems please  <a href=\"https://www.mojoin.com/about-us/\">let us</a> know.</p>\n<!-- /wp:paragraph -->','How to Add Reorder or Buy Again Button in Shopify','','inherit','closed','closed','','295-revision-v1','','','2021-07-18 05:40:49','2021-07-18 05:40:49','',295,'https://www.mojoin.com/?p=425',0,'revision','',0),(426,1,'2021-07-18 05:46:59','2021-07-18 05:46:59','','add-reorder-shopify','','inherit','open','closed','','add-reorder-shopify','','','2021-07-18 05:46:59','2021-07-18 05:46:59','',295,'https://www.mojoin.com/wp-content/uploads/2021/07/add-reorder-shopify.jpg',0,'attachment','image/jpeg',0),(428,1,'2021-08-15 05:06:24','2021-08-15 05:06:24','<!-- wp:heading -->\n<h2>Editing robots.txt.liquid</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Search engines, such as Google, Bing, normally will constantly crawl the internet in search of new data as a source for their search results. The <code>robots.txt</code> file tells search engine bots(known as crawlers), which pages to request to view from your online store. Actually, your Shopify store has a default <code>robots.txt</code> file that\'s optimal for Search Engine Optimization (<a href=\"https://en.wikipedia.org/wiki/Search_engine_optimization\">SEO</a>).</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Your sitemap is used by search engines to place your online store in the search engine results.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>On this page</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#overview\">Overview</a></li><li><a href=\"#edit-robots-txt-liquid\">Edit robots.txt.liquid</a></li><li><a href=\"#delete-robots-txt-liquid\">Delete robots.txt.liquid customizations</a></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"overview\">Overview</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>The default&nbsp;<code>robots.txt</code>&nbsp;file works for most stores, but you can edit the file through the&nbsp;<a href=\"https://shopify.dev/themes/architecture/templates/robots-txt-liquid\">robots.txt.liquid theme template</a>. You can make the following edits:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>allow or disallow certain URLs from being crawled</li><li>add crawl-delay rules for certain crawlers</li><li>add extra sitemap URLs</li><li>block certain crawlers</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>The&nbsp;<code>robots.txt</code>&nbsp;file is located at the root directory of your Shopify store\'s&nbsp;primary domain name. For example:&nbsp;<code>www.mojoin.com/robots.txt</code>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p><strong>CAUTION</strong></p><cite>This is an <strong>unsupported customization</strong>. Shopify Support can\'t help with edits to the <code>robots.txt.liquid</code> file. If you need to edit your <code>robots.txt.liquid</code> file, then you can hire a Shopify expert to edit the code for you. Incorrect use of the feature can result in loss of all traffic.</cite></blockquote>\n<!-- /wp:quote -->\n\n<!-- wp:heading -->\n<h2 id=\"edit-robots-txt-liquid\">Edit robots.txt.liquid</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>If you want to edit the&nbsp;<code>robots.txt.liquid</code>&nbsp;file, then you should work with a Shopify Expert or have expertise in code edits and SEO.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can use Liquid to add or remove directives from the <code>robots.txt.liquid</code> template. This method preserves Shopify’s ability to keep the file updated automatically in the future, and is recommended.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Remove any previous customizations or workarounds, such as using a third-party service such as Cloudflare, before you edit the&nbsp;<code>robots.txt.liquid</code>&nbsp;file.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4 id=\"steps\">Steps:</h4>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store</strong>&nbsp;&gt;&nbsp;<strong>Themes</strong>.</li><li>Click&nbsp;<strong>Actions</strong>, and then click&nbsp;<strong>Edit Code</strong>.</li><li>Click&nbsp;<strong>Add a new template</strong>, and then select&nbsp;<strong>robots</strong>.</li><li>Click&nbsp;<strong>Create template</strong>.</li><li>Make the changes that you want to make to the default template. For more information on liquid variables and common use cases, refer to Shopify\'s Developer page&nbsp;<a href=\"https://shopify.dev/themes/seo/robots-txt\">Customize robots.txt.liquid</a>.</li><li>Save changes to the&nbsp;robots.txt.liquid&nbsp;file in your published theme.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>Changes are instant, but crawlers don\'t always react immediately. You can test changes using&nbsp;<a href=\"https://support.google.com/webmasters/answer/6062598?hl=en\">Google\'s robots.txt Tester</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can also delete the contents of the template and replace it with plain text rules. This method is strongly not recommended, as rules may become out of date. If you choose this method, then Shopify can’t ensure that SEO best practices are applied to your robots.txt over time, or make changes to the file with future updates.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p><strong>NOTE</strong></p><cite>ThemeKit or command line changes will preserve the robots.txt.liquid file. Uploading a theme from within the Themes section of the Shopify admin will not import robots.txt.liquid.</cite></blockquote>\n<!-- /wp:quote -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"delete-robots-txt-liquid\">Delete robots.txt.liquid customizations</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>If you want to use the default&nbsp;<code>robots.txt</code>&nbsp;file again, then save a copy of your&nbsp;<code>robots.txt.liquid</code>&nbsp;template customizations as you need to delete the template, which can\'t be undone.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4 id=\"steps\">Steps:</h4>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store</strong>&nbsp;&gt;&nbsp;<strong>Themes</strong>.</li><li>Click&nbsp;<strong>Actions</strong>, and then click&nbsp;<strong>Edit Code</strong>.</li><li>Click&nbsp;<strong>robots.liquid</strong>, and then click&nbsp;<strong>Delete file</strong>.</li><li>If you still want to delete robots.txt.liquid, then click&nbsp;<strong>Delete file</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>You can always edit the&nbsp;<code>robots.txt.liquid</code>&nbsp;file in the future, or if you saved your past customizations, then you can redo your changes by copying over your saved previous customizations.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"\"></a></p>\n<!-- /wp:paragraph -->','Shopify Store Robots.txt can be edited now','','publish','open','open','','shopify-store-robots-txt-editable','','','2021-08-15 05:06:28','2021-08-15 05:06:28','',0,'https://www.mojoin.com/?p=428',0,'post','',0),(429,1,'2021-07-27 11:05:10','2021-07-27 11:05:10','<!-- wp:paragraph -->\n<p>https://community.shopify.com/c/Technical-Q-A/Robots-txt-Editing-support-now-available/m-p/1214502#M58669<a href=\"\"></a></p>\n<!-- /wp:paragraph -->','Robots.txt can be edited now','','inherit','closed','closed','','428-revision-v1','','','2021-07-27 11:05:10','2021-07-27 11:05:10','',428,'https://www.mojoin.com/?p=429',0,'revision','',0),(430,1,'2021-07-27 22:50:50','2021-07-27 22:50:50','<!-- wp:paragraph -->\n<p>https://community.shopify.com/c/Technical-Q-A/Robots-txt-Editing-support-now-available/m-p/1214502#M58669</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Search engines, such as Google, constantly crawl the internet in search of new data as a source for their search results. The robots.txt file tells search engine bots, known as crawlers, which pages to request to view from your online store.&nbsp;</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>All Shopify stores have a default robots.txt file that\'s optimized for Search Engine Optimization (SEO). Previously editing this file wasn’t possible but now that’s changed!&nbsp;</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>With a recent update, it’s now possible to customize your robots.txt from the optimized version that is being used currently in your shop. A few of the edits you might consider include:&nbsp;</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>Allow, or disallow certain URLs from being crawled</li><li>Adding crawl-delay rules</li><li>Adding extra sitemap URLs</li><li>Blocking certain crawlers</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4 id=\"toc-hId--685725163\">Caution</h4>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Please be mindful that this is an&nbsp;<strong>unsupported customization</strong>, and incorrectly applied edits can have significant impacts on your traffic.&nbsp; If you are encountering issues after modifying robots.txt, restoring the default robots.txt configuration is possible. For guidance on how to do this please review:&nbsp;<a href=\"https://help.shopify.com/en/manual/promoting-marketing/seo/editing-robots-txt#delete-robots-txt-liquid-customizations\" target=\"_blank\" rel=\"noreferrer noopener\">Delete robots.txt.liquid customizations</a>.&nbsp;</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you would like assistance customizing your robots.txt file you will need to hire a&nbsp;<a href=\"https://experts.shopify.com/services/marketing-and-sales/seo-and-paid-search\" target=\"_blank\" rel=\"noreferrer noopener\">Shopify Expert&nbsp;</a>as Shopify Support can not help with the edits you would like to make, nor provide feedback before implementing changes.<br><br>Check out the links below to learn more about this new feature, as well as reviewing some examples found in our developer documentation. If you have any questions about this feature leave a reply below!<br><br>If you are looking for community feedback on some edits you are looking into, consider posting a detailed message on our&nbsp;<a href=\"https://community.shopify.com/c/Technical-Q-A/bd-p/technical-qa\" target=\"_blank\" rel=\"noreferrer noopener\">Technical Q&amp;A</a>&nbsp;discussion board.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Supporting Content:</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><a href=\"https://help.shopify.com/en/manual/promoting-marketing/seo/editing-robots-txt\" target=\"_blank\" rel=\"noreferrer noopener\">Shopify Help Center</a><ul><li><a href=\"https://help.shopify.com/en/manual/promoting-marketing/seo/editing-robots-txt\" target=\"_blank\" rel=\"noreferrer noopener\">Editing robots.txt.liquid&nbsp;</a></li></ul></li><li><a href=\"https://shopify.dev/tutorials/customize-theme-customize-robots-txt-liquid\" target=\"_blank\" rel=\"noreferrer noopener\">Shopify Developers</a><ul><li><a href=\"https://shopify.dev/tutorials/customize-theme-customize-robots-txt-liquid\" target=\"_blank\" rel=\"noreferrer noopener\">Tutorial: Customize robots.txt.liquid&nbsp;</a></li><li><a href=\"https://shopify.dev/docs/themes/theme-templates/robots-txt-liquid\" target=\"_blank\" rel=\"noreferrer noopener\">Reference: robots.txt.liquid</a></li><li><a href=\"https://shopify.dev/docs/themes/liquid/reference/objects/robots\" target=\"_blank\" rel=\"noreferrer noopener\">The robots object</a></li><li><a href=\"https://shopify.dev/docs/themes/liquid/reference/objects/group\" target=\"_blank\" rel=\"noreferrer noopener\">The group object</a></li><li><a href=\"https://shopify.dev/docs/themes/liquid/reference/objects/rule\" target=\"_blank\" rel=\"noreferrer noopener\">The rule object</a></li><li><a href=\"https://shopify.dev/docs/themes/liquid/reference/objects/sitemap\" target=\"_blank\" rel=\"noreferrer noopener\">The sitemap object</a></li><li><a href=\"https://shopify.dev/docs/themes/liquid/reference/objects/user-agent\" target=\"_blank\" rel=\"noreferrer noopener\">The user_agent object</a></li></ul></li><li><a href=\"https://developers.google.com/search/docs/advanced/robots/intro\" target=\"_blank\" rel=\"noreferrer noopener\">Google Search Central</a><ul><li><a href=\"https://developers.google.com/search/docs/advanced/robots/intro\" target=\"_blank\" rel=\"noreferrer noopener\">Introduction to robots.txt</a></li></ul></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p><strong>Trevor | Community Moderator @ Shopify&nbsp;</strong><br>&nbsp;- Was my reply helpful? Click&nbsp;<strong>Like</strong>&nbsp;to let me know!&nbsp;<br>&nbsp;- Was your question answered? Mark it as an&nbsp;<strong>Accepted Solution<br></strong>&nbsp;- To learn more visit the&nbsp;<a href=\"https://bit.ly/3itITEC\">Shopify Help Center</a>&nbsp;or the&nbsp;<a href=\"https://bit.ly/3izVw0T\">Shopify Blog</a></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"\"></a></p>\n<!-- /wp:paragraph -->','Robots.txt can be edited now','','inherit','closed','closed','','428-revision-v1','','','2021-07-27 22:50:50','2021-07-27 22:50:50','',428,'https://www.mojoin.com/?p=430',0,'revision','',0),(432,1,'2021-08-08 23:42:58','0000-00-00 00:00:00','<!-- wp:paragraph -->\n<p>refer to :<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>04-29-201609:00 PM</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image -->\n<figure class=\"wp-block-image\"><img src=\"https://community.shopify.com/c/image/serverpage/image-id/557i947268C3928516C0/image-dimensions/40x40/image-coordinates/0%2C0%2C632%2C632/constrain-image/false?v=v2\" alt=\"Jason\" title=\"Jason\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://community.shopify.com/c/user/viewprofilepage/user-id/482083\"><strong>Jason</strong></a>Shopify Expert<a href=\"https://community.shopify.com/c/Shopify-Design/Making-ajax-request-to-specific-shopify-collection/td-p/219967\" target=\"_blank\" rel=\"noreferrer noopener\"></a>10360&nbsp;158&nbsp;2014</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If all your collections are the same size (being less than 50) you could just grab the data from the json endpoint. For example:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://herenotthere.ca/collections/Ottawa-Canada/products.json\">https://herenotthere.ca/collections/Ottawa-Canada/products.json</a></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.</p>\n<!-- /wp:paragraph -->','AJAX get shopify collection products','','draft','open','open','','','','','2021-08-08 23:42:58','2021-08-08 23:42:58','',0,'https://www.mojoin.com/?p=432',0,'post','',0),(433,1,'2021-08-08 23:42:57','2021-08-08 23:42:57','<!-- wp:paragraph -->\n<p>refer to :<br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>04-29-201609:00 PM</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image -->\n<figure class=\"wp-block-image\"><img src=\"https://community.shopify.com/c/image/serverpage/image-id/557i947268C3928516C0/image-dimensions/40x40/image-coordinates/0%2C0%2C632%2C632/constrain-image/false?v=v2\" alt=\"Jason\" title=\"Jason\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://community.shopify.com/c/user/viewprofilepage/user-id/482083\"><strong>Jason</strong></a>Shopify Expert<a href=\"https://community.shopify.com/c/Shopify-Design/Making-ajax-request-to-specific-shopify-collection/td-p/219967\" target=\"_blank\" rel=\"noreferrer noopener\"></a>10360&nbsp;158&nbsp;2014</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If all your collections are the same size (being less than 50) you could just grab the data from the json endpoint. For example:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://herenotthere.ca/collections/Ottawa-Canada/products.json\">https://herenotthere.ca/collections/Ottawa-Canada/products.json</a></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.</p>\n<!-- /wp:paragraph -->','AJAX get shopify collection products','','inherit','closed','closed','','432-revision-v1','','','2021-08-08 23:42:57','2021-08-08 23:42:57','',432,'https://www.mojoin.com/?p=433',0,'revision','',0),(435,1,'2021-08-15 04:40:17','2021-08-15 04:40:17','<!-- wp:heading -->\n<h2>Editing robots.txt.liquid</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Search engines, such as Google, constantly crawl the internet in search of new data as a source for their search results. The&nbsp;<code>robots.txt</code>&nbsp;file tells search engine bots, known as crawlers, which pages to request to view from your online store. All Shopify stores have a default&nbsp;<code>robots.txt</code>&nbsp;file that\'s optimal for Search Engine Optimization (SEO).</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Your sitemap is used by search engines to place your online store in the search engine results.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>On this page</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li>Overview</li><li>Edit robots.txt.liquid</li><li>Delete robots.txt.liquid customizations</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"overview\">Overview</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>The default&nbsp;<code>robots.txt</code>&nbsp;file works for most stores, but you can edit the file through the&nbsp;<a href=\"https://shopify.dev/themes/architecture/templates/robots-txt-liquid\">robots.txt.liquid theme template</a>. You can make the following edits:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>allow or disallow certain URLs from being crawled</li><li>add crawl-delay rules for certain crawlers</li><li>add extra sitemap URLs</li><li>block certain crawlers</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>The&nbsp;<code>robots.txt</code>&nbsp;file is located at the root directory of your Shopify store\'s&nbsp;<a href=\"https://help.shopify.com/manual/domains/managing-domains\">primary domain name</a>. For example:&nbsp;<code>johns-apparel.com/robots.txt</code>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4>Caution</h4>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>This is an&nbsp;<a href=\"https://help.shopify.com/en/manual/online-store/themes/theme-support#shopify-design-policy\">unsupported customization</a>. Shopify Support can\'t help with edits to the&nbsp;<code>robots.txt.liquid</code>&nbsp;file. If you need to edit your&nbsp;<code>robots.txt.liquid</code>&nbsp;file, then you can&nbsp;<a href=\"https://experts.shopify.com/\">hire a Shopify expert</a>&nbsp;to edit the code for you. Incorrect use of the feature can result in loss of all traffic.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"\"></a></p>\n<!-- /wp:paragraph -->','Shopify Store Robots.txt can be edited now','','inherit','closed','closed','','428-revision-v1','','','2021-08-15 04:40:17','2021-08-15 04:40:17','',428,'https://www.mojoin.com/?p=435',0,'revision','',0),(436,1,'2021-08-15 04:43:31','2021-08-15 04:43:31','<!-- wp:heading -->\n<h2>Editing robots.txt.liquid</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Search engines, such as Google, constantly crawl the internet in search of new data as a source for their search results. The&nbsp;<code>robots.txt</code>&nbsp;file tells search engine bots, known as crawlers, which pages to request to view from your online store. All Shopify stores have a default&nbsp;<code>robots.txt</code>&nbsp;file that\'s optimal for Search Engine Optimization (SEO).</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Your sitemap is used by search engines to place your online store in the search engine results.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>On this page</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li>Overview</li><li>Edit robots.txt.liquid</li><li>Delete robots.txt.liquid customizations</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"overview\">Overview</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>The default&nbsp;<code>robots.txt</code>&nbsp;file works for most stores, but you can edit the file through the&nbsp;<a href=\"https://shopify.dev/themes/architecture/templates/robots-txt-liquid\">robots.txt.liquid theme template</a>. You can make the following edits:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>allow or disallow certain URLs from being crawled</li><li>add crawl-delay rules for certain crawlers</li><li>add extra sitemap URLs</li><li>block certain crawlers</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>The&nbsp;<code>robots.txt</code>&nbsp;file is located at the root directory of your Shopify store\'s&nbsp;<a href=\"https://help.shopify.com/manual/domains/managing-domains\">primary domain name</a>. For example:&nbsp;<code>johns-apparel.com/robots.txt</code>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p>Caution</p><cite>This is an <a href=\"https://help.shopify.com/en/manual/online-store/themes/theme-support#shopify-design-policy\">unsupported customization</a>. Shopify Support can\'t help with edits to the <code>robots.txt.liquid</code> file. If you need to edit your <code>robots.txt.liquid</code> file, then you can <a href=\"https://experts.shopify.com/\">hire a Shopify expert</a> to edit the code for you. Incorrect use of the feature can result in loss of all traffic.</cite></blockquote>\n<!-- /wp:quote -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4>Caution</h4>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"\"></a></p>\n<!-- /wp:paragraph -->','Shopify Store Robots.txt can be edited now','','inherit','closed','closed','','428-revision-v1','','','2021-08-15 04:43:31','2021-08-15 04:43:31','',428,'https://www.mojoin.com/?p=436',0,'revision','',0),(437,1,'2021-08-15 04:43:47','2021-08-15 04:43:47','<!-- wp:heading -->\n<h2>Editing robots.txt.liquid</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Search engines, such as Google, constantly crawl the internet in search of new data as a source for their search results. The&nbsp;<code>robots.txt</code>&nbsp;file tells search engine bots, known as crawlers, which pages to request to view from your online store. All Shopify stores have a default&nbsp;<code>robots.txt</code>&nbsp;file that\'s optimal for Search Engine Optimization (SEO).</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Your sitemap is used by search engines to place your online store in the search engine results.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>On this page</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li>Overview</li><li>Edit robots.txt.liquid</li><li>Delete robots.txt.liquid customizations</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"overview\">Overview</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>The default&nbsp;<code>robots.txt</code>&nbsp;file works for most stores, but you can edit the file through the&nbsp;<a href=\"https://shopify.dev/themes/architecture/templates/robots-txt-liquid\">robots.txt.liquid theme template</a>. You can make the following edits:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>allow or disallow certain URLs from being crawled</li><li>add crawl-delay rules for certain crawlers</li><li>add extra sitemap URLs</li><li>block certain crawlers</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>The&nbsp;<code>robots.txt</code>&nbsp;file is located at the root directory of your Shopify store\'s&nbsp;<a href=\"https://help.shopify.com/manual/domains/managing-domains\">primary domain name</a>. For example:&nbsp;<code>johns-apparel.com/robots.txt</code>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p><strong>Caution</strong></p><cite>This is an <a href=\"https://help.shopify.com/en/manual/online-store/themes/theme-support#shopify-design-policy\">unsupported customization</a>. Shopify Support can\'t help with edits to the <code>robots.txt.liquid</code> file. If you need to edit your <code>robots.txt.liquid</code> file, then you can <a href=\"https://experts.shopify.com/\">hire a Shopify expert</a> to edit the code for you. Incorrect use of the feature can result in loss of all traffic.</cite></blockquote>\n<!-- /wp:quote -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4>Caution</h4>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"\"></a></p>\n<!-- /wp:paragraph -->','Shopify Store Robots.txt can be edited now','','inherit','closed','closed','','428-revision-v1','','','2021-08-15 04:43:47','2021-08-15 04:43:47','',428,'https://www.mojoin.com/?p=437',0,'revision','',0),(438,1,'2021-08-15 04:49:23','2021-08-15 04:49:23','<!-- wp:heading -->\n<h2>Editing robots.txt.liquid</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Search engines, such as Google, constantly crawl the internet in search of new data as a source for their search results. The&nbsp;<code>robots.txt</code>&nbsp;file tells search engine bots, known as crawlers, which pages to request to view from your online store. All Shopify stores have a default&nbsp;<code>robots.txt</code>&nbsp;file that\'s optimal for Search Engine Optimization (SEO).</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Your sitemap is used by search engines to place your online store in the search engine results.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>On this page</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li>Overview</li><li>Edit robots.txt.liquid</li><li>Delete robots.txt.liquid customizations</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"overview\">Overview</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>The default&nbsp;<code>robots.txt</code>&nbsp;file works for most stores, but you can edit the file through the&nbsp;<a href=\"https://shopify.dev/themes/architecture/templates/robots-txt-liquid\">robots.txt.liquid theme template</a>. You can make the following edits:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>allow or disallow certain URLs from being crawled</li><li>add crawl-delay rules for certain crawlers</li><li>add extra sitemap URLs</li><li>block certain crawlers</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>The&nbsp;<code>robots.txt</code>&nbsp;file is located at the root directory of your Shopify store\'s&nbsp;primary domain name. For example:&nbsp;<code>www.mojoin.com/robots.txt</code>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p><strong>Caution</strong></p><cite>This is an&nbsp;unsupported customization. Shopify Support can\'t help with edits to the&nbsp;<code>robots.txt.liquid</code>&nbsp;file. If you need to edit your&nbsp;<code>robots.txt.liquid</code>&nbsp;file, then you can&nbsp;hire a Shopify expert&nbsp;to edit the code for you. Incorrect use of the feature can result in loss of all traffic.</cite></blockquote>\n<!-- /wp:quote -->\n\n<!-- wp:heading -->\n<h2 id=\"edit-robots-txt-liquid\">Edit robots.txt.liquid</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>If you want to edit the&nbsp;<code>robots.txt.liquid</code>&nbsp;file, then you should work with a Shopify Expert or have expertise in code edits and SEO.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can use Liquid to add or remove directives from the <code>robots.txt.liquid</code> template. This method preserves Shopify’s ability to keep the file updated automatically in the future, and is recommended.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Remove any previous customizations or workarounds, such as using a third-party service such as Cloudflare, before you edit the&nbsp;<code>robots.txt.liquid</code>&nbsp;file.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4 id=\"steps\">Steps:</h4>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store</strong>&nbsp;&gt;&nbsp;<strong>Themes</strong>.</li><li>Click&nbsp;<strong>Actions</strong>, and then click&nbsp;<strong>Edit Code</strong>.</li><li>Click&nbsp;<strong>Add a new template</strong>, and then select&nbsp;<strong>robots</strong>.</li><li>Click&nbsp;<strong>Create template</strong>.</li><li>Make the changes that you want to make to the default template. For more information on liquid variables and common use cases, refer to Shopify\'s Developer page&nbsp;<a href=\"https://shopify.dev/themes/seo/robots-txt\">Customize robots.txt.liquid</a>.</li><li>Save changes to the&nbsp;robots.txt.liquid&nbsp;file in your published theme.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>Changes are instant, but crawlers don\'t always react immediately. You can test changes using&nbsp;<a href=\"https://support.google.com/webmasters/answer/6062598?hl=en\">Google\'s robots.txt Tester</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can also delete the contents of the template and replace it with plain text rules. This method is strongly not recommended, as rules may become out of date. If you choose this method, then Shopify can’t ensure that SEO best practices are applied to your robots.txt over time, or make changes to the file with future updates.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"\"></a></p>\n<!-- /wp:paragraph -->','Shopify Store Robots.txt can be edited now','','inherit','closed','closed','','428-revision-v1','','','2021-08-15 04:49:23','2021-08-15 04:49:23','',428,'https://www.mojoin.com/?p=438',0,'revision','',0),(439,1,'2021-08-15 04:50:01','2021-08-15 04:50:01','<!-- wp:heading -->\n<h2>Editing robots.txt.liquid</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Search engines, such as Google, constantly crawl the internet in search of new data as a source for their search results. The&nbsp;<code>robots.txt</code>&nbsp;file tells search engine bots, known as crawlers, which pages to request to view from your online store. All Shopify stores have a default&nbsp;<code>robots.txt</code>&nbsp;file that\'s optimal for Search Engine Optimization (SEO).</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Your sitemap is used by search engines to place your online store in the search engine results.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>On this page</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li>Overview</li><li>Edit robots.txt.liquid</li><li>Delete robots.txt.liquid customizations</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"overview\">Overview</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>The default&nbsp;<code>robots.txt</code>&nbsp;file works for most stores, but you can edit the file through the&nbsp;<a href=\"https://shopify.dev/themes/architecture/templates/robots-txt-liquid\">robots.txt.liquid theme template</a>. You can make the following edits:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>allow or disallow certain URLs from being crawled</li><li>add crawl-delay rules for certain crawlers</li><li>add extra sitemap URLs</li><li>block certain crawlers</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>The&nbsp;<code>robots.txt</code>&nbsp;file is located at the root directory of your Shopify store\'s&nbsp;primary domain name. For example:&nbsp;<code>www.mojoin.com/robots.txt</code>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p><strong>Caution</strong></p><cite>This is an&nbsp;unsupported customization. Shopify Support can\'t help with edits to the&nbsp;<code>robots.txt.liquid</code>&nbsp;file. If you need to edit your&nbsp;<code>robots.txt.liquid</code>&nbsp;file, then you can&nbsp;hire a Shopify expert&nbsp;to edit the code for you. Incorrect use of the feature can result in loss of all traffic.</cite></blockquote>\n<!-- /wp:quote -->\n\n<!-- wp:heading -->\n<h2 id=\"edit-robots-txt-liquid\">Edit robots.txt.liquid</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>If you want to edit the&nbsp;<code>robots.txt.liquid</code>&nbsp;file, then you should work with a Shopify Expert or have expertise in code edits and SEO.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can use Liquid to add or remove directives from the <code>robots.txt.liquid</code> template. This method preserves Shopify’s ability to keep the file updated automatically in the future, and is recommended.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Remove any previous customizations or workarounds, such as using a third-party service such as Cloudflare, before you edit the&nbsp;<code>robots.txt.liquid</code>&nbsp;file.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4 id=\"steps\">Steps:</h4>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store</strong>&nbsp;&gt;&nbsp;<strong>Themes</strong>.</li><li>Click&nbsp;<strong>Actions</strong>, and then click&nbsp;<strong>Edit Code</strong>.</li><li>Click&nbsp;<strong>Add a new template</strong>, and then select&nbsp;<strong>robots</strong>.</li><li>Click&nbsp;<strong>Create template</strong>.</li><li>Make the changes that you want to make to the default template. For more information on liquid variables and common use cases, refer to Shopify\'s Developer page&nbsp;<a href=\"https://shopify.dev/themes/seo/robots-txt\">Customize robots.txt.liquid</a>.</li><li>Save changes to the&nbsp;robots.txt.liquid&nbsp;file in your published theme.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>Changes are instant, but crawlers don\'t always react immediately. You can test changes using&nbsp;<a href=\"https://support.google.com/webmasters/answer/6062598?hl=en\">Google\'s robots.txt Tester</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can also delete the contents of the template and replace it with plain text rules. This method is strongly not recommended, as rules may become out of date. If you choose this method, then Shopify can’t ensure that SEO best practices are applied to your robots.txt over time, or make changes to the file with future updates.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p><strong>NOTE</strong></p><cite>ThemeKit or command line changes will preserve the robots.txt.liquid file. Uploading a theme from within the Themes section of the Shopify admin will not import robots.txt.liquid.</cite></blockquote>\n<!-- /wp:quote -->\n\n<!-- wp:paragraph -->\n<p><a href=\"\"></a></p>\n<!-- /wp:paragraph -->','Shopify Store Robots.txt can be edited now','','inherit','closed','closed','','428-revision-v1','','','2021-08-15 04:50:01','2021-08-15 04:50:01','',428,'https://www.mojoin.com/?p=439',0,'revision','',0),(440,1,'2021-08-15 04:52:25','2021-08-15 04:52:25','<!-- wp:heading -->\n<h2>Editing robots.txt.liquid</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Search engines, such as Google, constantly crawl the internet in search of new data as a source for their search results. The&nbsp;<code>robots.txt</code>&nbsp;file tells search engine bots, known as crawlers, which pages to request to view from your online store. All Shopify stores have a default&nbsp;<code>robots.txt</code>&nbsp;file that\'s optimal for Search Engine Optimization (SEO).</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Your sitemap is used by search engines to place your online store in the search engine results.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>On this page</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#overview\">Overview</a></li><li><a href=\"#edit-robots-txt-liquid\">Edit robots.txt.liquid</a></li><li><a href=\"#delete-robots-txt-liquid\">Delete robots.txt.liquid customizations</a></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"overview\">Overview</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>The default&nbsp;<code>robots.txt</code>&nbsp;file works for most stores, but you can edit the file through the&nbsp;<a href=\"https://shopify.dev/themes/architecture/templates/robots-txt-liquid\">robots.txt.liquid theme template</a>. You can make the following edits:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>allow or disallow certain URLs from being crawled</li><li>add crawl-delay rules for certain crawlers</li><li>add extra sitemap URLs</li><li>block certain crawlers</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>The&nbsp;<code>robots.txt</code>&nbsp;file is located at the root directory of your Shopify store\'s&nbsp;primary domain name. For example:&nbsp;<code>www.mojoin.com/robots.txt</code>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p><strong>CAUTION</strong></p><cite>This is an&nbsp;unsupported customization. Shopify Support can\'t help with edits to the&nbsp;<code>robots.txt.liquid</code>&nbsp;file. If you need to edit your&nbsp;<code>robots.txt.liquid</code>&nbsp;file, then you can&nbsp;hire a Shopify expert&nbsp;to edit the code for you. Incorrect use of the feature can result in loss of all traffic.</cite></blockquote>\n<!-- /wp:quote -->\n\n<!-- wp:heading -->\n<h2 id=\"edit-robots-txt-liquid\">Edit robots.txt.liquid</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>If you want to edit the&nbsp;<code>robots.txt.liquid</code>&nbsp;file, then you should work with a Shopify Expert or have expertise in code edits and SEO.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can use Liquid to add or remove directives from the <code>robots.txt.liquid</code> template. This method preserves Shopify’s ability to keep the file updated automatically in the future, and is recommended.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Remove any previous customizations or workarounds, such as using a third-party service such as Cloudflare, before you edit the&nbsp;<code>robots.txt.liquid</code>&nbsp;file.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4 id=\"steps\">Steps:</h4>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store</strong>&nbsp;&gt;&nbsp;<strong>Themes</strong>.</li><li>Click&nbsp;<strong>Actions</strong>, and then click&nbsp;<strong>Edit Code</strong>.</li><li>Click&nbsp;<strong>Add a new template</strong>, and then select&nbsp;<strong>robots</strong>.</li><li>Click&nbsp;<strong>Create template</strong>.</li><li>Make the changes that you want to make to the default template. For more information on liquid variables and common use cases, refer to Shopify\'s Developer page&nbsp;<a href=\"https://shopify.dev/themes/seo/robots-txt\">Customize robots.txt.liquid</a>.</li><li>Save changes to the&nbsp;robots.txt.liquid&nbsp;file in your published theme.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>Changes are instant, but crawlers don\'t always react immediately. You can test changes using&nbsp;<a href=\"https://support.google.com/webmasters/answer/6062598?hl=en\">Google\'s robots.txt Tester</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can also delete the contents of the template and replace it with plain text rules. This method is strongly not recommended, as rules may become out of date. If you choose this method, then Shopify can’t ensure that SEO best practices are applied to your robots.txt over time, or make changes to the file with future updates.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p><strong>NOTE</strong></p><cite>ThemeKit or command line changes will preserve the robots.txt.liquid file. Uploading a theme from within the Themes section of the Shopify admin will not import robots.txt.liquid.</cite></blockquote>\n<!-- /wp:quote -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"delete-robots-txt-liquid\">Delete robots.txt.liquid customizations</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>If you want to use the default&nbsp;<code>robots.txt</code>&nbsp;file again, then save a copy of your&nbsp;<code>robots.txt.liquid</code>&nbsp;template customizations as you need to delete the template, which can\'t be undone.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4 id=\"steps\">Steps:</h4>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store</strong>&nbsp;&gt;&nbsp;<strong>Themes</strong>.</li><li>Click&nbsp;<strong>Actions</strong>, and then click&nbsp;<strong>Edit Code</strong>.</li><li>Click&nbsp;<strong>robots.liquid</strong>, and then click&nbsp;<strong>Delete file</strong>.</li><li>If you still want to delete robots.txt.liquid, then click&nbsp;<strong>Delete file</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>You can always edit the&nbsp;<code>robots.txt.liquid</code>&nbsp;file in the future, or if you saved your past customizations, then you can redo your changes by copying over your saved previous customizations.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"\"></a></p>\n<!-- /wp:paragraph -->','Shopify Store Robots.txt can be edited now','','inherit','closed','closed','','428-revision-v1','','','2021-08-15 04:52:25','2021-08-15 04:52:25','',428,'https://www.mojoin.com/?p=440',0,'revision','',0),(441,1,'2021-08-15 04:55:47','2021-08-15 04:55:47','<!-- wp:heading -->\n<h2>Editing robots.txt.liquid</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Search engines, such as Google, Bing, normally will constantly crawl the internet in search of new data as a source for their search results. The <code>robots.txt</code> file tells search engine bots(known as crawlers), which pages to request to view from your online store. Actually, your Shopify store has a default <code>robots.txt</code> file that\'s optimal for Search Engine Optimization (<a href=\"https://en.wikipedia.org/wiki/Search_engine_optimization\">SEO</a>).</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Your sitemap is used by search engines to place your online store in the search engine results.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>On this page</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#overview\">Overview</a></li><li><a href=\"#edit-robots-txt-liquid\">Edit robots.txt.liquid</a></li><li><a href=\"#delete-robots-txt-liquid\">Delete robots.txt.liquid customizations</a></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"overview\">Overview</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>The default&nbsp;<code>robots.txt</code>&nbsp;file works for most stores, but you can edit the file through the&nbsp;<a href=\"https://shopify.dev/themes/architecture/templates/robots-txt-liquid\">robots.txt.liquid theme template</a>. You can make the following edits:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>allow or disallow certain URLs from being crawled</li><li>add crawl-delay rules for certain crawlers</li><li>add extra sitemap URLs</li><li>block certain crawlers</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>The&nbsp;<code>robots.txt</code>&nbsp;file is located at the root directory of your Shopify store\'s&nbsp;primary domain name. For example:&nbsp;<code>www.mojoin.com/robots.txt</code>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p><strong>CAUTION</strong></p><cite>This is an&nbsp;unsupported customization. Shopify Support can\'t help with edits to the&nbsp;<code>robots.txt.liquid</code>&nbsp;file. If you need to edit your&nbsp;<code>robots.txt.liquid</code>&nbsp;file, then you can&nbsp;hire a Shopify expert&nbsp;to edit the code for you. Incorrect use of the feature can result in loss of all traffic.</cite></blockquote>\n<!-- /wp:quote -->\n\n<!-- wp:heading -->\n<h2 id=\"edit-robots-txt-liquid\">Edit robots.txt.liquid</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>If you want to edit the&nbsp;<code>robots.txt.liquid</code>&nbsp;file, then you should work with a Shopify Expert or have expertise in code edits and SEO.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can use Liquid to add or remove directives from the <code>robots.txt.liquid</code> template. This method preserves Shopify’s ability to keep the file updated automatically in the future, and is recommended.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Remove any previous customizations or workarounds, such as using a third-party service such as Cloudflare, before you edit the&nbsp;<code>robots.txt.liquid</code>&nbsp;file.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4 id=\"steps\">Steps:</h4>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store</strong>&nbsp;&gt;&nbsp;<strong>Themes</strong>.</li><li>Click&nbsp;<strong>Actions</strong>, and then click&nbsp;<strong>Edit Code</strong>.</li><li>Click&nbsp;<strong>Add a new template</strong>, and then select&nbsp;<strong>robots</strong>.</li><li>Click&nbsp;<strong>Create template</strong>.</li><li>Make the changes that you want to make to the default template. For more information on liquid variables and common use cases, refer to Shopify\'s Developer page&nbsp;<a href=\"https://shopify.dev/themes/seo/robots-txt\">Customize robots.txt.liquid</a>.</li><li>Save changes to the&nbsp;robots.txt.liquid&nbsp;file in your published theme.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>Changes are instant, but crawlers don\'t always react immediately. You can test changes using&nbsp;<a href=\"https://support.google.com/webmasters/answer/6062598?hl=en\">Google\'s robots.txt Tester</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can also delete the contents of the template and replace it with plain text rules. This method is strongly not recommended, as rules may become out of date. If you choose this method, then Shopify can’t ensure that SEO best practices are applied to your robots.txt over time, or make changes to the file with future updates.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p><strong>NOTE</strong></p><cite>ThemeKit or command line changes will preserve the robots.txt.liquid file. Uploading a theme from within the Themes section of the Shopify admin will not import robots.txt.liquid.</cite></blockquote>\n<!-- /wp:quote -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"delete-robots-txt-liquid\">Delete robots.txt.liquid customizations</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>If you want to use the default&nbsp;<code>robots.txt</code>&nbsp;file again, then save a copy of your&nbsp;<code>robots.txt.liquid</code>&nbsp;template customizations as you need to delete the template, which can\'t be undone.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4 id=\"steps\">Steps:</h4>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store</strong>&nbsp;&gt;&nbsp;<strong>Themes</strong>.</li><li>Click&nbsp;<strong>Actions</strong>, and then click&nbsp;<strong>Edit Code</strong>.</li><li>Click&nbsp;<strong>robots.liquid</strong>, and then click&nbsp;<strong>Delete file</strong>.</li><li>If you still want to delete robots.txt.liquid, then click&nbsp;<strong>Delete file</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>You can always edit the&nbsp;<code>robots.txt.liquid</code>&nbsp;file in the future, or if you saved your past customizations, then you can redo your changes by copying over your saved previous customizations.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"\"></a></p>\n<!-- /wp:paragraph -->','Shopify Store Robots.txt can be edited now','','inherit','closed','closed','','428-revision-v1','','','2021-08-15 04:55:47','2021-08-15 04:55:47','',428,'https://www.mojoin.com/?p=441',0,'revision','',0),(442,1,'2021-08-15 04:58:05','2021-08-15 04:58:05','<!-- wp:heading -->\n<h2>Editing robots.txt.liquid</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Search engines, such as Google, Bing, normally will constantly crawl the internet in search of new data as a source for their search results. The <code>robots.txt</code> file tells search engine bots(known as crawlers), which pages to request to view from your online store. Actually, your Shopify store has a default <code>robots.txt</code> file that\'s optimal for Search Engine Optimization (<a href=\"https://en.wikipedia.org/wiki/Search_engine_optimization\">SEO</a>).</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Your sitemap is used by search engines to place your online store in the search engine results.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>On this page</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#overview\">Overview</a></li><li><a href=\"#edit-robots-txt-liquid\">Edit robots.txt.liquid</a></li><li><a href=\"#delete-robots-txt-liquid\">Delete robots.txt.liquid customizations</a></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"overview\">Overview</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>The default&nbsp;<code>robots.txt</code>&nbsp;file works for most stores, but you can edit the file through the&nbsp;<a href=\"https://shopify.dev/themes/architecture/templates/robots-txt-liquid\">robots.txt.liquid theme template</a>. You can make the following edits:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>allow or disallow certain URLs from being crawled</li><li>add crawl-delay rules for certain crawlers</li><li>add extra sitemap URLs</li><li>block certain crawlers</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>The&nbsp;<code>robots.txt</code>&nbsp;file is located at the root directory of your Shopify store\'s&nbsp;primary domain name. For example:&nbsp;<code>www.mojoin.com/robots.txt</code>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p><strong>CAUTION</strong></p><cite>This is an <strong>unsupported customization</strong>. Shopify Support can\'t help with edits to the <code>robots.txt.liquid</code> file. If you need to edit your <code>robots.txt.liquid</code> file, then you can hire a Shopify expert to edit the code for you. Incorrect use of the feature can result in loss of all traffic.</cite></blockquote>\n<!-- /wp:quote -->\n\n<!-- wp:heading -->\n<h2 id=\"edit-robots-txt-liquid\">Edit robots.txt.liquid</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>If you want to edit the&nbsp;<code>robots.txt.liquid</code>&nbsp;file, then you should work with a Shopify Expert or have expertise in code edits and SEO.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can use Liquid to add or remove directives from the <code>robots.txt.liquid</code> template. This method preserves Shopify’s ability to keep the file updated automatically in the future, and is recommended.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Remove any previous customizations or workarounds, such as using a third-party service such as Cloudflare, before you edit the&nbsp;<code>robots.txt.liquid</code>&nbsp;file.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4 id=\"steps\">Steps:</h4>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store</strong>&nbsp;&gt;&nbsp;<strong>Themes</strong>.</li><li>Click&nbsp;<strong>Actions</strong>, and then click&nbsp;<strong>Edit Code</strong>.</li><li>Click&nbsp;<strong>Add a new template</strong>, and then select&nbsp;<strong>robots</strong>.</li><li>Click&nbsp;<strong>Create template</strong>.</li><li>Make the changes that you want to make to the default template. For more information on liquid variables and common use cases, refer to Shopify\'s Developer page&nbsp;<a href=\"https://shopify.dev/themes/seo/robots-txt\">Customize robots.txt.liquid</a>.</li><li>Save changes to the&nbsp;robots.txt.liquid&nbsp;file in your published theme.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>Changes are instant, but crawlers don\'t always react immediately. You can test changes using&nbsp;<a href=\"https://support.google.com/webmasters/answer/6062598?hl=en\">Google\'s robots.txt Tester</a>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can also delete the contents of the template and replace it with plain text rules. This method is strongly not recommended, as rules may become out of date. If you choose this method, then Shopify can’t ensure that SEO best practices are applied to your robots.txt over time, or make changes to the file with future updates.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p><strong>NOTE</strong></p><cite>ThemeKit or command line changes will preserve the robots.txt.liquid file. Uploading a theme from within the Themes section of the Shopify admin will not import robots.txt.liquid.</cite></blockquote>\n<!-- /wp:quote -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 id=\"delete-robots-txt-liquid\">Delete robots.txt.liquid customizations</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>If you want to use the default&nbsp;<code>robots.txt</code>&nbsp;file again, then save a copy of your&nbsp;<code>robots.txt.liquid</code>&nbsp;template customizations as you need to delete the template, which can\'t be undone.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4 id=\"steps\">Steps:</h4>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store</strong>&nbsp;&gt;&nbsp;<strong>Themes</strong>.</li><li>Click&nbsp;<strong>Actions</strong>, and then click&nbsp;<strong>Edit Code</strong>.</li><li>Click&nbsp;<strong>robots.liquid</strong>, and then click&nbsp;<strong>Delete file</strong>.</li><li>If you still want to delete robots.txt.liquid, then click&nbsp;<strong>Delete file</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>You can always edit the&nbsp;<code>robots.txt.liquid</code>&nbsp;file in the future, or if you saved your past customizations, then you can redo your changes by copying over your saved previous customizations.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"\"></a></p>\n<!-- /wp:paragraph -->','Shopify Store Robots.txt can be edited now','','inherit','closed','closed','','428-revision-v1','','','2021-08-15 04:58:05','2021-08-15 04:58:05','',428,'https://www.mojoin.com/?p=442',0,'revision','',0),(443,1,'2021-08-15 05:05:47','2021-08-15 05:05:47','','robotsfile-edit-feature','','inherit','open','closed','','robotsfile-edit-feature','','','2021-08-15 05:06:14','2021-08-15 05:06:14','',428,'https://www.mojoin.com/wp-content/uploads/2021/08/robotsfile-edit-feature.jpg',0,'attachment','image/jpeg',0),(445,1,'2021-08-30 11:47:16','2021-08-30 11:47:16','<!-- wp:paragraph -->\n<p>Liquid how to check variable </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','Liquid check Variable','','publish','open','closed','','liquid-check-variable','','','2021-08-30 11:47:17','2021-08-30 11:47:17','',0,'https://www.mojoin.com/?post_type=docs&#038;p=445',0,'docs','',0),(446,1,'2021-08-30 11:47:16','2021-08-30 11:47:16','<!-- wp:paragraph -->\n<p>Liquid how to check variable </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','Liquid check Variable','','inherit','closed','closed','','445-revision-v1','','','2021-08-30 11:47:16','2021-08-30 11:47:16','',445,'https://www.mojoin.com/?p=446',0,'revision','',0),(451,1,'2021-10-05 23:29:46','2021-10-05 23:29:46','<!-- wp:image {\"align\":\"center\",\"id\":39,\"width\":256,\"height\":256,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img src=\"https://www.mojoin.com/wp-content/uploads/2020/10/shopifytoolstips-nobord.png\" alt=\"shopify tailor logo\" class=\"wp-image-39\" width=\"256\" height=\"256\"/><figcaption>shopify tailor logo</figcaption></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>I would like to share all the tips and skills which I have learned when I customize a Shopify Theme or developing a Shopify App .</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you have any problems when customizing your Shopify Theme or having any ideas around the Shopify e-commerce platform. please contact me I will try my best to help you out or give you professional advice.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:shortcode -->\n[contact-form-7 id=\"111\" title=\"aboutus-contactus\"]\n<!-- /wp:shortcode -->','About Us','','inherit','closed','closed','','81-revision-v1','','','2021-10-05 23:29:46','2021-10-05 23:29:46','',81,'https://www.mojoin.com/?p=451',0,'revision','',0),