(155,1,'2020-12-26 05:14:36','2020-12-26 05:14:36','<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Different-images-for-mobile-than-desktop-web/td-p/522935/page/6</p>\n<!-- /wp:paragraph -->\n\n<!-- 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 set different images for Desktop or Mobile, so the reality is it is very difficult to make one image 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>publish the theme</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>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>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\":144,\"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/add-new-section-2-theme-1.png\" alt=\"new section shown up\" class=\"wp-image-144\"/><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 liquid file. Your 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>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></p>\n<!-- /wp:paragraph -->','How to Show Different Banner Image on Desktop and Mobile','','inherit','closed','closed','','66-revision-v1','','','2020-12-26 05:14:36','2020-12-26 05:14:36','',66,'https://www.mojoin.com/66-revision-v1/',0,'revision','',0),(156,1,'2020-12-26 05:15:29','2020-12-26 05:15:29','<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Different-images-for-mobile-than-desktop-web/td-p/522935/page/6</p>\n<!-- /wp:paragraph -->\n\n<!-- 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 set different images for Desktop or Mobile, so the reality is it is very difficult to make one image 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>publish the theme</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>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>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\":144,\"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/add-new-section-2-theme-1.png\" alt=\"new section shown up\" class=\"wp-image-144\"/><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 liquid file. Your 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>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></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></p>\n<!-- /wp:paragraph -->','How to Show Different Banner Image on Desktop and Mobile','','inherit','closed','closed','','66-revision-v1','','','2020-12-26 05:15:29','2020-12-26 05:15:29','',66,'https://www.mojoin.com/66-revision-v1/',0,'revision','',0),(157,1,'2020-12-26 05:15:45','2020-12-26 05:15:45','<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Different-images-for-mobile-than-desktop-web/td-p/522935/page/6</p>\n<!-- /wp:paragraph -->\n\n<!-- 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 set different images for Desktop or Mobile, so the reality is it is very difficult to make one image 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>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>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\":144,\"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/add-new-section-2-theme-1.png\" alt=\"new section shown up\" class=\"wp-image-144\"/><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 liquid file. Your 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>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></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></p>\n<!-- /wp:paragraph -->','How to Show Different Banner Image on Desktop and Mobile','','inherit','closed','closed','','66-revision-v1','','','2020-12-26 05:15:45','2020-12-26 05:15:45','',66,'https://www.mojoin.com/66-revision-v1/',0,'revision','',0),(158,1,'2020-12-26 05:25:05','2020-12-26 05:25:05','shopify theme preview','shopify theme preview','shopify theme preview','inherit','open','closed','','preview-banner-images','','','2020-12-26 05:25:31','2020-12-26 05:25:31','',66,'https://www.mojoin.com/wp-content/uploads/2020/12/preview-banner-images.png',0,'attachment','image/png',0),(159,1,'2020-12-26 05:29:27','2020-12-26 05:29:27','<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Different-images-for-mobile-than-desktop-web/td-p/522935/page/6</p>\n<!-- /wp:paragraph -->\n\n<!-- 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 set different images for Desktop or Mobile, so the reality is it is very difficult to make one image 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>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>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\":144,\"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/add-new-section-2-theme-1.png\" alt=\"new section shown up\" class=\"wp-image-144\"/><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 liquid file. Your 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>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  <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></p>\n<!-- /wp:paragraph -->','How to Show Different Banner Image on Desktop and Mobile','','inherit','closed','closed','','66-revision-v1','','','2020-12-26 05:29:27','2020-12-26 05:29:27','',66,'https://www.mojoin.com/66-revision-v1/',0,'revision','',0),(160,1,'2020-12-26 05:34:00','2020-12-26 05:34:00','publish a theme when you are editing your code','publish a theme','publish a theme','inherit','open','closed','','publish-a-theme','','','2020-12-26 05:34:26','2020-12-26 05:34:26','',66,'https://www.mojoin.com/wp-content/uploads/2020/12/publish-a-theme.png',0,'attachment','image/png',0),(161,1,'2020-12-26 05:34:33','2020-12-26 05:34:33','<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Different-images-for-mobile-than-desktop-web/td-p/522935/page/6</p>\n<!-- /wp:paragraph -->\n\n<!-- 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 set different images for Desktop or Mobile, so the reality is it is very difficult to make one image 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>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>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\":144,\"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/add-new-section-2-theme-1.png\" alt=\"new section shown up\" class=\"wp-image-144\"/><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 liquid file. Your 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>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  <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 you are going to make it live. 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: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></p>\n<!-- /wp:paragraph -->','How to Show Different Banner Image on Desktop and Mobile','','inherit','closed','closed','','66-revision-v1','','','2020-12-26 05:34:33','2020-12-26 05:34:33','',66,'https://www.mojoin.com/66-revision-v1/',0,'revision','',0),(162,1,'2020-12-26 05:37:32','2020-12-26 05:37:32','publish a theme from theme list','publish a theme','publish a theme ','inherit','open','closed','','publish-a-theme-main','','','2020-12-26 05:37:52','2020-12-26 05:37:52','',66,'https://www.mojoin.com/wp-content/uploads/2020/12/publish-a-theme-main.png',0,'attachment','image/png',0),(163,1,'2020-12-26 05:38:40','2020-12-26 05:38:40','<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Different-images-for-mobile-than-desktop-web/td-p/522935/page/6</p>\n<!-- /wp:paragraph -->\n\n<!-- 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 set different images for Desktop or Mobile, so the reality is it is very difficult to make one image 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>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>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\":144,\"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/add-new-section-2-theme-1.png\" alt=\"new section shown up\" class=\"wp-image-144\"/><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 liquid file. Your 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>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  <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 you are going to make it live. 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 them list. <strong><em>Themes</em></strong> <em><strong>->Actions ->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 -->','How to Show Different Banner Image on Desktop and Mobile','','inherit','closed','closed','','66-revision-v1','','','2020-12-26 05:38:40','2020-12-26 05:38:40','',66,'https://www.mojoin.com/66-revision-v1/',0,'revision','',0),(164,1,'2020-12-26 05:42:10','2020-12-26 05:42:10','<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Different-images-for-mobile-than-desktop-web/td-p/522935/page/6</p>\n<!-- /wp:paragraph -->\n\n<!-- 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 set different images for Desktop or Mobile, so the reality is it is very difficult to make one image 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>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>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\":144,\"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/add-new-section-2-theme-1.png\" alt=\"new section shown up\" class=\"wp-image-144\"/><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 liquid file. Your 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>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  <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 you are going to make it live. 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 them list. <strong><em>Themes</em></strong> <em><strong>->Actions ->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 basics idea how to implement showing different image banner for Desktop and mobile, you can make it better for your theme. We only use default free Debut theme as an example, actually different theme maybe need a little bit changes to adapt to your environment.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Show Different Banner Image on Desktop and Mobile','','inherit','closed','closed','','66-revision-v1','','','2020-12-26 05:42:10','2020-12-26 05:42:10','',66,'https://www.mojoin.com/66-revision-v1/',0,'revision','',0),(165,1,'2020-12-26 05:44:42','2020-12-26 05:44:42','<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Different-images-for-mobile-than-desktop-web/td-p/522935/page/6</p>\n<!-- /wp:paragraph -->\n\n<!-- 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 set different images for Desktop or Mobile, so the reality is it is very difficult to make one image 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>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>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\":144,\"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/add-new-section-2-theme-1.png\" alt=\"new section shown up\" class=\"wp-image-144\"/><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 liquid file. Your 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>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  <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 you are going to make it live. 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 them list. <strong><em>Themes</em></strong> <em><strong>->Actions ->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, different themes maybe needs a few changes to adapt to your environment. if you find it is very difficult for you to do these, please do not hesitate to leave a message at the below comment area, we will try our best to help you out.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Show Different Banner Image on Desktop and Mobile','','inherit','closed','closed','','66-revision-v1','','','2020-12-26 05:44:42','2020-12-26 05:44:42','',66,'https://www.mojoin.com/66-revision-v1/',0,'revision','',0),(166,1,'2020-12-26 05:50:22','2020-12-26 05:50:22','<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Different-images-for-mobile-than-desktop-web/td-p/522935/page/6</p>\n<!-- /wp:paragraph -->\n\n<!-- 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 set different images for Desktop or Mobile, so the reality is it is very difficult to make one image 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>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>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\":144,\"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/add-new-section-2-theme-1.png\" alt=\"new section shown up\" class=\"wp-image-144\"/><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 liquid file. Your 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>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  <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 you are going to make it live. 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 them list. <strong><em>Themes</em></strong> <em><strong>->Actions ->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, different themes maybe needs a few changes to adapt to your environment. if you find it is very difficult for you to do these, please do not hesitate to leave a message at the below comment area, 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','','','2020-12-26 05:50:22','2020-12-26 05:50:22','',66,'https://www.mojoin.com/66-revision-v1/',0,'revision','',0),(168,1,'2020-12-26 05:53:47','2020-12-26 05:53:47','<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Different-images-for-mobile-than-desktop-web/td-p/522935/page/6</p>\n<!-- /wp:paragraph -->\n\n<!-- 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 set different images for Desktop or Mobile, so the reality is it is very difficult to make one image 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>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>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\":144,\"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/add-new-section-2-theme-1.png\" alt=\"new section shown up\" class=\"wp-image-144\"/><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 liquid file. Your 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  <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 you are going to make it live. 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 them list. <strong><em>Themes</em></strong> <em><strong>->Actions ->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, different themes maybe needs a few changes to adapt to your environment. if you find it is very difficult for you to do these, please do not hesitate to leave a message at the below comment area, 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','','','2020-12-26 05:53:47','2020-12-26 05:53:47','',66,'https://www.mojoin.com/66-revision-v1/',0,'revision','',0),(170,1,'2020-12-26 06:06:32','2020-12-26 06:06:32','<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Different-images-for-mobile-than-desktop-web/td-p/522935/page/6</p>\n<!-- /wp:paragraph -->\n\n<!-- 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 set different images for Desktop or Mobile, so the reality is it is very difficult to make one image 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\":144,\"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/add-new-section-2-theme-1.png\" alt=\"new section shown up\" class=\"wp-image-144\"/><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 liquid file. Your 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  <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 you are going to make it live. 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 them list. <strong><em>Themes</em></strong> <em><strong>->Actions ->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, different themes maybe needs a few changes to adapt to your environment. if you find it is very difficult for you to do these, please do not hesitate to leave a message at the below comment area, 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','','','2020-12-26 06:06:32','2020-12-26 06:06:32','',66,'https://www.mojoin.com/66-revision-v1/',0,'revision','',0),(171,1,'2020-12-26 06:17:08','2020-12-26 06:17:08','<!-- 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 set different images for Desktop or Mobile, so the reality is it is very difficult to make one image 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\":144,\"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/add-new-section-2-theme-1.png\" alt=\"new section shown up\" class=\"wp-image-144\"/><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 liquid file. Your 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 you are going to make it live. 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 them 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, different themes maybe needs a few changes to adapt to your environment. if you find it is very difficult for you to do these, please do not hesitate to leave a message at the below comment area, 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','','','2020-12-26 06:17:08','2020-12-26 06:17:08','',66,'https://www.mojoin.com/66-revision-v1/',0,'revision','',0),(172,1,'2020-12-26 11:42:20','2020-12-26 11:42:20','<!-- 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: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 -->','How to check Shopify theme version number','','inherit','closed','closed','','42-revision-v1','','','2020-12-26 11:42:20','2020-12-26 11:42:20','',42,'https://www.mojoin.com/42-revision-v1/',0,'revision','',0),(174,1,'2020-12-26 11:44:18','2020-12-26 11:44:18','<!-- 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: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,\"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/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','','','2020-12-26 11:44:18','2020-12-26 11:44:18','',42,'https://www.mojoin.com/42-revision-v1/',0,'revision','',0),(175,1,'2020-12-26 11:44:48','2020-12-26 11:44:48','<!-- 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: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','','','2020-12-26 11:44:48','2020-12-26 11:44:48','',42,'https://www.mojoin.com/42-revision-v1/',0,'revision','',0),(177,1,'2020-12-27 00:39:14','2020-12-27 00:39:14','<!-- 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 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\":144,\"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/add-new-section-2-theme-1.png\" alt=\"new section shown up\" class=\"wp-image-144\"/><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 liquid file. Your 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 you are going to make it live. 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 them 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, different themes maybe needs a few changes to adapt to your environment. if you find it is very difficult for you to do these, please do not hesitate to leave a message at the below comment area, 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','','','2020-12-27 00:39:14','2020-12-27 00:39:14','',66,'https://www.mojoin.com/66-revision-v1/',0,'revision','',0),(178,1,'2020-12-27 00:39:39','2020-12-27 00:39:39','<!-- 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\":144,\"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/add-new-section-2-theme-1.png\" alt=\"new section shown up\" class=\"wp-image-144\"/><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 liquid file. Your 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 you are going to make it live. 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 them 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, different themes maybe needs a few changes to adapt to your environment. if you find it is very difficult for you to do these, please do not hesitate to leave a message at the below comment area, 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','','','2020-12-27 00:39:39','2020-12-27 00:39:39','',66,'https://www.mojoin.com/66-revision-v1/',0,'revision','',0),(179,1,'2020-12-27 01:12:40','2020-12-27 01:12:40','','new-section-added','','inherit','open','closed','','new-section-added','','','2020-12-27 01:12:40','2020-12-27 01:12:40','',66,'https://www.mojoin.com/wp-content/uploads/2020/12/new-section-added.png',0,'attachment','image/png',0),(181,1,'2020-12-27 01:13:06','2020-12-27 01:13:06','<!-- 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 liquid file. Your 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 you are going to make it live. 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 them 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, different themes maybe needs a few changes to adapt to your environment. if you find it is very difficult for you to do these, please do not hesitate to leave a message at the below comment area, 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','','','2020-12-27 01:13:06','2020-12-27 01:13:06','',66,'https://www.mojoin.com/66-revision-v1/',0,'revision','',0),(183,1,'2020-12-27 01:16:03','2020-12-27 01:16:03','<!-- 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 liquid file. Your 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>->Actions ->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, different themes maybe needs a few changes to adapt to your environment. if you find it is very difficult for you to do these, please do not hesitate to leave a message at the below comment area, 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','','','2020-12-27 01:16:03','2020-12-27 01:16:03','',66,'https://www.mojoin.com/66-revision-v1/',0,'revision','',0),(185,1,'2020-12-27 01:17:02','2020-12-27 01:17:02','<!-- 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 liquid file. Your 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>->Actions ->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, 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','','','2020-12-27 01:17:02','2020-12-27 01:17:02','',66,'https://www.mojoin.com/66-revision-v1/',0,'revision','',0),(186,1,'2020-12-27 01:20:52','2020-12-27 01:20:52','<!-- 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: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','','','2020-12-27 01:20:52','2020-12-27 01:20:52','',90,'https://www.mojoin.com/90-revision-v1/',0,'revision','',0),(187,1,'2020-12-27 01:23:33','2020-12-27 01:23:33','<!-- 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: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','','','2020-12-27 01:23:33','2020-12-27 01:23:33','',61,'https://www.mojoin.com/61-revision-v1/',0,'revision','',0),(188,1,'2020-12-27 23:56:50','2020-12-27 23:56:50','add a back to top float button  in shopify store theme','back to top in shopify store','back to top in shopify store theme','inherit','open','closed','','back-to-top-in-shopify-theme','','','2020-12-27 23:57:44','2020-12-27 23:57:44','',64,'https://www.mojoin.com/wp-content/uploads/2020/11/back-to-top-in-shopify-theme.jpg',0,'attachment','image/jpeg',0),(189,1,'2020-12-27 23:58:23','2020-12-27 23:58:23','<!-- 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>how to add back to top scroll to the shopify page</p>\n<!-- /wp:paragraph -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-27 23:58:23','2020-12-27 23:58:23','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(190,1,'2020-12-28 00:07:03','2020-12-28 00:07:03','<!-- 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></p>\n<!-- /wp:paragraph -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 00:07:03','2020-12-28 00:07:03','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(191,1,'2020-12-28 00:10:04','2020-12-28 00:10:04','<!-- 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 float button in somewhere on the page, for example at the right bottom corner, whenever clients want to return to the top, they just need to click or tap the button. It will be very convenient for you 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:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 00:10:04','2020-12-28 00:10:04','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(192,1,'2020-12-28 00:19:20','0000-00-00 00:00:00','<!-- wp:paragraph -->\n<p>how to show vouch code at the cart page</p>\n<!-- /wp:paragraph -->','Add Vouch code at your shopping cart','','draft','open','open','','','','','2020-12-28 00:19:20','2020-12-28 00:19:20','',0,'https://www.mojoin.com/?p=192',0,'post','',0),(193,1,'2020-12-28 00:19:19','2020-12-28 00:19:19','<!-- wp:paragraph -->\n<p>how to show vouch code at the cart page</p>\n<!-- /wp:paragraph -->','Add Vouch code at your shopping cart','','inherit','closed','closed','','192-revision-v1','','','2020-12-28 00:19:19','2020-12-28 00:19:19','',192,'https://www.mojoin.com/192-revision-v1/',0,'revision','',0),(194,1,'2020-12-28 00:20:39','2020-12-28 00:20:39','<!-- 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:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 00:20:39','2020-12-28 00:20:39','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(195,1,'2020-12-28 00:25:34','2020-12-28 00:25:34','<!-- 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>Floating button position adjustable</strong></li><li><strong>Wrapped in Shopify snippet</strong></li><li><strong>Call snippet in Shopify Theme</strong></li><li><strong>More Tips</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></p>\n<!-- /wp:paragraph -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 00:25:34','2020-12-28 00:25:34','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(196,1,'2020-12-28 00:26:37','2020-12-28 00:26:37','<!-- 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>Floating button position adjustable</strong></li><li><strong>When the floating button should be appear</strong></li><li><strong>Wrapped in Shopify snippet</strong></li><li><strong>Call snippet in Shopify Theme</strong></li><li><strong>More Tips</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></p>\n<!-- /wp:paragraph -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 00:26:37','2020-12-28 00:26:37','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(197,1,'2020-12-28 04:59:26','2020-12-28 04:59:26','<!-- 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>Floating button position adjustable</strong></li><li><strong>When the floating button should be appear</strong></li><li><strong>Wrapped in Shopify snippet</strong></li><li><strong>Call snippet in Shopify Theme</strong></li><li><strong>More Tips</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,its <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:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 04:59:26','2020-12-28 04:59:26','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(198,1,'2020-12-28 05:06:43','2020-12-28 05:06:43','<!-- 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>Floating button position adjustable</strong></li><li><strong>When the floating button should be appear</strong></li><li><strong>Wrapped in Shopify snippet</strong></li><li><strong>Call snippet in Shopify Theme</strong></li><li><strong>More Tips</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,its <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 = {{ vertical_offset_for_trigger }};\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}\n&lt;/script>\n</pre>\n<!-- /wp:enlighter/codeblock -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 05:06:43','2020-12-28 05:06:43','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(199,1,'2020-12-28 05:25:13','2020-12-28 05:25:13','<!-- 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>Floating button position adjustable</strong></li><li><strong>When the floating button should be appear</strong></li><li><strong>Wrapped in Shopify snippet</strong></li><li><strong>Call snippet in Shopify Theme</strong></li><li><strong>More Tips</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,its <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:paragraph -->\n<p>we can use animate() to implement scroll to the top :</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>$(\'html, body\').animate( { scrollTop: 0 }, 300);</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></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       $(\'.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}\n&lt;/script>\n</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 1</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 for 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 -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 05:25:13','2020-12-28 05:25:13','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(200,1,'2020-12-28 05:29:21','2020-12-28 05:29:21','<!-- 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>Wrapped in Shopify snippet</strong></li><li><strong>Call snippet in Shopify Theme</strong></li><li><strong>More Tips</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,its <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       $(\'.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}\n&lt;/script>\n</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>Line 1</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 for 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 -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 05:29:21','2020-12-28 05:29:21','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(201,1,'2020-12-28 05:30:19','2020-12-28 05:30:19','<!-- 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>Wrapped in Shopify snippet</strong></li><li><strong>Call snippet in Shopify Theme</strong></li><li><strong>More Tips</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,its <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       $(\'.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}\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 for 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 -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 05:30:19','2020-12-28 05:30:19','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(202,1,'2020-12-28 05:36:16','2020-12-28 05:36: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>Wrapped in Shopify snippet</strong></li><li><strong>Call snippet in Shopify Theme</strong></li><li><strong>More Tips</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,its <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       $(\'.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}\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 -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 05:36:16','2020-12-28 05:36:16','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(203,1,'2020-12-28 05:38:03','2020-12-28 05:38:03','<!-- 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 snippet</a></strong></li><li><strong>Call snippet in Shopify Theme</strong></li><li><strong>More Tips</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,its <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       $(\'.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}\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 Snippet</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 05:38:03','2020-12-28 05:38:03','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(204,1,'2020-12-28 05:47:04','2020-12-28 05:47:04','<!-- 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 snippet</a></strong></li><li><strong>Call snippet in Shopify Theme</strong></li><li><strong>More Tips</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,its <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 Snippet</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 05:47:04','2020-12-28 05:47:04','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(205,1,'2020-12-28 05:47:33','2020-12-28 05:47:33','<!-- 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>Call snippet in Shopify Theme</strong></li><li><strong>More Tips</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,its <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></p>\n<!-- /wp:paragraph -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 05:47:33','2020-12-28 05:47:33','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(206,1,'2020-12-28 08:51:22','2020-12-28 08:51:22','Add a New Snippet into Shopify Theme ','Add New Snippet in Shopify Theme','Add New Snippet in Shopify Theme','inherit','open','closed','','add-new-snippet','','','2020-12-28 08:52:01','2020-12-28 08:52:01','',64,'https://www.mojoin.com/wp-content/uploads/2020/12/add-new-snippet.png',0,'attachment','image/png',0),(207,1,'2020-12-28 08:54:10','2020-12-28 08:54:10','<!-- 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>Call snippet in Shopify Theme</strong></li><li><strong>More Tips</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,its <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 -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 08:54:10','2020-12-28 08:54:10','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(209,1,'2020-12-28 08:58:57','2020-12-28 08:58:57','<!-- 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>Call snippet in Shopify Theme</strong></li><li><strong>More Tips</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,its <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 downlaod this file directly from <a href=\"https://github.com/michaelyue/shopifytailor/blob/main/back-to-top.liquid\">GitHub</a>.</p>\n<!-- /wp:paragraph -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 08:58:57','2020-12-28 08:58:57','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(210,1,'2020-12-28 08:59:18','2020-12-28 08:59:18','<!-- 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>Call snippet in Shopify Theme</strong></li><li><strong>More Tips</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,its <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 -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 08:59:18','2020-12-28 08:59:18','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(212,1,'2020-12-28 09:01:53','2020-12-28 09:01:53','<!-- 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>Call snippet in Shopify Theme</strong></li><li><strong>More Tips</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,its <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>Line 1-5 : comments 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 -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 09:01:53','2020-12-28 09:01:53','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(214,1,'2020-12-28 09:05:29','2020-12-28 09:05:29','<!-- 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>Call snippet in Shopify Theme</strong></li><li><strong>More Tips</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,its <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 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.</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 -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 09:05:29','2020-12-28 09:05:29','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(216,1,'2020-12-28 09:07:43','2020-12-28 09:07:43','<!-- 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>More Tips</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,its <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 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.</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></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 09:07:43','2020-12-28 09:07:43','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(218,1,'2020-12-28 09:11:48','2020-12-28 09:11:48','call snippet  in shopify theme','call snippet','call snippet ','inherit','open','closed','','call-b2t-snippet-intheme','','','2020-12-28 09:12:16','2020-12-28 09:12:16','',64,'https://www.mojoin.com/wp-content/uploads/2020/12/call-b2t-snippet-intheme.png',0,'attachment','image/png',0),(219,1,'2020-12-28 09:12:35','2020-12-28 09:12:35','<!-- 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>More Tips</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,its <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 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.</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 before \"&lt;/body>\" tag.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>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:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 09:12:35','2020-12-28 09:12:35','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(221,1,'2020-12-28 09:13:10','2020-12-28 09:13:10','<!-- 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>More Tips</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,its <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 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.</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>\" 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:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 09:13:10','2020-12-28 09:13:10','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(222,1,'2020-12-28 09:14:00','2020-12-28 09:14:00','<!-- 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,its <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 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.</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>\" 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></p>\n<!-- /wp:paragraph -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 09:14:00','2020-12-28 09:14:00','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(224,1,'2020-12-28 09:17:58','2020-12-28 09:17:58','<!-- 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,its <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 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.</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>\" 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 easyly adjust the position of the floating button and when the button will be appear. As for button style you can change to what ever your favourite in font-awesome font library.</p>\n<!-- /wp:paragraph -->','How To Add BACK to TOP Button in Shopify Store','','inherit','closed','closed','','64-revision-v1','','','2020-12-28 09:17:58','2020-12-28 09:17:58','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(226,1,'2020-12-28 09:21:03','2020-12-28 09:21:03','<!-- 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,its <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 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.</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>\" 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: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','','','2020-12-28 09:21:03','2020-12-28 09:21:03','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(227,1,'2020-12-28 09:22:08','2020-12-28 09:22:08','<!-- 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 liquid file. Your 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','','','2020-12-28 09:22:08','2020-12-28 09:22:08','',66,'https://www.mojoin.com/66-revision-v1/',0,'revision','',0),(228,1,'2020-12-28 09:25:04','2020-12-28 09:25:04','<!-- 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 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.</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>\" 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: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','','','2020-12-28 09:25:04','2020-12-28 09:25:04','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(230,1,'2020-12-28 09:29:24','2020-12-28 09:29:24','<!-- 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>\" 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: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','','','2020-12-28 09:29:24','2020-12-28 09:29:24','',64,'https://www.mojoin.com/64-revision-v1/',0,'revision','',0),(231,1,'2020-12-28 22:40:00','2020-12-28 22:40:00','<!-- wp:paragraph -->\n<p>we can use collection.sort_by transfer URL parameters in then search in collecion.products show as top products then decrease count in page for example top with topnum then showing page number should be pagenumber - topnum</p>\n<!-- /wp:paragraph -->','Fixed One or Two Products at The Top of The Collection Page','','inherit','closed','closed','','57-revision-v1','','','2020-12-28 22:40:00','2020-12-28 22:40:00','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(232,1,'2020-12-28 23:04:09','2020-12-28 23:04:09','<!-- 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> </p>\n<!-- /wp:paragraph -->','Fixed One or Two Products at The Top of The Collection Page','','inherit','closed','closed','','57-revision-v1','','','2020-12-28 23:04:09','2020-12-28 23:04:09','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(233,1,'2020-12-28 23:11:56','2020-12-28 23:11:56','<!-- 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> </p>\n<!-- /wp:paragraph -->','Fixed Display Two Products on the Top of the Shopify Collection Page','','inherit','closed','closed','','57-revision-v1','','','2020-12-28 23:11:56','2020-12-28 23:11:56','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(234,1,'2020-12-28 23:20:37','2020-12-28 23:20:37','Fixed Displaying some Products on Shopify Collection Page','fixed products','Fixed Display Products on Collection Page','inherit','open','closed','','fixed-displaying-2ps-collectionpage','','','2020-12-28 23:21:37','2020-12-28 23:21:37','',57,'https://www.mojoin.com/wp-content/uploads/2020/12/fixed-displaying-2ps-collectionpage.jpg',0,'attachment','image/jpeg',0),(235,1,'2020-12-28 23:22:01','2020-12-28 23:22:01','<!-- 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> </p>\n<!-- /wp:paragraph -->','Fixed Display Two Products on the Top of the Shopify Collection Page','','inherit','closed','closed','','57-revision-v1','','','2020-12-28 23:22:01','2020-12-28 23:22:01','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(236,1,'2020-12-28 23:26:19','2020-12-28 23:26:19','<!-- 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 can 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 find our specified product data.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p> </p>\n<!-- /wp:paragraph -->','Fixed Display Two Products on the Top of the Shopify Collection Page','','inherit','closed','closed','','57-revision-v1','','','2020-12-28 23:26:19','2020-12-28 23:26:19','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(237,1,'2020-12-29 02:07:58','2020-12-29 02:07:58','<!-- 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 can 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 find our specified product data.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p> </p>\n<!-- /wp:paragraph -->','Fixed Display Two Products on the Top of the Shopify Collection Page','','inherit','closed','closed','','57-revision-v1','','','2020-12-29 02:07:58','2020-12-29 02:07:58','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(238,1,'2020-12-29 02:08:21','2020-12-29 02:08:21','<!-- 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 specified product data.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p> </p>\n<!-- /wp:paragraph -->','Fixed Display Two Products on the Top of the Shopify Collection Page','','inherit','closed','closed','','57-revision-v1','','','2020-12-29 02:08:21','2020-12-29 02:08:21','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(240,1,'2020-12-30 07:21:50','2020-12-30 07:21:50','<!-- 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:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p> </p>\n<!-- /wp:paragraph -->','Fixed Display Two Products on the Top of the Shopify Collection Page','','inherit','closed','closed','','57-revision-v1','','','2020-12-30 07:21:50','2020-12-30 07:21:50','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(241,1,'2020-12-30 07:31:45','2020-12-30 07:31:45','<!-- 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:paragraph -->\n<p>So our algorightm as below:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p> </p>\n<!-- /wp:paragraph -->','Fixed Display Two Products on the Top of the Shopify Collection Page','','inherit','closed','closed','','57-revision-v1','','','2020-12-30 07:31:45','2020-12-30 07:31:45','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(242,1,'2020-12-30 09:17:14','2020-12-30 09:17:14','<!-- 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: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:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p> </p>\n<!-- /wp:paragraph -->','Fixed Display Two Products on the Top of the Shopify Collection Page','','inherit','closed','closed','','57-revision-v1','','','2020-12-30 09:17:14','2020-12-30 09:17:14','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(243,1,'2020-12-30 21:12:25','2020-12-30 21:12:25','edit shopify collection template and add our code','edit collection template','edit shopify collection template','inherit','open','closed','','edit-collection-template','','','2020-12-30 21:13:07','2020-12-30 21:13:07','',57,'https://www.mojoin.com/wp-content/uploads/2020/12/edit-collection-template.png',0,'attachment','image/png',0),(244,1,'2020-12-30 21:13:19','2020-12-30 21:13:19','<!-- 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: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 -> Debut Theme -> Edit Code -> 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:paragraph -->\n<p> </p>\n<!-- /wp:paragraph -->','Fixed Display Two Products on the Top of the Shopify Collection Page','','inherit','closed','closed','','57-revision-v1','','','2020-12-30 21:13:19','2020-12-30 21:13:19','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(245,1,'2020-12-30 21:16:18','2020-12-30 21:16:18','<!-- 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: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 -> Debut Theme -> Edit Code -> 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:paragraph -->\n<p> From about line 18, 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 specified 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 -->','Fixed Display Two Products on the Top of the Shopify Collection Page','','inherit','closed','closed','','57-revision-v1','','','2020-12-30 21:16:18','2020-12-30 21:16:18','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(246,1,'2020-12-30 21:17:30','2020-12-30 21:17:30','<!-- 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: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 -> Debut Theme -> Edit Code -> 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:paragraph -->\n<p> From about line 18, 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 -->','Fixed Display Two Products on the Top of the Shopify Collection Page','','inherit','closed','closed','','57-revision-v1','','','2020-12-30 21:17:30','2020-12-30 21:17:30','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(247,1,'2020-12-30 21:20:57','2020-12-30 21:20:57','<!-- 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: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 -> Debut Theme -> Edit Code -> 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:paragraph -->\n<p> From about line 18, 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>Line 6-9: define the specific top products by Shopify product handle as string delimeter by comma</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Line 10: Split the string with comma again into an array of the product handle</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Line 11: Save a temporay all collection products which will be used to look for our specific products by product handle</p>\n<!-- /wp:paragraph -->','Fixed Display Two Products on the Top of the Shopify Collection Page','','inherit','closed','closed','','57-revision-v1','','','2020-12-30 21:20:57','2020-12-30 21:20:57','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(248,1,'2020-12-30 21:23:04','2020-12-30 21:23:04','<!-- 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: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 -> Debut Theme -> Edit Code -> 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:paragraph -->\n<p> From about line 18, 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 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 -->','Fixed Display Two Products on the Top of the Shopify Collection Page','','inherit','closed','closed','','57-revision-v1','','','2020-12-30 21:23:04','2020-12-30 21:23:04','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(249,1,'2020-12-30 21:27:19','2020-12-30 21:27:19','<!-- 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: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 -> Debut Theme -> Edit Code -> 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 line 18, 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 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:paragraph -->\n<p>Insert Specific Products at the Top</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','Fixed Display Two Products on the Top of the Shopify Collection Page','','inherit','closed','closed','','57-revision-v1','','','2020-12-30 21:27:19','2020-12-30 21:27:19','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(250,1,'2020-12-30 21:27:53','2020-12-30 21:27:53','<!-- 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: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 -> Debut Theme -> Edit Code -> 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 line 18, 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 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></p>\n<!-- /wp:paragraph -->','Fixed Display Two Products on the Top of the Shopify Collection Page','','inherit','closed','closed','','57-revision-v1','','','2020-12-30 21:27:53','2020-12-30 21:27:53','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(251,1,'2020-12-30 21:31:11','2020-12-30 21:31:11','<!-- 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: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 -> Debut Theme -> Edit Code -> 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 line 18, 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 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  \"for product in collection.products\" 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 -->','Fixed Display Two Products on the Top of the Shopify Collection Page','','inherit','closed','closed','','57-revision-v1','','','2020-12-30 21:31:11','2020-12-30 21:31:11','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(252,1,'2020-12-30 21:31:50','2020-12-30 21:31:50','<!-- 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: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 -> Debut Theme -> Edit Code -> 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 line 18, 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 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  \"for product in collection.products\" 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 -->','Fixed Display Two Products on the Top of the Shopify Collection Page','','inherit','closed','closed','','57-revision-v1','','','2020-12-30 21:31:50','2020-12-30 21:31:50','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(253,1,'2020-12-30 21:36:41','2020-12-30 21:36:41','<!-- 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: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 -> Debut Theme -> Edit Code -> 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 line 18, 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 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  \"for product in collection.products\" 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> tag lines:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>{% include \'product-card-grid\', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Save it.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','Fixed Display Two Products on the Top of the Shopify Collection Page','','inherit','closed','closed','','57-revision-v1','','','2020-12-30 21:36:41','2020-12-30 21:36:41','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(254,1,'2020-12-30 21:42:42','2020-12-30 21:42:42','<!-- 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: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 -> Debut Theme -> Edit Code -> 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> tag lines:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>{% include \'product-card-grid\', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}</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 use free Debut theme as an example, your theme might not be exactly same one, but basic idea is similiar. If you found it is very hard to make it working please do not hesitate to let us know via leave a message at the bottom comment area or contact us. 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','','','2020-12-30 21:42:42','2020-12-30 21:42:42','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(255,1,'2020-12-30 21:43:44','2020-12-30 21:43:44','<!-- 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: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 -> Debut Theme -> Edit Code -> 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> tag lines:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>{% include \'product-card-grid\', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}</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','','','2020-12-30 21:43:44','2020-12-30 21:43:44','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(256,1,'2020-12-31 12:04:19','2020-12-31 12:04:19','<!-- 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: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','','','2020-12-31 12:04:19','2020-12-31 12:04:19','',57,'https://www.mojoin.com/57-revision-v1/',0,'revision','',0),(258,1,'2021-01-03 09:22:39','2021-01-03 09:22:39','<!-- 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','','publish','open','open','','edit-shopify-theme-slideshow-alt','','','2021-07-16 05:45:47','2021-07-16 05:45:47','',0,'https://www.mojoin.com/?p=258',0,'post','',0),(259,1,'2021-01-03 08:42:24','2021-01-03 08:42:24','<!-- wp:paragraph -->\n<p>slide add one image , then edit , then input your ALT text </p>\n<!-- /wp:paragraph -->','How to edit shopify default theme slide image ALT text','','inherit','closed','closed','','258-revision-v1','','','2021-01-03 08:42:24','2021-01-03 08:42:24','',258,'https://www.mojoin.com/258-revision-v1/',0,'revision','',0),(260,1,'2021-01-03 08:51:37','2021-01-03 08:51:37','','How to Edit Shopify Theme Slideshow Image ALT Text','','inherit','closed','closed','','258-revision-v1','','','2021-01-03 08:51:37','2021-01-03 08:51:37','',258,'https://www.mojoin.com/258-revision-v1/',0,'revision','',0),(261,1,'2021-01-03 08:55:27','2021-01-03 08:55:27','<!-- wp:paragraph -->\n<p>Many of our customers ask for us to help them change their Shopify home page slideshow images\' ALT text, At the first time we think that it is very simple why so hard for normal store manager to change it by theirself.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Edit Shopify Theme Slideshow Image ALT Text','','inherit','closed','closed','','258-revision-v1','','','2021-01-03 08:55:27','2021-01-03 08:55:27','',258,'https://www.mojoin.com/258-revision-v1/',0,'revision','',0),(262,1,'2021-01-03 08:59:54','2021-01-03 08:59:54','<!-- wp:paragraph -->\n<p>Many of our customers ask for us to help them change their Shopify home page slideshow images\' ALT text, 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: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></p>\n<!-- /wp:paragraph -->','How to Edit Shopify Theme Slideshow Image ALT Text','','inherit','closed','closed','','258-revision-v1','','','2021-01-03 08:59:54','2021-01-03 08:59:54','',258,'https://www.mojoin.com/258-revision-v1/',0,'revision','',0),(263,1,'2021-01-03 09:05:05','2021-01-03 09:05:05','<!-- 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>SEO</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: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>-> <strong>Customize your them </strong></li><li>-> <strong>Click Slideshow section</strong>(if not there you can add one section called Slideshow) </li><li>-> <strong>Click Image slide</strong> </li><li>-> <strong>If image not there please select one image</strong> </li><li>-> <strong>Click Edit Button </strong></li><li>-> <strong>Type your ALT text</strong> (maximum text is 225)</li><li>-> <strong>Save It</strong></li></ul>\n<!-- /wp:list -->','How to Edit Shopify Theme Slideshow Image ALT Text','','inherit','closed','closed','','258-revision-v1','','','2021-01-03 09:05:05','2021-01-03 09:05:05','',258,'https://www.mojoin.com/258-revision-v1/',0,'revision','',0),(264,1,'2021-01-03 09:08:25','2021-01-03 09:08:25','<!-- 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: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>-> <strong>Customize your them </strong></li><li>-> <strong>Click Slideshow section</strong>(if not there you can add one section called Slideshow) </li><li>-> <strong>Click Image slide</strong> </li><li>-> <strong>If image not there please select one image</strong> </li><li>-> <strong>Click Edit Button </strong></li><li>-> <strong>Type your ALT text</strong> (maximum text is 225)</li><li>-> <strong>Save It</strong></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>Screenshot as below</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to Edit Shopify Theme Slideshow Image ALT Text','','inherit','closed','closed','','258-revision-v1','','','2021-01-03 09:08:25','2021-01-03 09:08:25','',258,'https://www.mojoin.com/258-revision-v1/',0,'revision','',0),(265,1,'2021-01-03 09:10:06','2021-01-03 09:10:06','show you how to Update Shopify theme slideshow Image ALT text','Update Shopify Image ALT text','Update Shopify Image ALT text','inherit','open','closed','','edit-shopify-image-alttxt','','','2021-01-03 09:11:40','2021-01-03 09:11:40','',258,'https://www.mojoin.com/wp-content/uploads/2021/01/edit-shopify-image-alttxt.png',0,'attachment','image/png',0),(266,1,'2021-01-03 09:16:58','2021-01-03 09:16:58','<!-- 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: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>-> <strong>Customize your them </strong></li><li>-> <strong>Click Slideshow section</strong>(if not there you can add one section called Slideshow) </li><li>-> <strong>Click Image slide</strong> </li><li>-> <strong>If image not there please select one image</strong> </li><li>-> <strong>Click Edit Button </strong></li><li>-> <strong>Type your ALT text</strong> (maximum text is 225)</li><li>-> <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-01-03 09:16:58','2021-01-03 09:16:58','',258,'https://www.mojoin.com/258-revision-v1/',0,'revision','',0),(267,1,'2021-01-03 09:29:02','2021-01-03 09:29:02','Edit Shopify Theme Slideshow Image ALT','Edit Shopify Theme Slideshow Image ALT','Edit Shopify Theme Slideshow Image ALT','inherit','open','closed','','eidt-shopify-theme-sideshow-image-alt','','','2021-01-03 09:29:27','2021-01-03 09:29:27','',258,'https://www.mojoin.com/wp-content/uploads/2021/01/eidt-shopify-theme-sideshow-image-alt.jpg',0,'attachment','image/jpeg',0),(268,1,'2021-01-03 09:29:35','2021-01-03 09:29:35','<!-- 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: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-01-03 09:29:35','2021-01-03 09:29:35','',258,'https://www.mojoin.com/258-revision-v1/',0,'revision','',0),(269,1,'2021-01-04 23:15:22','0000-00-00 00:00:00','<!-- wp:heading -->\n<h2>For Optimization:</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>All in One SEO</strong> https://aioseo.com/</li><li><strong>a3 Lazy Load</strong> https://a3rev.com/</li><li><strong>Google Tag Manager for Wordpress</strong> https://gtm4wp.com/</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>For Security</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>2FAS Light — Google Authenticator</strong>  <a href=\"https://2fas.com/\">https://2fas.com/</a></li><li><strong>Password Protected</strong> http://github.com/benhuson/password-protected/</li><li><strong>Really Simple CAPTCHA</strong> https://ideasilo.wordpress.com/</li><li><strong>Sucuri Security - Auditing, Malware Scanner and Hardening</strong> https://sucuri.net/</li><li><strong>Captcha Code</strong> http://www.vinojcardoza.com/</li><li><strong>miniOrange Limit Login Attempts </strong>http://miniorange.com/</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>For Data Collection</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>Advanced CF7 DB</strong>  https://www.vsourz.com/</li><li><strong>Contact Form 7</strong> https://ideasilo.wordpress.com/</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>For Editor</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>Elementor</strong> https://elementor.com/?utm_source=wp-plugins&amp;utm_campaign=author-uri&amp;utm_medium=wp-dash</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>For Tools</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>Easy WP SMTP</strong> https://wp-ecommerce.net/</li><li><strong>Cronjob Scheduler</strong> https://wp-ecommerce.net/</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>For Policy</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>GDPR Cookie Compliance (CCPA, PIPEDA ready)</strong> https://www.mooveagency.com/</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','Wordpress should install Plugins','','draft','open','open','','','','','2021-01-04 23:15:22','2021-01-04 23:15:22','',0,'https://www.mojoin.com/?p=269',0,'post','',0),(270,1,'2021-01-04 23:06:42','2021-01-04 23:06:42','<!-- wp:paragraph -->\n<p>For Optimization:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>All In One SEO Pack</strong> https://semperplugins.com/all-in-one-seo-pack-pro-version/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For Security</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>2FAS Light — Google Authenticator</strong>  <a href=\"https://2fas.com/\">https://2fas.com/</a></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Password Protected</strong> http://github.com/benhuson/password-protected/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Really Simple CAPTCHA</strong> https://ideasilo.wordpress.com/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Sucuri Security - Auditing, Malware Scanner and Hardening</strong> https://sucuri.net/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For Data Collection</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Advanced CF7 DB</strong>  https://www.vsourz.com/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Contact Form 7</strong> https://ideasilo.wordpress.com/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For Editor</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For Tools</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Easy WP SMTP</strong> https://wp-ecommerce.net/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Cronjob Scheduler</strong> https://wp-ecommerce.net/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For Policy</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>GDPR Cookie Compliance (CCPA, PIPEDA ready)</strong> https://www.mooveagency.com/</p>\n<!-- /wp:paragraph -->','Wordpress should install Plugins','','inherit','closed','closed','','269-revision-v1','','','2021-01-04 23:06:42','2021-01-04 23:06:42','',269,'https://www.mojoin.com/269-revision-v1/',0,'revision','',0),(271,1,'2021-01-04 23:07:15','2021-01-04 23:07:15','<!-- wp:paragraph -->\n<p>For Optimization:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>All In One SEO Pack</strong> https://semperplugins.com/all-in-one-seo-pack-pro-version/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For Security</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>2FAS Light — Google Authenticator</strong>  <a href=\"https://2fas.com/\">https://2fas.com/</a></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Password Protected</strong> http://github.com/benhuson/password-protected/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Really Simple CAPTCHA</strong> https://ideasilo.wordpress.com/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Sucuri Security - Auditing, Malware Scanner and Hardening</strong> https://sucuri.net/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Captcha Code</strong> http://www.vinojcardoza.com/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For Data Collection</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Advanced CF7 DB</strong>  https://www.vsourz.com/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Contact Form 7</strong> https://ideasilo.wordpress.com/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For Editor</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For Tools</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Easy WP SMTP</strong> https://wp-ecommerce.net/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Cronjob Scheduler</strong> https://wp-ecommerce.net/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For Policy</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>GDPR Cookie Compliance (CCPA, PIPEDA ready)</strong> https://www.mooveagency.com/</p>\n<!-- /wp:paragraph -->','Wordpress should install Plugins','','inherit','closed','closed','','269-revision-v1','','','2021-01-04 23:07:15','2021-01-04 23:07:15','',269,'https://www.mojoin.com/269-revision-v1/',0,'revision','',0),(272,1,'2021-01-04 23:08:29','2021-01-04 23:08:29','<!-- wp:paragraph -->\n<p>For Optimization:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>All In One SEO Pack</strong> https://semperplugins.com/all-in-one-seo-pack-pro-version/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>a3 Lazy Load</strong> https://a3rev.com/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For Security</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>2FAS Light — Google Authenticator</strong>  <a href=\"https://2fas.com/\">https://2fas.com/</a></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Password Protected</strong> http://github.com/benhuson/password-protected/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Really Simple CAPTCHA</strong> https://ideasilo.wordpress.com/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Sucuri Security - Auditing, Malware Scanner and Hardening</strong> https://sucuri.net/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Captcha Code</strong> http://www.vinojcardoza.com/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For Data Collection</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Advanced CF7 DB</strong>  https://www.vsourz.com/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Contact Form 7</strong> https://ideasilo.wordpress.com/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For Editor</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For Tools</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Easy WP SMTP</strong> https://wp-ecommerce.net/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Cronjob Scheduler</strong> https://wp-ecommerce.net/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For Policy</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>GDPR Cookie Compliance (CCPA, PIPEDA ready)</strong> https://www.mooveagency.com/</p>\n<!-- /wp:paragraph -->','Wordpress should install Plugins','','inherit','closed','closed','','269-revision-v1','','','2021-01-04 23:08:29','2021-01-04 23:08:29','',269,'https://www.mojoin.com/269-revision-v1/',0,'revision','',0),(273,1,'2021-01-04 23:11:47','2021-01-04 23:11:47','<!-- wp:heading -->\n<h2>For Optimization:</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>All In One SEO Pack</strong> https://semperplugins.com/all-in-one-seo-pack-pro-version/</li><li><strong>a3 Lazy Load</strong> https://a3rev.com/</li><li><strong>Google Tag Manager for Wordpress</strong> https://gtm4wp.com/</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>For Security</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>2FAS Light — Google Authenticator</strong>  <a href=\"https://2fas.com/\">https://2fas.com/</a></li><li><strong>Password Protected</strong> http://github.com/benhuson/password-protected/</li><li><strong>Really Simple CAPTCHA</strong> https://ideasilo.wordpress.com/</li><li><strong>Sucuri Security - Auditing, Malware Scanner and Hardening</strong> https://sucuri.net/</li><li><strong>Captcha Code</strong> http://www.vinojcardoza.com/</li><li>miniOrange Limit Login Attempts http://miniorange.com/</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>For Data Collection</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>Advanced CF7 DB</strong>  https://www.vsourz.com/</li><li><strong>Contact Form 7</strong> https://ideasilo.wordpress.com/</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>For Editor</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>Elementor</strong> https://elementor.com/?utm_source=wp-plugins&amp;utm_campaign=author-uri&amp;utm_medium=wp-dash</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>For Tools</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>Easy WP SMTP</strong> https://wp-ecommerce.net/</li><li><strong>Cronjob Scheduler</strong> https://wp-ecommerce.net/</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>For Policy</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>GDPR Cookie Compliance (CCPA, PIPEDA ready)</strong> https://www.mooveagency.com/</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','Wordpress should install Plugins','','inherit','closed','closed','','269-revision-v1','','','2021-01-04 23:11:47','2021-01-04 23:11:47','',269,'https://www.mojoin.com/269-revision-v1/',0,'revision','',0),(274,1,'2021-01-04 23:13:03','2021-01-04 23:13:03','<!-- wp:heading -->\n<h2>For Optimization:</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>All in One SEO</strong> https://aioseo.com/</li><li><strong>a3 Lazy Load</strong> https://a3rev.com/</li><li><strong>Google Tag Manager for Wordpress</strong> https://gtm4wp.com/</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>For Security</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>2FAS Light — Google Authenticator</strong>  <a href=\"https://2fas.com/\">https://2fas.com/</a></li><li><strong>Password Protected</strong> http://github.com/benhuson/password-protected/</li><li><strong>Really Simple CAPTCHA</strong> https://ideasilo.wordpress.com/</li><li><strong>Sucuri Security - Auditing, Malware Scanner and Hardening</strong> https://sucuri.net/</li><li><strong>Captcha Code</strong> http://www.vinojcardoza.com/</li><li>miniOrange Limit Login Attempts http://miniorange.com/</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>For Data Collection</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>Advanced CF7 DB</strong>  https://www.vsourz.com/</li><li><strong>Contact Form 7</strong> https://ideasilo.wordpress.com/</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>For Editor</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>Elementor</strong> https://elementor.com/?utm_source=wp-plugins&amp;utm_campaign=author-uri&amp;utm_medium=wp-dash</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>For Tools</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>Easy WP SMTP</strong> https://wp-ecommerce.net/</li><li><strong>Cronjob Scheduler</strong> https://wp-ecommerce.net/</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>For Policy</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>GDPR Cookie Compliance (CCPA, PIPEDA ready)</strong> https://www.mooveagency.com/</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','Wordpress should install Plugins','','inherit','closed','closed','','269-revision-v1','','','2021-01-04 23:13:03','2021-01-04 23:13:03','',269,'https://www.mojoin.com/269-revision-v1/',0,'revision','',0),(275,1,'2021-01-04 23:15:22','2021-01-04 23:15:22','<!-- wp:heading -->\n<h2>For Optimization:</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>All in One SEO</strong> https://aioseo.com/</li><li><strong>a3 Lazy Load</strong> https://a3rev.com/</li><li><strong>Google Tag Manager for Wordpress</strong> https://gtm4wp.com/</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>For Security</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>2FAS Light — Google Authenticator</strong>  <a href=\"https://2fas.com/\">https://2fas.com/</a></li><li><strong>Password Protected</strong> http://github.com/benhuson/password-protected/</li><li><strong>Really Simple CAPTCHA</strong> https://ideasilo.wordpress.com/</li><li><strong>Sucuri Security - Auditing, Malware Scanner and Hardening</strong> https://sucuri.net/</li><li><strong>Captcha Code</strong> http://www.vinojcardoza.com/</li><li><strong>miniOrange Limit Login Attempts </strong>http://miniorange.com/</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>For Data Collection</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>Advanced CF7 DB</strong>  https://www.vsourz.com/</li><li><strong>Contact Form 7</strong> https://ideasilo.wordpress.com/</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>For Editor</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>Elementor</strong> https://elementor.com/?utm_source=wp-plugins&amp;utm_campaign=author-uri&amp;utm_medium=wp-dash</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>For Tools</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>Easy WP SMTP</strong> https://wp-ecommerce.net/</li><li><strong>Cronjob Scheduler</strong> https://wp-ecommerce.net/</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>For Policy</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><strong>GDPR Cookie Compliance (CCPA, PIPEDA ready)</strong> https://www.mooveagency.com/</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','Wordpress should install Plugins','','inherit','closed','closed','','269-revision-v1','','','2021-01-04 23:15:22','2021-01-04 23:15:22','',269,'https://www.mojoin.com/269-revision-v1/',0,'revision','',0),(277,1,'2021-01-09 21:53:50','0000-00-00 00:00:00','<!-- wp:paragraph -->\n<p>refer to : https://shopify.dev/tutorials/customize-theme-use-products-with-multiple-options</p>\n<!-- /wp:paragraph -->','Use products with multiple options','','draft','open','open','','','','','2021-01-09 21:53:50','2021-01-09 21:53:50','',0,'https://www.mojoin.com/?p=277',0,'post','',0),(278,1,'2021-01-09 21:53:47','2021-01-09 21:53:47','<!-- wp:paragraph -->\n<p>refer to : https://shopify.dev/tutorials/customize-theme-use-products-with-multiple-options</p>\n<!-- /wp:paragraph -->','Use products with multiple options','','inherit','closed','closed','','277-revision-v1','','','2021-01-09 21:53:47','2021-01-09 21:53:47','',277,'https://www.mojoin.com/277-revision-v1/',0,'revision','',0),(279,1,'2021-01-10 01:40:46','0000-00-00 00:00:00','<!-- wp:paragraph -->\n<p>refer to : http://longlivetheinternet.com/shopify-featured-image-in-blog-posts/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','Shopify Featured Image in Blog Posts two different methods','','draft','open','open','','','','','2021-01-10 01:40:46','2021-01-10 01:40:46','',0,'https://www.mojoin.com/?p=279',0,'post','',0),(280,1,'2021-01-10 01:40:42','2021-01-10 01:40:42','<!-- wp:paragraph -->\n<p>refer to : http://longlivetheinternet.com/shopify-featured-image-in-blog-posts/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','Shopify Featured Image in Blog Posts two different methods','','inherit','closed','closed','','279-revision-v1','','','2021-01-10 01:40:42','2021-01-10 01:40:42','',279,'https://www.mojoin.com/279-revision-v1/',0,'revision','',0),(281,1,'2021-01-11 08:57:18','0000-00-00 00:00:00','<!-- wp:paragraph -->\n<p>at product edit page , vendor editor </p>\n<!-- /wp:paragraph -->','How to add or modify Shopify product Vendor Or brand name','','draft','open','open','','','','','2021-01-11 08:57:18','2021-01-11 08:57:18','',0,'https://www.mojoin.com/?p=281',0,'post','',0),(282,1,'2021-01-11 08:57:15','2021-01-11 08:57:15','<!-- wp:paragraph -->\n<p>at product edit page , vendor editor </p>\n<!-- /wp:paragraph -->','How to add or modify Shopify product Vendor Or brand name','','inherit','closed','closed','','281-revision-v1','','','2021-01-11 08:57:15','2021-01-11 08:57:15','',281,'https://www.mojoin.com/281-revision-v1/',0,'revision','',0),(283,1,'2021-01-12 11:25:22','0000-00-00 00:00:00','<!-- wp:paragraph -->\n<p>some times cursor set will make click effect for example mobile clicked has yellow blue effected selected not good, if you want to remove it, just set cursor as none , or </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>@media (max-width: 768px) {</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":1} -->\n<h1>shopify-section-ss-vertical-menu .widget-verticalmenu {</h1>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>-webkit-tap-highlight-color: rgba(255, 255, 255, 0);<br>}<br>}</p>\n<!-- /wp:paragraph -->','Shopify frontend cursor click effect in mobile removed','','draft','open','open','','','','','2021-01-12 11:25:22','2021-01-12 11:25:22','',0,'https://www.mojoin.com/?p=283',0,'post','',0),(284,1,'2021-01-12 11:25:21','2021-01-12 11:25:21','<!-- wp:paragraph -->\n<p>some times cursor set will make click effect for example mobile clicked has yellow blue effected selected not good, if you want to remove it, just set cursor as none , or </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>@media (max-width: 768px) {</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":1} -->\n<h1>shopify-section-ss-vertical-menu .widget-verticalmenu {</h1>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>-webkit-tap-highlight-color: rgba(255, 255, 255, 0);<br>}<br>}</p>\n<!-- /wp:paragraph -->','Shopify frontend cursor click effect in mobile removed','','inherit','closed','closed','','283-revision-v1','','','2021-01-12 11:25:21','2021-01-12 11:25:21','',283,'https://www.mojoin.com/283-revision-v1/',0,'revision','',0),(285,1,'2021-01-13 09:48:08','0000-00-00 00:00:00','<!-- wp:paragraph -->\n<p>refer to : https://www.jqueryscript.net/menu/jQuery-Responsive-Multi-Level-Menu-Plugin-Dlmenu.html</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>how to use in shopify store</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','jquery multiple menus level for shopify mobile','','draft','open','open','','','','','2021-01-13 09:48:08','2021-01-13 09:48:08','',0,'https://www.mojoin.com/?p=285',0,'post','',0),(286,1,'2021-01-13 09:48:03','2021-01-13 09:48:03','<!-- wp:paragraph -->\n<p>refer to : https://www.jqueryscript.net/menu/jQuery-Responsive-Multi-Level-Menu-Plugin-Dlmenu.html</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>how to use in shopify store</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','jquery multiple menus level for shopify mobile','','inherit','closed','closed','','285-revision-v1','','','2021-01-13 09:48:03','2021-01-13 09:48:03','',285,'https://www.mojoin.com/285-revision-v1/',0,'revision','',0),