(499,1,'2021-10-29 04:24:04','2021-10-29 04:24:04','<!-- wp:heading -->\n<h2>Settings</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>For each Shopify store\'s theme, there must have a theme settings file to save all the customized theme settings data.  the file name is settings_schema.json which is a kind of <a href=\"https://www.json.org/json-en.html\">JSON</a> format file.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Location</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>the settings_schema.json is located at : <strong>shopify admin -> online store -> themes -> current online them -> Actions Dropdown -> edit code -> config -> settings_schema.json</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":487,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/settings-schema-location.png\" alt=\"\" class=\"wp-image-487\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Add new Image Setting</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>As we know we can set Shopify stores\' logo at theme header part. But there is a limitation in this way desktop and mobile versions have the same logo. if you want to show a different logo for a mobile browser, how can we achieve this?</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Definitely, we need to find somewhere to set this logo image for the mobile browser, so the best location is we put the settings in Shopify\'s theme setting which means we can add our logo image settings into the settings_schema.json file directly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>open your settings_schema.json file, copy the following codes and paste them into :</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=\"\">{\n \"name\": \"mobile logo\",\n \"settings\": [\n  {\n   \"type\": \"image_picker\",\n   \"id\": \"yx_mobilelogo\"\n  }\n ]\n},</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>when you finished your config file will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":490,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/config-updated-with-newimage.png\" alt=\"\" class=\"wp-image-490\"/><figcaption>here we add a new setting with name \"<strong>mobile logo</strong>\" and its type is \"<strong>image_picke</strong>r\" , settings name is \"<strong>yx_mobilelogo</strong>\".  image_picker is kind of Image Picker setting controller from Shopify.<br>Shopify has developed for use , we just setup and use it directly.<br><br>For Shopify settings there are two types of setting we can use.<br><a href=\"https://shopify.dev/themes/architecture/settings/input-settings\">Input Settings</a> - Settings that can hold a value, and are configurable by merchants.<br><a href=\"https://shopify.dev/themes/architecture/settings/sidebar-settings\">Sidebar Settings</a> - Settings that can’t hold a value, and aren’t configurable by merchants. They’re informational elements that can be used to provide detail and clarity for your input settings.<br><br><br>Save it. go to your theme settings page, you will see your mobile logo setting item there:</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:image {\"id\":496,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/mobile-logo-changes.png\" alt=\"\" class=\"wp-image-496\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Access Logo Image Setting</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>We have put the mobile logo image setting in the theme settings, can be changed easily from the Shopify backend. Now we need to use this setting somewhere. Just as setting\'s name guide we should show mobile logo on the mobile browser only. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Normally Shopify logo file setting will be used at Shopify Header liquid file, for example Shopify Debut theme header.liquid which is at :<br><strong>Shopify Admin -> Online Store -> Themes -> Current Theme Dropdown -> Edit Code -> Sections -> header.liquid</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In the file your can search by \"section.settings.logo\", will show you where Shopify uses this one to show your store logo image from your theme header section settings. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In our case we can access our mobile logo image with : \"settings.yx_mobilelogo\"</p>\n<!-- /wp:paragraph -->','How to add an image setting to Shopify theme setting page','','inherit','closed','closed','','482-revision-v1','','','2021-10-29 04:24:04','2021-10-29 04:24:04','',482,'https://www.mojoin.com/?p=499',0,'revision','',0),(500,1,'2021-10-29 04:27:49','2021-10-29 04:27:49','<!-- wp:heading -->\n<h2>Settings</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>For each Shopify store\'s theme, there must have a theme settings file to save all the customized theme settings data.  the file name is settings_schema.json which is a kind of <a href=\"https://www.json.org/json-en.html\">JSON</a> format file.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Location</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>the settings_schema.json is located at : <strong>shopify admin -> online store -> themes -> current online them -> Actions Dropdown -> edit code -> config -> settings_schema.json</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":487,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/settings-schema-location.png\" alt=\"\" class=\"wp-image-487\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Add new Image Setting</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>As we know we can set Shopify stores\' logo at theme header part. But there is a limitation in this way desktop and mobile versions have the same logo. if you want to show a different logo for a mobile browser, how can we achieve this?</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Definitely, we need to find somewhere to set this logo image for the mobile browser, so the best location is we put the settings in Shopify\'s theme setting which means we can add our logo image settings into the settings_schema.json file directly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>open your settings_schema.json file, copy the following codes and paste them into :</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=\"\">{\n \"name\": \"mobile logo\",\n \"settings\": [\n  {\n   \"type\": \"image_picker\",\n   \"id\": \"yx_mobilelogo\"\n  }\n ]\n},</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>when you finished your config file will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":490,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/config-updated-with-newimage.png\" alt=\"\" class=\"wp-image-490\"/><figcaption>here we add a new setting with name \"<strong>mobile logo</strong>\" and its type is \"<strong>image_picke</strong>r\" , settings name is \"<strong>yx_mobilelogo</strong>\".  image_picker is kind of Image Picker setting controller from Shopify.<br>Shopify has developed for use , we just setup and use it directly.<br><br>For Shopify settings there are two types of setting we can use.<br><a href=\"https://shopify.dev/themes/architecture/settings/input-settings\">Input Settings</a> - Settings that can hold a value, and are configurable by merchants.<br><a href=\"https://shopify.dev/themes/architecture/settings/sidebar-settings\">Sidebar Settings</a> - Settings that can’t hold a value, and aren’t configurable by merchants. They’re informational elements that can be used to provide detail and clarity for your input settings.<br><br><br>Save it. go to your theme settings page, you will see your mobile logo setting item there:</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:image {\"id\":496,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/mobile-logo-changes.png\" alt=\"\" class=\"wp-image-496\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Access Logo Image Setting</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>We have put the mobile logo image setting in the theme settings, can be changed easily from the Shopify backend. Now we need to use this setting somewhere. Just as setting\'s name guide we should show mobile logo on the mobile browser only. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Normally Shopify logo file setting will be used at Shopify Header liquid file, for example Shopify Debut theme header.liquid which is at :<br><strong>Shopify Admin -> Online Store -> Themes -> Current Theme Dropdown -> Edit Code -> Sections -> header.liquid</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In the file your can search by \"section.settings.logo\", will show you where Shopify uses this one to show your store logo image from your theme header section settings. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In our case we can access our mobile logo image with : \"<strong>settings.yx_mobilelogo</strong>\", snippet 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=\"\"> &lt;div class=\"grid grid--no-gutters grid--table site-header__mobile-nav\">\n      &lt;div class=\"grid__item {{ logo_classes }} yx-mobile-logo-only\">\n          &lt;div class=\"h2 site-header__logo\">\n            {%- assign img_url = settings.yx_mobilelogo | img_url: \'1x1\' | replace: \'_1x1.\', \'_{width}x.\' -%}\n            &lt;a href=\"{{ routes.root_url }}\" class=\"yx-mobile-head-logo site-header__logo-image{% if section.settings.align_logo == \'center\' %} site-header__logo-image--centered{% endif %}\">\n             &lt;div class=\"yx-mobile-head-logo-div\">\n              {% capture logo_alt %}{{ settings.yx_mobilelogo_alt | default: shop.name }}{% endcapture %}\n             &lt;img class=\"lazyload js\"\n                   src=\"{{ settings.yx_mobilelogo | img_url: \'300x300\' }}\"\n                   data-src=\"{{ img_url }}\"\n                   data-widths=\"[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]\"\n                   data-aspectratio=\"{{ settings.yx_mobilelogo.aspect_ratio }}\"\n                   data-sizes=\"auto\"\n                   alt=\"{{ logo_alt | escape }}\"\n                   style=\"max-width: 900px\">\n              &lt;noscript>\n                {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}\n                &lt;img src=\"{{ settings.yx_mobilelogo | img_url: image_size }}\"\n                     srcset=\"{{ settings.yx_mobilelogo | img_url: image_size }} 1x, {{ settings.yx_mobilelogo | img_url: image_size, scale: 2 }} 2x\"\n                     alt=\"{{ settings.yx_mobilelogo_alt | default: shop.name }}\"\n                     style=\"max-width: 900px;\">\n              &lt;/noscript>\n              &lt;/div>\n            &lt;/a>\n         &lt;/div>\n      &lt;/div>\n    &lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can copy and tailer them as your requirement.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to add an image setting to Shopify theme setting page','','inherit','closed','closed','','482-revision-v1','','','2021-10-29 04:27:49','2021-10-29 04:27:49','',482,'https://www.mojoin.com/?p=500',0,'revision','',0),(501,1,'2021-10-29 04:28:48','2021-10-29 04:28:48','<!-- wp:heading -->\n<h2>Settings</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>For each Shopify store\'s theme, there must have a theme settings file to save all the customized theme settings data.  the file name is settings_schema.json which is a kind of <a href=\"https://www.json.org/json-en.html\">JSON</a> format file.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Location</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>the settings_schema.json is located at : <strong>shopify admin -> online store -> themes -> current online them -> Actions Dropdown -> edit code -> config -> settings_schema.json</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":487,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/settings-schema-location.png\" alt=\"\" class=\"wp-image-487\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Add new Image Setting</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>As we know we can set Shopify stores\' logo at theme header part. But there is a limitation in this way desktop and mobile versions have the same logo. if you want to show a different logo for a mobile browser, how can we achieve this?</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Definitely, we need to find somewhere to set this logo image for the mobile browser, so the best location is we put the settings in Shopify\'s theme setting which means we can add our logo image settings into the settings_schema.json file directly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>open your settings_schema.json file, copy the following codes and paste them into :</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=\"\">{\n \"name\": \"mobile logo\",\n \"settings\": [\n  {\n   \"type\": \"image_picker\",\n   \"id\": \"yx_mobilelogo\"\n  }\n ]\n},</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>when you finished your config file will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":490,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/config-updated-with-newimage.png\" alt=\"\" class=\"wp-image-490\"/><figcaption>here we add a new setting with name \"<strong>mobile logo</strong>\" and its type is \"<strong>image_picke</strong>r\" , settings name is \"<strong>yx_mobilelogo</strong>\".  image_picker is kind of Image Picker setting controller from Shopify.<br>Shopify has developed for use , we just setup and use it directly.<br><br>For Shopify settings there are two types of setting we can use.<br><a href=\"https://shopify.dev/themes/architecture/settings/input-settings\">Input Settings</a> - Settings that can hold a value, and are configurable by merchants.<br><a href=\"https://shopify.dev/themes/architecture/settings/sidebar-settings\">Sidebar Settings</a> - Settings that can’t hold a value, and aren’t configurable by merchants. They’re informational elements that can be used to provide detail and clarity for your input settings.<br><br><br>Save it. go to your theme settings page, you will see your mobile logo setting item there:</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:image {\"id\":496,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/mobile-logo-changes.png\" alt=\"\" class=\"wp-image-496\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Access Logo Image Setting</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>We have put the mobile logo image setting in the theme settings, can be changed easily from the Shopify backend. Now we need to use this setting somewhere. Just as setting\'s name guide we should show mobile logo on the mobile browser only. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Normally Shopify logo file setting will be used at Shopify Header liquid file, for example Shopify Debut theme header.liquid which is at :<br><strong>Shopify Admin -> Online Store -> Themes -> Current Theme Dropdown -> Edit Code -> Sections -> header.liquid</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In the file your can search by \"section.settings.logo\", will show you where Shopify uses this one to show your store logo image from your theme header section settings. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In our case we can access our mobile logo image with : \"<strong>settings.yx_mobilelogo</strong>\", snippet 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=\"\"> &lt;div class=\"grid grid--no-gutters grid--table site-header__mobile-nav\">\n      &lt;div class=\"grid__item {{ logo_classes }} yx-mobile-logo-only\">\n          &lt;div class=\"h2 site-header__logo\">\n            {%- assign img_url = settings.yx_mobilelogo | img_url: \'1x1\' | replace: \'_1x1.\', \'_{width}x.\' -%}\n            &lt;a href=\"{{ routes.root_url }}\" class=\"yx-mobile-head-logo site-header__logo-image{% if section.settings.align_logo == \'center\' %} site-header__logo-image--centered{% endif %}\">\n             &lt;div class=\"yx-mobile-head-logo-div\">\n              {% capture logo_alt %}{{ settings.yx_mobilelogo_alt | default: shop.name }}{% endcapture %}\n             &lt;img class=\"lazyload js\"\n                   src=\"{{ settings.yx_mobilelogo | img_url: \'300x300\' }}\"\n                   data-src=\"{{ img_url }}\"\n                   data-widths=\"[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]\"\n                   data-aspectratio=\"{{ settings.yx_mobilelogo.aspect_ratio }}\"\n                   data-sizes=\"auto\"\n                   alt=\"{{ logo_alt | escape }}\"\n                   style=\"max-width: 900px\">\n              &lt;noscript>\n                {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}\n                &lt;img src=\"{{ settings.yx_mobilelogo | img_url: image_size }}\"\n                     srcset=\"{{ settings.yx_mobilelogo | img_url: image_size }} 1x, {{ settings.yx_mobilelogo | img_url: image_size, scale: 2 }} 2x\"\n                     alt=\"{{ settings.yx_mobilelogo_alt | default: shop.name }}\"\n                     style=\"max-width: 900px;\">\n              &lt;/noscript>\n              &lt;/div>\n            &lt;/a>\n         &lt;/div>\n      &lt;/div>\n    &lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can copy and tailer them as your requirement. as you see we use class \"yx-mobile-logo-only\" to control this logo only be shown in mobile browser. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to add an image setting to Shopify theme setting page','','inherit','closed','closed','','482-revision-v1','','','2021-10-29 04:28:48','2021-10-29 04:28:48','',482,'https://www.mojoin.com/?p=501',0,'revision','',0),(502,1,'2021-10-29 04:48:23','2021-10-29 04:48:23','<!-- wp:heading -->\n<h2>Settings</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>For each Shopify store\'s theme, there must have a theme settings file to save all the customized theme settings data.  the file name is settings_schema.json which is a kind of <a href=\"https://www.json.org/json-en.html\">JSON</a> format file.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Location</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>the settings_schema.json is located at : <strong>shopify admin -> online store -> themes -> current online them -> Actions Dropdown -> edit code -> config -> settings_schema.json</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":487,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/settings-schema-location.png\" alt=\"\" class=\"wp-image-487\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Add new Image Setting</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>As we know we can set Shopify stores\' logo at theme header part. But there is a limitation in this way desktop and mobile versions have the same logo. if you want to show a different logo for a mobile browser, how can we achieve this?</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Definitely, we need to find somewhere to set this logo image for the mobile browser, so the best location is we put the settings in Shopify\'s theme setting which means we can add our logo image settings into the settings_schema.json file directly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>open your settings_schema.json file, copy the following codes and paste them into :</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=\"\">{\n \"name\": \"mobile logo\",\n \"settings\": [\n  {\n   \"type\": \"image_picker\",\n   \"id\": \"yx_mobilelogo\"\n  }\n ]\n},</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>when you finished your config file will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":490,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/config-updated-with-newimage.png\" alt=\"\" class=\"wp-image-490\"/><figcaption>here we add a new setting with name \"<strong>mobile logo</strong>\" and its type is \"<strong>image_picke</strong>r\" , settings name is \"<strong>yx_mobilelogo</strong>\".  image_picker is kind of Image Picker setting controller from Shopify.<br>Shopify has developed for use , we just setup and use it directly.<br><br>For Shopify settings there are two types of setting we can use.<br><a href=\"https://shopify.dev/themes/architecture/settings/input-settings\">Input Settings</a> - Settings that can hold a value, and are configurable by merchants.<br><a href=\"https://shopify.dev/themes/architecture/settings/sidebar-settings\">Sidebar Settings</a> - Settings that can’t hold a value, and aren’t configurable by merchants. They’re informational elements that can be used to provide detail and clarity for your input settings.<br><br><br>Save it. go to your theme settings page, you will see your mobile logo setting item there:</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:image {\"id\":496,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/mobile-logo-changes.png\" alt=\"\" class=\"wp-image-496\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Access Logo Image Setting</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>We have put the mobile logo image setting in the theme settings, can be changed easily from the Shopify backend. Now we need to use this setting somewhere. Just as setting\'s name guide we should show mobile logo on the mobile browser only. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Normally Shopify logo file setting will be used at Shopify Header liquid file, for example Shopify Debut theme header.liquid which is at :<br><strong>Shopify Admin -> Online Store -> Themes -> Current Theme Dropdown -> Edit Code -> Sections -> header.liquid</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In the file your can search by \"section.settings.logo\", will show you where Shopify uses this one to show your store logo image from your theme header section settings. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In our case we can access our mobile logo image with : \"<strong>settings.yx_mobilelogo</strong>\", snippet 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=\"\"> &lt;div class=\"grid grid--no-gutters grid--table site-header__mobile-nav\">\n      &lt;div class=\"grid__item {{ logo_classes }} yx-mobile-logo-only\">\n          &lt;div class=\"h2 site-header__logo\">\n            {%- assign img_url = settings.yx_mobilelogo | img_url: \'1x1\' | replace: \'_1x1.\', \'_{width}x.\' -%}\n            &lt;a href=\"{{ routes.root_url }}\" class=\"yx-mobile-head-logo site-header__logo-image{% if section.settings.align_logo == \'center\' %} site-header__logo-image--centered{% endif %}\">\n             &lt;div class=\"yx-mobile-head-logo-div\">\n              {% capture logo_alt %}{{ settings.yx_mobilelogo_alt | default: shop.name }}{% endcapture %}\n             &lt;img class=\"lazyload js\"\n                   src=\"{{ settings.yx_mobilelogo | img_url: \'300x300\' }}\"\n                   data-src=\"{{ img_url }}\"\n                   data-widths=\"[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]\"\n                   data-aspectratio=\"{{ settings.yx_mobilelogo.aspect_ratio }}\"\n                   data-sizes=\"auto\"\n                   alt=\"{{ logo_alt | escape }}\"\n                   style=\"max-width: 900px\">\n              &lt;noscript>\n                {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}\n                &lt;img src=\"{{ settings.yx_mobilelogo | img_url: image_size }}\"\n                     srcset=\"{{ settings.yx_mobilelogo | img_url: image_size }} 1x, {{ settings.yx_mobilelogo | img_url: image_size, scale: 2 }} 2x\"\n                     alt=\"{{ settings.yx_mobilelogo_alt | default: shop.name }}\"\n                     style=\"max-width: 900px;\">\n              &lt;/noscript>\n              &lt;/div>\n            &lt;/a>\n         &lt;/div>\n      &lt;/div>\n    &lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can copy and tailer them as your requirement. as you see we use CSS class \"yx-mobile-logo-only\" to control this logo only be shown in mobile browser. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>CSS style as :</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=\"\">.yx-mobile-logo-only{\n    display:none;\n  }\n@media only screen and (max-width: 749px){\n  .yx-mobile-logo-only{\n    display: inline-flex;\n  }\n}</pre>\n<!-- /wp:enlighter/codeblock -->','How to add an image setting to Shopify theme setting page','','inherit','closed','closed','','482-revision-v1','','','2021-10-29 04:48:23','2021-10-29 04:48:23','',482,'https://www.mojoin.com/?p=502',0,'revision','',0),(503,1,'2021-10-29 04:51:38','2021-10-29 04:51:38','<!-- wp:heading -->\n<h2>Settings</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>For each Shopify store\'s theme, there must have a theme settings file to save all the customized theme settings data.  the file name is settings_schema.json which is a kind of <a href=\"https://www.json.org/json-en.html\">JSON</a> format file.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Location</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>the settings_schema.json is located at : <strong>shopify admin -&gt; online store -&gt; themes -&gt; current online them -&gt; Actions Dropdown -&gt; edit code -&gt; config -&gt; settings_schema.json</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":487,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/settings-schema-location.png\" alt=\"\" class=\"wp-image-487\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Add new Image Setting</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>As we know we can set Shopify stores\' logo at theme header part. But there is a limitation in this way desktop and mobile versions have the same logo. if you want to show a different logo for a mobile browser, how can we achieve this?</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Definitely, we need to find somewhere to set this logo image for the mobile browser, so the best location is we put the settings in Shopify\'s theme setting which means we can add our logo image settings into the settings_schema.json file directly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>open your settings_schema.json file, copy the following codes and paste them into :</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=\"\">{\n \"name\": \"mobile logo\",\n \"settings\": [\n  {\n   \"type\": \"image_picker\",\n   \"id\": \"yx_mobilelogo\"\n  }\n ]\n},</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>when you finished your config file will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":490,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/config-updated-with-newimage.png\" alt=\"\" class=\"wp-image-490\"/><figcaption><br><br><br> here we add a new setting with name \"<strong>mobile logo</strong>\" and its type is \"<strong>image_picke</strong>r\" , settings name is \"<strong>yx_mobilelogo</strong>\".  image_picker is kind of Image Picker setting controller from Shopify.<br>Shopify has developed for use , we just setup and use it directly.<br><br>For Shopify settings there are two types of setting we can use.<br><a href=\"https://shopify.dev/themes/architecture/settings/input-settings\">Input Settings</a> - Settings that can hold a value, and are configurable by merchants.<br><a href=\"https://shopify.dev/themes/architecture/settings/sidebar-settings\">Sidebar Settings</a> - Settings that can’t hold a value, and aren’t configurable by merchants. They’re informational elements that can be used to provide detail and clarity for your input settings. <br><br>Save it. go to your theme settings page, you will see your mobile logo setting item there:</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:image {\"id\":496,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/mobile-logo-changes.png\" alt=\"\" class=\"wp-image-496\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Access Logo Image Setting</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>We have put the mobile logo image setting in the theme settings, can be changed easily from the Shopify backend. Now we need to use this setting somewhere. Just as setting\'s name guide we should show mobile logo on the mobile browser only. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Normally Shopify logo file setting will be used at Shopify Header liquid file, for example Shopify Debut theme header.liquid which is at :<br><strong>Shopify Admin -&gt; Online Store -&gt; Themes -&gt; Current Theme Dropdown -&gt; Edit Code -&gt; Sections -&gt; header.liquid</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In the file your can search by \"section.settings.logo\", will show you where Shopify uses this one to show your store logo image from your theme header section settings. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In our case we can access our mobile logo image with : \"<strong>settings.yx_mobilelogo</strong>\", snippet 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=\"\"> &lt;div class=\"grid grid--no-gutters grid--table site-header__mobile-nav\">\n      &lt;div class=\"grid__item {{ logo_classes }} yx-mobile-logo-only\">\n          &lt;div class=\"h2 site-header__logo\">\n            {%- assign img_url = settings.yx_mobilelogo | img_url: \'1x1\' | replace: \'_1x1.\', \'_{width}x.\' -%}\n            &lt;a href=\"{{ routes.root_url }}\" class=\"yx-mobile-head-logo site-header__logo-image{% if section.settings.align_logo == \'center\' %} site-header__logo-image--centered{% endif %}\">\n             &lt;div class=\"yx-mobile-head-logo-div\">\n              {% capture logo_alt %}{{ settings.yx_mobilelogo_alt | default: shop.name }}{% endcapture %}\n             &lt;img class=\"lazyload js\"\n                   src=\"{{ settings.yx_mobilelogo | img_url: \'300x300\' }}\"\n                   data-src=\"{{ img_url }}\"\n                   data-widths=\"[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]\"\n                   data-aspectratio=\"{{ settings.yx_mobilelogo.aspect_ratio }}\"\n                   data-sizes=\"auto\"\n                   alt=\"{{ logo_alt | escape }}\"\n                   style=\"max-width: 900px\">\n              &lt;noscript>\n                {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}\n                &lt;img src=\"{{ settings.yx_mobilelogo | img_url: image_size }}\"\n                     srcset=\"{{ settings.yx_mobilelogo | img_url: image_size }} 1x, {{ settings.yx_mobilelogo | img_url: image_size, scale: 2 }} 2x\"\n                     alt=\"{{ settings.yx_mobilelogo_alt | default: shop.name }}\"\n                     style=\"max-width: 900px;\">\n              &lt;/noscript>\n              &lt;/div>\n            &lt;/a>\n         &lt;/div>\n      &lt;/div>\n    &lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can copy and tailer them as your requirement. as you see we use CSS class \"yx-mobile-logo-only\" to control this logo only be shown in mobile browser. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>CSS style as :</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=\"\">.yx-mobile-logo-only{\n    display:none;\n  }\n@media only screen and (max-width: 749px){\n  .yx-mobile-logo-only{\n    display: inline-flex;\n  }\n}</pre>\n<!-- /wp:enlighter/codeblock -->','How to add an image setting to Shopify theme setting page','','inherit','closed','closed','','482-revision-v1','','','2021-10-29 04:51:38','2021-10-29 04:51:38','',482,'https://www.mojoin.com/?p=503',0,'revision','',0),(504,1,'2021-10-29 04:51:46','2021-10-29 04:51:46','<!-- wp:heading -->\n<h2>Settings</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>For each Shopify store\'s theme, there must have a theme settings file to save all the customized theme settings data.  the file name is settings_schema.json which is a kind of <a href=\"https://www.json.org/json-en.html\">JSON</a> format file.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Location</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>the settings_schema.json is located at : <strong>shopify admin -&gt; online store -&gt; themes -&gt; current online them -&gt; Actions Dropdown -&gt; edit code -&gt; config -&gt; settings_schema.json</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":487,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/settings-schema-location.png\" alt=\"\" class=\"wp-image-487\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Add new Image Setting</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>As we know we can set Shopify stores\' logo at theme header part. But there is a limitation in this way desktop and mobile versions have the same logo. if you want to show a different logo for a mobile browser, how can we achieve this?</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Definitely, we need to find somewhere to set this logo image for the mobile browser, so the best location is we put the settings in Shopify\'s theme setting which means we can add our logo image settings into the settings_schema.json file directly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>open your settings_schema.json file, copy the following codes and paste them into :</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=\"\">{\n \"name\": \"mobile logo\",\n \"settings\": [\n  {\n   \"type\": \"image_picker\",\n   \"id\": \"yx_mobilelogo\"\n  }\n ]\n},</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>when you finished your config file will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":490,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/config-updated-with-newimage.png\" alt=\"\" class=\"wp-image-490\"/><figcaption><br>here we add a new setting with name \"<strong>mobile logo</strong>\" and its type is \"<strong>image_picke</strong>r\" , settings name is \"<strong>yx_mobilelogo</strong>\".  image_picker is kind of Image Picker setting controller from Shopify.<br>Shopify has developed for use , we just setup and use it directly.<br><br>For Shopify settings there are two types of setting we can use.<br><a href=\"https://shopify.dev/themes/architecture/settings/input-settings\">Input Settings</a> - Settings that can hold a value, and are configurable by merchants.<br><a href=\"https://shopify.dev/themes/architecture/settings/sidebar-settings\">Sidebar Settings</a> - Settings that can’t hold a value, and aren’t configurable by merchants. They’re informational elements that can be used to provide detail and clarity for your input settings. <br><br>Save it. go to your theme settings page, you will see your mobile logo setting item there:</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:image {\"id\":496,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/mobile-logo-changes.png\" alt=\"\" class=\"wp-image-496\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Access Logo Image Setting</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>We have put the mobile logo image setting in the theme settings, can be changed easily from the Shopify backend. Now we need to use this setting somewhere. Just as setting\'s name guide we should show mobile logo on the mobile browser only. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Normally Shopify logo file setting will be used at Shopify Header liquid file, for example Shopify Debut theme header.liquid which is at :<br><strong>Shopify Admin -&gt; Online Store -&gt; Themes -&gt; Current Theme Dropdown -&gt; Edit Code -&gt; Sections -&gt; header.liquid</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In the file your can search by \"section.settings.logo\", will show you where Shopify uses this one to show your store logo image from your theme header section settings. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In our case we can access our mobile logo image with : \"<strong>settings.yx_mobilelogo</strong>\", snippet 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=\"\"> &lt;div class=\"grid grid--no-gutters grid--table site-header__mobile-nav\">\n      &lt;div class=\"grid__item {{ logo_classes }} yx-mobile-logo-only\">\n          &lt;div class=\"h2 site-header__logo\">\n            {%- assign img_url = settings.yx_mobilelogo | img_url: \'1x1\' | replace: \'_1x1.\', \'_{width}x.\' -%}\n            &lt;a href=\"{{ routes.root_url }}\" class=\"yx-mobile-head-logo site-header__logo-image{% if section.settings.align_logo == \'center\' %} site-header__logo-image--centered{% endif %}\">\n             &lt;div class=\"yx-mobile-head-logo-div\">\n              {% capture logo_alt %}{{ settings.yx_mobilelogo_alt | default: shop.name }}{% endcapture %}\n             &lt;img class=\"lazyload js\"\n                   src=\"{{ settings.yx_mobilelogo | img_url: \'300x300\' }}\"\n                   data-src=\"{{ img_url }}\"\n                   data-widths=\"[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]\"\n                   data-aspectratio=\"{{ settings.yx_mobilelogo.aspect_ratio }}\"\n                   data-sizes=\"auto\"\n                   alt=\"{{ logo_alt | escape }}\"\n                   style=\"max-width: 900px\">\n              &lt;noscript>\n                {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}\n                &lt;img src=\"{{ settings.yx_mobilelogo | img_url: image_size }}\"\n                     srcset=\"{{ settings.yx_mobilelogo | img_url: image_size }} 1x, {{ settings.yx_mobilelogo | img_url: image_size, scale: 2 }} 2x\"\n                     alt=\"{{ settings.yx_mobilelogo_alt | default: shop.name }}\"\n                     style=\"max-width: 900px;\">\n              &lt;/noscript>\n              &lt;/div>\n            &lt;/a>\n         &lt;/div>\n      &lt;/div>\n    &lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can copy and tailer them as your requirement. as you see we use CSS class \"yx-mobile-logo-only\" to control this logo only be shown in mobile browser. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>CSS style as :</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=\"\">.yx-mobile-logo-only{\n    display:none;\n  }\n@media only screen and (max-width: 749px){\n  .yx-mobile-logo-only{\n    display: inline-flex;\n  }\n}</pre>\n<!-- /wp:enlighter/codeblock -->','How to add an image setting to Shopify theme setting page','','inherit','closed','closed','','482-revision-v1','','','2021-10-29 04:51:46','2021-10-29 04:51:46','',482,'https://www.mojoin.com/?p=504',0,'revision','',0),(505,1,'2021-10-29 04:52:47','2021-10-29 04:52:47','<!-- wp:heading -->\n<h2>Settings</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>For each Shopify store\'s theme, there must have a theme settings file to save all the customized theme settings data.  the file name is settings_schema.json which is a kind of <a href=\"https://www.json.org/json-en.html\">JSON</a> format file.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Location</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>the settings_schema.json is located at : <strong>shopify admin -&gt; online store -&gt; themes -&gt; current online them -&gt; Actions Dropdown -&gt; edit code -&gt; config -&gt; settings_schema.json</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":487,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/settings-schema-location.png\" alt=\"\" class=\"wp-image-487\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Add new Image Setting</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>As we know we can set Shopify stores\' logo at theme header part. But there is a limitation in this way desktop and mobile versions have the same logo. if you want to show a different logo for a mobile browser, how can we achieve this?</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Definitely, we need to find somewhere to set this logo image for the mobile browser, so the best location is we put the settings in Shopify\'s theme setting which means we can add our logo image settings into the settings_schema.json file directly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>open your settings_schema.json file, copy the following codes and paste them into :</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=\"\">{\n \"name\": \"mobile logo\",\n \"settings\": [\n  {\n   \"type\": \"image_picker\",\n   \"id\": \"yx_mobilelogo\"\n  }\n ]\n},</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>when you finished your config file will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":490,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/config-updated-with-newimage.png\" alt=\"\" class=\"wp-image-490\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>here we add a new setting with name \"<strong>mobile logo</strong>\" and its type is \"<strong>image_picke</strong>r\" , settings name is \"<strong>yx_mobilelogo</strong>\". image_picker is kind of Image Picker setting controller from Shopify.<br>Shopify has developed for use , we just setup and use it directly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For Shopify settings there are two types of setting we can use.<br><a href=\"https://shopify.dev/themes/architecture/settings/input-settings\">Input Settings</a> - Settings that can hold a value, and are configurable by merchants.<br><a href=\"https://shopify.dev/themes/architecture/settings/sidebar-settings\">Sidebar Settings</a> - Settings that can’t hold a value, and aren’t configurable by merchants. They’re informational elements that can be used to provide detail and clarity for your input settings.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Save it. go to your theme settings page, you will see your mobile logo setting item there:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"id\":496,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/10/mobile-logo-changes.png\" alt=\"\" class=\"wp-image-496\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Access Logo Image Setting</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>We have put the mobile logo image setting in the theme settings, can be changed easily from the Shopify backend. Now we need to use this setting somewhere. Just as setting\'s name guide we should show mobile logo on the mobile browser only. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Normally Shopify logo file setting will be used at Shopify Header liquid file, for example Shopify Debut theme header.liquid which is at :<br><strong>Shopify Admin -&gt; Online Store -&gt; Themes -&gt; Current Theme Dropdown -&gt; Edit Code -&gt; Sections -&gt; header.liquid</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In the file your can search by \"section.settings.logo\", will show you where Shopify uses this one to show your store logo image from your theme header section settings. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In our case we can access our mobile logo image with : \"<strong>settings.yx_mobilelogo</strong>\", snippet 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=\"\"> &lt;div class=\"grid grid--no-gutters grid--table site-header__mobile-nav\">\n      &lt;div class=\"grid__item {{ logo_classes }} yx-mobile-logo-only\">\n          &lt;div class=\"h2 site-header__logo\">\n            {%- assign img_url = settings.yx_mobilelogo | img_url: \'1x1\' | replace: \'_1x1.\', \'_{width}x.\' -%}\n            &lt;a href=\"{{ routes.root_url }}\" class=\"yx-mobile-head-logo site-header__logo-image{% if section.settings.align_logo == \'center\' %} site-header__logo-image--centered{% endif %}\">\n             &lt;div class=\"yx-mobile-head-logo-div\">\n              {% capture logo_alt %}{{ settings.yx_mobilelogo_alt | default: shop.name }}{% endcapture %}\n             &lt;img class=\"lazyload js\"\n                   src=\"{{ settings.yx_mobilelogo | img_url: \'300x300\' }}\"\n                   data-src=\"{{ img_url }}\"\n                   data-widths=\"[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]\"\n                   data-aspectratio=\"{{ settings.yx_mobilelogo.aspect_ratio }}\"\n                   data-sizes=\"auto\"\n                   alt=\"{{ logo_alt | escape }}\"\n                   style=\"max-width: 900px\">\n              &lt;noscript>\n                {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}\n                &lt;img src=\"{{ settings.yx_mobilelogo | img_url: image_size }}\"\n                     srcset=\"{{ settings.yx_mobilelogo | img_url: image_size }} 1x, {{ settings.yx_mobilelogo | img_url: image_size, scale: 2 }} 2x\"\n                     alt=\"{{ settings.yx_mobilelogo_alt | default: shop.name }}\"\n                     style=\"max-width: 900px;\">\n              &lt;/noscript>\n              &lt;/div>\n            &lt;/a>\n         &lt;/div>\n      &lt;/div>\n    &lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>you can copy and tailer them as your requirement. as you see we use CSS class \"yx-mobile-logo-only\" to control this logo only be shown in mobile browser. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>CSS style as :</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=\"\">.yx-mobile-logo-only{\n    display:none;\n  }\n@media only screen and (max-width: 749px){\n  .yx-mobile-logo-only{\n    display: inline-flex;\n  }\n}</pre>\n<!-- /wp:enlighter/codeblock -->','How to add an image setting to Shopify theme setting page','','inherit','closed','closed','','482-revision-v1','','','2021-10-29 04:52:47','2021-10-29 04:52:47','',482,'https://www.mojoin.com/?p=505',0,'revision','',0),(508,1,'2021-11-13 20:24:06','2021-11-13 20:24:06','<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 20:24:06','2021-11-13 20:24:06','',287,'https://www.mojoin.com/?p=508',0,'revision','',0),(509,1,'2021-11-13 20:36:04','2021-11-13 20:36:04','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you who got this issue, but there are also a lot of other Shopify users who have been trapped here before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 20:36:04','2021-11-13 20:36:04','',287,'https://www.mojoin.com/?p=509',0,'revision','',0),(510,1,'2021-11-13 20:39:50','2021-11-13 20:39:50','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you who got this issue, but there are also a lot of other Shopify users who have been trapped here before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 20:39:50','2021-11-13 20:39:50','',287,'https://www.mojoin.com/?p=510',0,'revision','',0),(511,1,'2021-11-13 20:44:42','2021-11-13 20:44:42','','shopify-sub-category','','inherit','open','closed','','shopify-sub-category','','','2021-11-13 20:44:42','2021-11-13 20:44:42','',287,'https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png',0,'attachment','image/png',0),(512,1,'2021-11-13 20:46:55','2021-11-13 20:46:55','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you who got this issue, but there are also a lot of other Shopify users who have been trapped here before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 20:46:55','2021-11-13 20:46:55','',287,'https://www.mojoin.com/?p=512',0,'revision','',0),(513,1,'2021-11-13 20:48:03','2021-11-13 20:48:03','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you who got this issue, but there are also a lot of other Shopify users who have been trapped here before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 20:48:03','2021-11-13 20:48:03','',287,'https://www.mojoin.com/?p=513',0,'revision','',0),(514,1,'2021-11-13 20:48:21','2021-11-13 20:48:21','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you who got this issue, but there are also a lot of other Shopify users who have been trapped here before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 20:48:21','2021-11-13 20:48:21','',287,'https://www.mojoin.com/?p=514',0,'revision','',0),(515,1,'2021-11-13 20:52:08','2021-11-13 20:52:08','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you who got this issue, but there are also a lot of other Shopify users who have been trapped here before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li>Create a new Shopify page template</li><li>Select a theme</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 20:52:08','2021-11-13 20:52:08','',287,'https://www.mojoin.com/?p=515',0,'revision','',0),(516,1,'2021-11-13 20:52:42','2021-11-13 20:52:42','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you who got this issue, but there are also a lot of other Shopify users who have been trapped here before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li>Create a new Shopify page template</li><li>Select a theme</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 20:52:42','2021-11-13 20:52:42','',287,'https://www.mojoin.com/?p=516',0,'revision','',0),(517,1,'2021-11-13 20:54:58','2021-11-13 20:54:58','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you who got this issue, but there are also a lot of other Shopify users who have been trapped here before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li>Create a new Shopify page template</li><li>Select a theme</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called <strong>list-collections</strong>.</li><li>Delete the existing code in your new <code>page.list-collections</code> file. Find your theme code below and copy and paste the code in your <code>page.list-collections</code> file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 20:54:58','2021-11-13 20:54:58','',287,'https://www.mojoin.com/?p=517',0,'revision','',0),(518,1,'2021-11-13 20:55:26','2021-11-13 20:55:26','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page looks like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you who got this issue, but there are also a lot of other Shopify users who have been trapped here before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li>Create a new Shopify page template</li><li>Select a theme</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called <strong>list-collections</strong>.</li><li>Delete the existing code in your new <code>page.list-collections</code> file. Find your theme code below and copy and paste the code in your <code>page.list-collections</code> file.</li><li>Click <strong>Save</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 -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 20:55:26','2021-11-13 20:55:26','',287,'https://www.mojoin.com/?p=518',0,'revision','',0),(519,1,'2021-11-13 20:57:24','2021-11-13 20:57:24','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li>Create a new Shopify page template</li><li>Select a theme</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called <strong>list-collections</strong>.</li><li>Delete the existing code in your new <code>page.list-collections</code> file. Find your theme code below and copy and paste the code in your <code>page.list-collections</code> file.</li><li>Click <strong>Save</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 -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 20:57:24','2021-11-13 20:57:24','',287,'https://www.mojoin.com/?p=519',0,'revision','',0),(520,1,'2021-11-13 20:57:32','2021-11-13 20:57:32','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li>Create a new Shopify page template</li><li>Select a theme</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called <strong>list-collections</strong>.</li><li>Delete the existing code in your new <code>page.list-collections</code> file. Find your theme code below and copy and paste the code in your <code>page.list-collections</code> file.</li><li>Click <strong>Save</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 -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 20:57:32','2021-11-13 20:57:32','',287,'https://www.mojoin.com/?p=520',0,'revision','',0),(521,1,'2021-11-13 22:04:59','2021-11-13 22:04:59','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li>Select a theme</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called <strong>list-collections</strong>.</li><li>Delete the existing code in your new <code>page.list-collections</code> file. Find your theme code below and copy and paste the code in your <code>page.list-collections</code> file.</li><li>Click <strong>Save</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 -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:04:59','2021-11-13 22:04:59','',287,'https://www.mojoin.com/?p=521',0,'revision','',0),(522,1,'2021-11-13 22:10:31','2021-11-13 22:10:31','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li>Select your template code</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:10:31','2021-11-13 22:10:31','',287,'https://www.mojoin.com/?p=522',0,'revision','',0),(523,1,'2021-11-13 22:11:44','2021-11-13 22:11:44','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li>Select your template code</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:11:44','2021-11-13 22:11:44','',287,'https://www.mojoin.com/?p=523',0,'revision','',0),(524,1,'2021-11-13 22:13:04','2021-11-13 22:13:04','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li>Select your template code</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:13:04','2021-11-13 22:13:04','',287,'https://www.mojoin.com/?p=524',0,'revision','',0),(525,1,'2021-11-13 22:14:30','2021-11-13 22:14:30','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li>Select your template code</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:14:30','2021-11-13 22:14:30','',287,'https://www.mojoin.com/?p=525',0,'revision','',0),(526,1,'2021-11-13 22:15:09','2021-11-13 22:15:09','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li>Select your template code</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>6) Simplee</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:15:09','2021-11-13 22:15:09','',287,'https://www.mojoin.com/?p=526',0,'revision','',0),(527,1,'2021-11-13 22:15:45','2021-11-13 22:15:45','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li>Select your template code</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>6) Simplee</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>6) Venture</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n &lt;div class=\"content-block\">\n   &lt;div class=\"rte rte--indented-images\">\n     {{ page.content }}\n   &lt;/div>\n &lt;/div>\n\n {%- assign collection_count = 0 -%}\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection_count = collection_count | plus: 1 -%}\n   {%- endif -%}\n {%- endfor -%}\n\n {% assign number_rows = 1 %}\n\n {% case collection_count %}\n   {% when 1 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 2 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 3 %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n   {% when 4 %}\n     {% assign grid_item_width = \'medium-up--one-quarter\' %}\n     {% assign height = 235 %}\n   {% else %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}\n {% endcase %}\n\n &lt;div class=\"grid grid--no-gutters grid--uniform collection\" data-number-rows=\"{{ number_rows }}\">\n   {% assign row_number = 1 %}\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign featured_collection = collections[link.object.handle] -%}\n       {% if collection_count > 4 and forloop.index > 3 %}\n         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}\n       {% endif %}\n       {% include \'collection-grid-item\' with stretch_collection_image: false, height: height %}\n     {%- endif -%}\n   {%- endfor -%}\n &lt;/div>\n\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:15:45','2021-11-13 22:15:45','',287,'https://www.mojoin.com/?p=527',0,'revision','',0),(528,1,'2021-11-13 22:23:39','2021-11-13 22:23:39','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li>Select your template code</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use, please click the related theme button then copy and paste the codes in your page.list-cats file:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\">Boundless</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-boundless\"><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>6) Simplee</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>6) Venture</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n &lt;div class=\"content-block\">\n   &lt;div class=\"rte rte--indented-images\">\n     {{ page.content }}\n   &lt;/div>\n &lt;/div>\n\n {%- assign collection_count = 0 -%}\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection_count = collection_count | plus: 1 -%}\n   {%- endif -%}\n {%- endfor -%}\n\n {% assign number_rows = 1 %}\n\n {% case collection_count %}\n   {% when 1 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 2 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 3 %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n   {% when 4 %}\n     {% assign grid_item_width = \'medium-up--one-quarter\' %}\n     {% assign height = 235 %}\n   {% else %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}\n {% endcase %}\n\n &lt;div class=\"grid grid--no-gutters grid--uniform collection\" data-number-rows=\"{{ number_rows }}\">\n   {% assign row_number = 1 %}\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign featured_collection = collections[link.object.handle] -%}\n       {% if collection_count > 4 and forloop.index > 3 %}\n         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}\n       {% endif %}\n       {% include \'collection-grid-item\' with stretch_collection_image: false, height: height %}\n     {%- endif -%}\n   {%- endfor -%}\n &lt;/div>\n\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:23:39','2021-11-13 22:23:39','',287,'https://www.mojoin.com/?p=528',0,'revision','',0),(529,1,'2021-11-13 22:24:04','2021-11-13 22:24:04','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li>Select your template code</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use, please click the related theme button then copy and paste the codes in your page.list-cats file:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-boundless\">Boundless</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-boundless\"><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>6) Simplee</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>6) Venture</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n &lt;div class=\"content-block\">\n   &lt;div class=\"rte rte--indented-images\">\n     {{ page.content }}\n   &lt;/div>\n &lt;/div>\n\n {%- assign collection_count = 0 -%}\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection_count = collection_count | plus: 1 -%}\n   {%- endif -%}\n {%- endfor -%}\n\n {% assign number_rows = 1 %}\n\n {% case collection_count %}\n   {% when 1 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 2 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 3 %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n   {% when 4 %}\n     {% assign grid_item_width = \'medium-up--one-quarter\' %}\n     {% assign height = 235 %}\n   {% else %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}\n {% endcase %}\n\n &lt;div class=\"grid grid--no-gutters grid--uniform collection\" data-number-rows=\"{{ number_rows }}\">\n   {% assign row_number = 1 %}\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign featured_collection = collections[link.object.handle] -%}\n       {% if collection_count > 4 and forloop.index > 3 %}\n         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}\n       {% endif %}\n       {% include \'collection-grid-item\' with stretch_collection_image: false, height: height %}\n     {%- endif -%}\n   {%- endfor -%}\n &lt;/div>\n\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:24:04','2021-11-13 22:24:04','',287,'https://www.mojoin.com/?p=529',0,'revision','',0),(530,1,'2021-11-13 22:32:19','2021-11-13 22:32:19','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li>Select your template code</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use, please click the related theme button then copy and paste the codes in your page.list-cats file:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-boundless\">Boundless</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\">Brooklyn</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-boundless\"><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>6) Simplee</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>6) Venture</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n &lt;div class=\"content-block\">\n   &lt;div class=\"rte rte--indented-images\">\n     {{ page.content }}\n   &lt;/div>\n &lt;/div>\n\n {%- assign collection_count = 0 -%}\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection_count = collection_count | plus: 1 -%}\n   {%- endif -%}\n {%- endfor -%}\n\n {% assign number_rows = 1 %}\n\n {% case collection_count %}\n   {% when 1 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 2 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 3 %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n   {% when 4 %}\n     {% assign grid_item_width = \'medium-up--one-quarter\' %}\n     {% assign height = 235 %}\n   {% else %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}\n {% endcase %}\n\n &lt;div class=\"grid grid--no-gutters grid--uniform collection\" data-number-rows=\"{{ number_rows }}\">\n   {% assign row_number = 1 %}\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign featured_collection = collections[link.object.handle] -%}\n       {% if collection_count > 4 and forloop.index > 3 %}\n         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}\n       {% endif %}\n       {% include \'collection-grid-item\' with stretch_collection_image: false, height: height %}\n     {%- endif -%}\n   {%- endfor -%}\n &lt;/div>\n\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:32:19','2021-11-13 22:32:19','',287,'https://www.mojoin.com/?p=530',0,'revision','',0),(531,1,'2021-11-13 22:32:41','2021-11-13 22:32:41','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li>Select your template code</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use, please click the related theme button then copy and paste the codes in your page.list-cats file:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-boundless\">Boundless</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\">Brooklyn</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-boundless\"><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-brooklyn\"><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>6) Simplee</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>6) Venture</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n &lt;div class=\"content-block\">\n   &lt;div class=\"rte rte--indented-images\">\n     {{ page.content }}\n   &lt;/div>\n &lt;/div>\n\n {%- assign collection_count = 0 -%}\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection_count = collection_count | plus: 1 -%}\n   {%- endif -%}\n {%- endfor -%}\n\n {% assign number_rows = 1 %}\n\n {% case collection_count %}\n   {% when 1 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 2 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 3 %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n   {% when 4 %}\n     {% assign grid_item_width = \'medium-up--one-quarter\' %}\n     {% assign height = 235 %}\n   {% else %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}\n {% endcase %}\n\n &lt;div class=\"grid grid--no-gutters grid--uniform collection\" data-number-rows=\"{{ number_rows }}\">\n   {% assign row_number = 1 %}\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign featured_collection = collections[link.object.handle] -%}\n       {% if collection_count > 4 and forloop.index > 3 %}\n         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}\n       {% endif %}\n       {% include \'collection-grid-item\' with stretch_collection_image: false, height: height %}\n     {%- endif -%}\n   {%- endfor -%}\n &lt;/div>\n\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:32:41','2021-11-13 22:32:41','',287,'https://www.mojoin.com/?p=531',0,'revision','',0),(532,1,'2021-11-13 22:32:50','2021-11-13 22:32:50','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li>Select your template code</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use, please click the related theme button then copy and paste the codes in your page.list-cats file:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-boundless\">Boundless</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-brooklyn\">Brooklyn</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-boundless\"><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-brooklyn\"><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>6) Simplee</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>6) Venture</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n &lt;div class=\"content-block\">\n   &lt;div class=\"rte rte--indented-images\">\n     {{ page.content }}\n   &lt;/div>\n &lt;/div>\n\n {%- assign collection_count = 0 -%}\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection_count = collection_count | plus: 1 -%}\n   {%- endif -%}\n {%- endfor -%}\n\n {% assign number_rows = 1 %}\n\n {% case collection_count %}\n   {% when 1 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 2 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 3 %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n   {% when 4 %}\n     {% assign grid_item_width = \'medium-up--one-quarter\' %}\n     {% assign height = 235 %}\n   {% else %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}\n {% endcase %}\n\n &lt;div class=\"grid grid--no-gutters grid--uniform collection\" data-number-rows=\"{{ number_rows }}\">\n   {% assign row_number = 1 %}\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign featured_collection = collections[link.object.handle] -%}\n       {% if collection_count > 4 and forloop.index > 3 %}\n         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}\n       {% endif %}\n       {% include \'collection-grid-item\' with stretch_collection_image: false, height: height %}\n     {%- endif -%}\n   {%- endfor -%}\n &lt;/div>\n\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:32:50','2021-11-13 22:32:50','',287,'https://www.mojoin.com/?p=532',0,'revision','',0),(533,1,'2021-11-13 22:34:12','2021-11-13 22:34:12','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li>Select your template code</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use, please click the related theme button then copy and paste the codes in your page.list-cats file:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-boundless\">Boundless</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-brooklyn\">Brooklyn</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">Debut</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">Minimal</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">Narrative</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">Simple</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">Venture</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-boundless\"><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-brooklyn\"><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>6) Simplee</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p><strong>6) Venture</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n &lt;div class=\"content-block\">\n   &lt;div class=\"rte rte--indented-images\">\n     {{ page.content }}\n   &lt;/div>\n &lt;/div>\n\n {%- assign collection_count = 0 -%}\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection_count = collection_count | plus: 1 -%}\n   {%- endif -%}\n {%- endfor -%}\n\n {% assign number_rows = 1 %}\n\n {% case collection_count %}\n   {% when 1 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 2 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 3 %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n   {% when 4 %}\n     {% assign grid_item_width = \'medium-up--one-quarter\' %}\n     {% assign height = 235 %}\n   {% else %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}\n {% endcase %}\n\n &lt;div class=\"grid grid--no-gutters grid--uniform collection\" data-number-rows=\"{{ number_rows }}\">\n   {% assign row_number = 1 %}\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign featured_collection = collections[link.object.handle] -%}\n       {% if collection_count > 4 and forloop.index > 3 %}\n         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}\n       {% endif %}\n       {% include \'collection-grid-item\' with stretch_collection_image: false, height: height %}\n     {%- endif -%}\n   {%- endfor -%}\n &lt;/div>\n\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:34:12','2021-11-13 22:34:12','',287,'https://www.mojoin.com/?p=533',0,'revision','',0),(534,1,'2021-11-13 22:35:53','2021-11-13 22:35:53','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li>Select your template code</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use, please click the related theme button then copy and paste the codes in your page.list-cats file:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-boundless\">Boundless</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-brooklyn\">Brooklyn</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\">Debut</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\">Minimal</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\">Narrative</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\">Simple</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\">Venture</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-boundless\"><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-brooklyn\"><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-debut\"><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-minimal\"><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-narrative\"><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-simple\"><strong>6) Simple</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-venture\"><strong>7) Venture</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n &lt;div class=\"content-block\">\n   &lt;div class=\"rte rte--indented-images\">\n     {{ page.content }}\n   &lt;/div>\n &lt;/div>\n\n {%- assign collection_count = 0 -%}\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection_count = collection_count | plus: 1 -%}\n   {%- endif -%}\n {%- endfor -%}\n\n {% assign number_rows = 1 %}\n\n {% case collection_count %}\n   {% when 1 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 2 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 3 %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n   {% when 4 %}\n     {% assign grid_item_width = \'medium-up--one-quarter\' %}\n     {% assign height = 235 %}\n   {% else %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}\n {% endcase %}\n\n &lt;div class=\"grid grid--no-gutters grid--uniform collection\" data-number-rows=\"{{ number_rows }}\">\n   {% assign row_number = 1 %}\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign featured_collection = collections[link.object.handle] -%}\n       {% if collection_count > 4 and forloop.index > 3 %}\n         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}\n       {% endif %}\n       {% include \'collection-grid-item\' with stretch_collection_image: false, height: height %}\n     {%- endif -%}\n   {%- endfor -%}\n &lt;/div>\n\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:35:53','2021-11-13 22:35:53','',287,'https://www.mojoin.com/?p=534',0,'revision','',0),(535,1,'2021-11-13 22:37:09','2021-11-13 22:37:09','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li>Select your template code</li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2>Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use, please click the related theme button then copy and paste the codes in your page.list-cats file:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-boundless\">Boundless</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-brooklyn\">Brooklyn</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-debut\">Debut</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-minimal\">Minimal</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-narrative\">Narrative</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-simple\">Simple</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-venture\">Venture</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-boundless\"><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-brooklyn\"><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-debut\"><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-minimal\"><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-narrative\"><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-simple\"><strong>6) Simple</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-venture\"><strong>7) Venture</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n &lt;div class=\"content-block\">\n   &lt;div class=\"rte rte--indented-images\">\n     {{ page.content }}\n   &lt;/div>\n &lt;/div>\n\n {%- assign collection_count = 0 -%}\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection_count = collection_count | plus: 1 -%}\n   {%- endif -%}\n {%- endfor -%}\n\n {% assign number_rows = 1 %}\n\n {% case collection_count %}\n   {% when 1 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 2 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 3 %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n   {% when 4 %}\n     {% assign grid_item_width = \'medium-up--one-quarter\' %}\n     {% assign height = 235 %}\n   {% else %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}\n {% endcase %}\n\n &lt;div class=\"grid grid--no-gutters grid--uniform collection\" data-number-rows=\"{{ number_rows }}\">\n   {% assign row_number = 1 %}\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign featured_collection = collections[link.object.handle] -%}\n       {% if collection_count > 4 and forloop.index > 3 %}\n         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}\n       {% endif %}\n       {% include \'collection-grid-item\' with stretch_collection_image: false, height: height %}\n     {%- endif -%}\n   {%- endfor -%}\n &lt;/div>\n\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:37:09','2021-11-13 22:37:09','',287,'https://www.mojoin.com/?p=535',0,'revision','',0),(537,1,'2021-11-13 22:49:58','2021-11-13 22:49:58','.wp-block-buttons .wp-block-button a.wp-block-button__link{\n	padding: calc(.367em + 2px) calc(0.533em + 2px);\n}','hueman-child','','publish','closed','closed','','hueman-child','','','2021-11-13 22:51:03','2021-11-13 22:51:03','',0,'https://www.mojoin.com/hueman-child/',0,'custom_css','',0),(538,1,'2021-11-13 22:49:58','2021-11-13 22:49:58','.wp-block-buttons .wp-block-button .a{\n	padding: calc(.367em + 2px) calc(0.533em + 2px);\n}','hueman-child','','inherit','closed','closed','','537-revision-v1','','','2021-11-13 22:49:58','2021-11-13 22:49:58','',537,'https://www.mojoin.com/?p=538',0,'revision','',0),(540,1,'2021-11-13 22:51:03','2021-11-13 22:51:03','.wp-block-buttons .wp-block-button a.wp-block-button__link{\n	padding: calc(.367em + 2px) calc(0.533em + 2px);\n}','hueman-child','','inherit','closed','closed','','537-revision-v1','','','2021-11-13 22:51:03','2021-11-13 22:51:03','',537,'https://www.mojoin.com/?p=540',0,'revision','',0),(541,1,'2021-11-13 22:52:08','2021-11-13 22:52:08','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li><a href=\"#select-your-template-code\" title=\"#select-your-template-code\">Select your template code</a></li><li>Create a page to show your category</li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"select-your-template-code\">Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use, please click the related theme button then copy and paste the codes in your page.list-cats file:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-boundless\">Boundless</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-brooklyn\">Brooklyn</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-debut\">Debut</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-minimal\">Minimal</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-narrative\">Narrative</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-simple\">Simple</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-venture\">Venture</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-boundless\"><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-brooklyn\"><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-debut\"><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-minimal\"><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-narrative\"><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-simple\"><strong>6) Simple</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-venture\"><strong>7) Venture</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n &lt;div class=\"content-block\">\n   &lt;div class=\"rte rte--indented-images\">\n     {{ page.content }}\n   &lt;/div>\n &lt;/div>\n\n {%- assign collection_count = 0 -%}\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection_count = collection_count | plus: 1 -%}\n   {%- endif -%}\n {%- endfor -%}\n\n {% assign number_rows = 1 %}\n\n {% case collection_count %}\n   {% when 1 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 2 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 3 %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n   {% when 4 %}\n     {% assign grid_item_width = \'medium-up--one-quarter\' %}\n     {% assign height = 235 %}\n   {% else %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}\n {% endcase %}\n\n &lt;div class=\"grid grid--no-gutters grid--uniform collection\" data-number-rows=\"{{ number_rows }}\">\n   {% assign row_number = 1 %}\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign featured_collection = collections[link.object.handle] -%}\n       {% if collection_count > 4 and forloop.index > 3 %}\n         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}\n       {% endif %}\n       {% include \'collection-grid-item\' with stretch_collection_image: false, height: height %}\n     {%- endif -%}\n   {%- endfor -%}\n &lt;/div>\n\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:52:08','2021-11-13 22:52:08','',287,'https://www.mojoin.com/?p=541',0,'revision','',0),(542,1,'2021-11-13 22:53:47','2021-11-13 22:53:47','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li><a href=\"#select-your-template-code\" title=\"#select-your-template-code\">Select your template code</a></li><li><a href=\"#create-page-show-cats\" title=\"#create-page-show-cats\">Create a page to show your category</a></li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"select-your-template-code\">Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use, please click the related theme button then copy and paste the codes in your page.list-cats file:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-boundless\">Boundless</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-brooklyn\">Brooklyn</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-debut\">Debut</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-minimal\">Minimal</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-narrative\">Narrative</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-simple\">Simple</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-venture\">Venture</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-boundless\"><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-brooklyn\"><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-debut\"><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-minimal\"><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-narrative\"><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-simple\"><strong>6) Simple</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-venture\"><strong>7) Venture</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n &lt;div class=\"content-block\">\n   &lt;div class=\"rte rte--indented-images\">\n     {{ page.content }}\n   &lt;/div>\n &lt;/div>\n\n {%- assign collection_count = 0 -%}\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection_count = collection_count | plus: 1 -%}\n   {%- endif -%}\n {%- endfor -%}\n\n {% assign number_rows = 1 %}\n\n {% case collection_count %}\n   {% when 1 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 2 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 3 %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n   {% when 4 %}\n     {% assign grid_item_width = \'medium-up--one-quarter\' %}\n     {% assign height = 235 %}\n   {% else %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}\n {% endcase %}\n\n &lt;div class=\"grid grid--no-gutters grid--uniform collection\" data-number-rows=\"{{ number_rows }}\">\n   {% assign row_number = 1 %}\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign featured_collection = collections[link.object.handle] -%}\n       {% if collection_count > 4 and forloop.index > 3 %}\n         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}\n       {% endif %}\n       {% include \'collection-grid-item\' with stretch_collection_image: false, height: height %}\n     {%- endif -%}\n   {%- endfor -%}\n &lt;/div>\n\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:heading -->\n<h2 id=\"create-page-show-cats\">Create a page to show your categories</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:53:47','2021-11-13 22:53:47','',287,'https://www.mojoin.com/?p=542',0,'revision','',0),(543,1,'2021-11-13 22:54:25','2021-11-13 22:54:25','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li><a href=\"#select-your-template-code\" title=\"#select-your-template-code\">Select your template code</a></li><li><a href=\"#create-page-show-cats\" title=\"#create-page-show-cats\">Create a page to show your category</a></li><li>Create a menu to control your sub-category showing</li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"select-your-template-code\">Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use, please click the related theme button then copy and paste the codes in your page.list-cats file:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-boundless\">Boundless</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-brooklyn\">Brooklyn</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-debut\">Debut</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-minimal\">Minimal</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-narrative\">Narrative</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-simple\">Simple</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-venture\">Venture</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-boundless\"><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-brooklyn\"><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-debut\"><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-minimal\"><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-narrative\"><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-simple\"><strong>6) Simple</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-venture\"><strong>7) Venture</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n &lt;div class=\"content-block\">\n   &lt;div class=\"rte rte--indented-images\">\n     {{ page.content }}\n   &lt;/div>\n &lt;/div>\n\n {%- assign collection_count = 0 -%}\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection_count = collection_count | plus: 1 -%}\n   {%- endif -%}\n {%- endfor -%}\n\n {% assign number_rows = 1 %}\n\n {% case collection_count %}\n   {% when 1 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 2 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 3 %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n   {% when 4 %}\n     {% assign grid_item_width = \'medium-up--one-quarter\' %}\n     {% assign height = 235 %}\n   {% else %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}\n {% endcase %}\n\n &lt;div class=\"grid grid--no-gutters grid--uniform collection\" data-number-rows=\"{{ number_rows }}\">\n   {% assign row_number = 1 %}\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign featured_collection = collections[link.object.handle] -%}\n       {% if collection_count > 4 and forloop.index > 3 %}\n         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}\n       {% endif %}\n       {% include \'collection-grid-item\' with stretch_collection_image: false, height: height %}\n     {%- endif -%}\n   {%- endfor -%}\n &lt;/div>\n\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:heading -->\n<h2 id=\"create-page-show-cats\">Create a page to show your categories</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store &gt; Pages</strong>.</li><li>Click&nbsp;<strong>Add page</strong>.</li><li>In the page editor, enter a&nbsp;<strong>Title</strong>&nbsp;in the text box provided. You must use the same title for the menu that you\'ll create in the upcoming steps.</li><li>Assign your new template to the page by selecting&nbsp;<strong>list-collections</strong>&nbsp;from the&nbsp;<strong>Theme template</strong>&nbsp;drop-down menu in the&nbsp;<strong>Online store</strong>&nbsp;section.</li><li>Click&nbsp;<strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:54:25','2021-11-13 22:54:25','',287,'https://www.mojoin.com/?p=543',0,'revision','',0),(544,1,'2021-11-13 22:56:06','2021-11-13 22:56:06','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li><a href=\"#select-your-template-code\" title=\"#select-your-template-code\">Select your template code</a></li><li><a href=\"#create-page-show-cats\" title=\"#create-page-show-cats\">Create a page to show your category</a></li><li><a href=\"#create-menu-link-pages\" title=\"#create-menu-link-pages\">Create a menu to control your sub-category showing</a></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"select-your-template-code\">Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use, please click the related theme button then copy and paste the codes in your page.list-cats file:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-boundless\">Boundless</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-brooklyn\">Brooklyn</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-debut\">Debut</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-minimal\">Minimal</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-narrative\">Narrative</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-simple\">Simple</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-venture\">Venture</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-boundless\"><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-brooklyn\"><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-debut\"><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-minimal\"><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-narrative\"><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-simple\"><strong>6) Simple</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-venture\"><strong>7) Venture</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n &lt;div class=\"content-block\">\n   &lt;div class=\"rte rte--indented-images\">\n     {{ page.content }}\n   &lt;/div>\n &lt;/div>\n\n {%- assign collection_count = 0 -%}\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection_count = collection_count | plus: 1 -%}\n   {%- endif -%}\n {%- endfor -%}\n\n {% assign number_rows = 1 %}\n\n {% case collection_count %}\n   {% when 1 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 2 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 3 %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n   {% when 4 %}\n     {% assign grid_item_width = \'medium-up--one-quarter\' %}\n     {% assign height = 235 %}\n   {% else %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}\n {% endcase %}\n\n &lt;div class=\"grid grid--no-gutters grid--uniform collection\" data-number-rows=\"{{ number_rows }}\">\n   {% assign row_number = 1 %}\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign featured_collection = collections[link.object.handle] -%}\n       {% if collection_count > 4 and forloop.index > 3 %}\n         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}\n       {% endif %}\n       {% include \'collection-grid-item\' with stretch_collection_image: false, height: height %}\n     {%- endif -%}\n   {%- endfor -%}\n &lt;/div>\n\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:heading -->\n<h2 id=\"create-page-show-cats\">Create a page to show your categories</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store &gt; Pages</strong>.</li><li>Click&nbsp;<strong>Add page</strong>.</li><li>In the page editor, enter a&nbsp;<strong>Title</strong>&nbsp;in the text box provided. You must use the same title for the menu that you\'ll create in the upcoming steps.</li><li>Assign your new template to the page by selecting&nbsp;<strong>list-collections</strong>&nbsp;from the&nbsp;<strong>Theme template</strong>&nbsp;drop-down menu in the&nbsp;<strong>Online store</strong>&nbsp;section.</li><li>Click&nbsp;<strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-menu-link-pages\"> Create a menu to control your sub-category showing </h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>search google will get answer or from my store one client auloves</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://community.shopify.com/c/Shopify-Design/Collection-Feature-a-subset-of-collections-on-a-page/m-p/614952  </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>create a page template from above code</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>page and submenu with the same slug</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>top - menu  link to the page  -&gt; this page link to the another menu slug the same which has sub menus with collection products selected</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to : https://auloves.com.au/</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:56:06','2021-11-13 22:56:06','',287,'https://www.mojoin.com/?p=544',0,'revision','',0),(545,1,'2021-11-13 22:56:46','2021-11-13 22:56:46','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li><a href=\"#select-your-template-code\" title=\"#select-your-template-code\">Select your template code</a></li><li><a href=\"#create-page-show-cats\" title=\"#create-page-show-cats\">Create a page to show your category</a></li><li><a href=\"#create-menu-link-pages\" title=\"#create-menu-link-pages\">Create a menu to control your sub-category showing</a></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"select-your-template-code\">Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use, please click the related theme button then copy and paste the codes in your page.list-cats file:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-boundless\">Boundless</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-brooklyn\">Brooklyn</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-debut\">Debut</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-minimal\">Minimal</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-narrative\">Narrative</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-simple\">Simple</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-venture\">Venture</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-boundless\"><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-brooklyn\"><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-debut\"><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-minimal\"><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-narrative\"><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-simple\"><strong>6) Simple</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-venture\"><strong>7) Venture</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n &lt;div class=\"content-block\">\n   &lt;div class=\"rte rte--indented-images\">\n     {{ page.content }}\n   &lt;/div>\n &lt;/div>\n\n {%- assign collection_count = 0 -%}\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection_count = collection_count | plus: 1 -%}\n   {%- endif -%}\n {%- endfor -%}\n\n {% assign number_rows = 1 %}\n\n {% case collection_count %}\n   {% when 1 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 2 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 3 %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n   {% when 4 %}\n     {% assign grid_item_width = \'medium-up--one-quarter\' %}\n     {% assign height = 235 %}\n   {% else %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}\n {% endcase %}\n\n &lt;div class=\"grid grid--no-gutters grid--uniform collection\" data-number-rows=\"{{ number_rows }}\">\n   {% assign row_number = 1 %}\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign featured_collection = collections[link.object.handle] -%}\n       {% if collection_count > 4 and forloop.index > 3 %}\n         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}\n       {% endif %}\n       {% include \'collection-grid-item\' with stretch_collection_image: false, height: height %}\n     {%- endif -%}\n   {%- endfor -%}\n &lt;/div>\n\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:heading -->\n<h2 id=\"create-page-show-cats\">Create a page to show your categories</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store &gt; Pages</strong>.</li><li>Click&nbsp;<strong>Add page</strong>.</li><li>In the page editor, enter a&nbsp;<strong>Title</strong>&nbsp;in the text box provided. You must use the same title for the menu that you\'ll create in the upcoming steps.</li><li>Assign your new template to the page by selecting&nbsp;<strong>list-collections</strong>&nbsp;from the&nbsp;<strong>Theme template</strong>&nbsp;drop-down menu in the&nbsp;<strong>Online store</strong>&nbsp;section.</li><li>Click&nbsp;<strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-menu-link-pages\">Create a menu to control your sub-category showing </h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store &gt; Navigation</strong>.</li><li>Click the&nbsp;<strong>Add menu</strong>&nbsp;button.</li><li>Give your menu the same&nbsp;<strong>Title</strong>&nbsp;as the title that you gave the page that will feature your collections. For example, if the page you created has the title&nbsp;<code>Living Room</code>, then give your menu the title&nbsp;<code>Living Room</code>.</li><li>Add links to your menu for each collection that you want to feature by clicking&nbsp;<strong>Add menu item</strong>. Choose collections from your store by clicking on&nbsp;<strong>Collections</strong>&nbsp;in the drop-down menu for the&nbsp;<strong>Link</strong>&nbsp;text box. Link to your collections in this way, instead of adding a URL to the text box.</li><li>Click&nbsp;<strong>Save menu</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in shopify store for debut theme','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:56:46','2021-11-13 22:56:46','',287,'https://www.mojoin.com/?p=545',0,'revision','',0),(546,1,'2021-11-13 22:57:43','2021-11-13 22:57:43','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than 50 products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li><a href=\"#select-your-template-code\" title=\"#select-your-template-code\">Select your template code</a></li><li><a href=\"#create-page-show-cats\" title=\"#create-page-show-cats\">Create a page to show your category</a></li><li><a href=\"#create-menu-link-pages\" title=\"#create-menu-link-pages\">Create a menu to control your sub-category showing</a></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"select-your-template-code\">Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use, please click the related theme button then copy and paste the codes in your page.list-cats file:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-boundless\">Boundless</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-brooklyn\">Brooklyn</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-debut\">Debut</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-minimal\">Minimal</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-narrative\">Narrative</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-simple\">Simple</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-venture\">Venture</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-boundless\"><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-brooklyn\"><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-debut\"><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-minimal\"><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-narrative\"><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-simple\"><strong>6) Simple</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-venture\"><strong>7) Venture</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n &lt;div class=\"content-block\">\n   &lt;div class=\"rte rte--indented-images\">\n     {{ page.content }}\n   &lt;/div>\n &lt;/div>\n\n {%- assign collection_count = 0 -%}\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection_count = collection_count | plus: 1 -%}\n   {%- endif -%}\n {%- endfor -%}\n\n {% assign number_rows = 1 %}\n\n {% case collection_count %}\n   {% when 1 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 2 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 3 %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n   {% when 4 %}\n     {% assign grid_item_width = \'medium-up--one-quarter\' %}\n     {% assign height = 235 %}\n   {% else %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}\n {% endcase %}\n\n &lt;div class=\"grid grid--no-gutters grid--uniform collection\" data-number-rows=\"{{ number_rows }}\">\n   {% assign row_number = 1 %}\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign featured_collection = collections[link.object.handle] -%}\n       {% if collection_count > 4 and forloop.index > 3 %}\n         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}\n       {% endif %}\n       {% include \'collection-grid-item\' with stretch_collection_image: false, height: height %}\n     {%- endif -%}\n   {%- endfor -%}\n &lt;/div>\n\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:heading -->\n<h2 id=\"create-page-show-cats\">Create a page to show your categories</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store &gt; Pages</strong>.</li><li>Click&nbsp;<strong>Add page</strong>.</li><li>In the page editor, enter a&nbsp;<strong>Title</strong>&nbsp;in the text box provided. You must use the same title for the menu that you\'ll create in the upcoming steps.</li><li>Assign your new template to the page by selecting&nbsp;<strong>list-collections</strong>&nbsp;from the&nbsp;<strong>Theme template</strong>&nbsp;drop-down menu in the&nbsp;<strong>Online store</strong>&nbsp;section.</li><li>Click&nbsp;<strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-menu-link-pages\">Create a menu to control your sub-category showing </h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store &gt; Navigation</strong>.</li><li>Click the&nbsp;<strong>Add menu</strong>&nbsp;button.</li><li>Give your menu the same&nbsp;<strong>Title</strong>&nbsp;as the title that you gave the page that will feature your collections. For example, if the page you created has the title&nbsp;<code>Living Room</code>, then give your menu the title&nbsp;<code>Living Room</code>.</li><li>Add links to your menu for each collection that you want to feature by clicking&nbsp;<strong>Add menu item</strong>. Choose collections from your store by clicking on&nbsp;<strong>Collections</strong>&nbsp;in the drop-down menu for the&nbsp;<strong>Link</strong>&nbsp;text box. Link to your collections in this way, instead of adding a URL to the text box.</li><li>Click&nbsp;<strong>Save menu</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in Shopify store for Shopify free themes','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:57:43','2021-11-13 22:57:43','',287,'https://www.mojoin.com/?p=546',0,'revision','',0),(547,1,'2021-11-13 22:58:05','2021-11-13 22:58:05','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than <strong>50</strong> products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li><a href=\"#select-your-template-code\" title=\"#select-your-template-code\">Select your template code</a></li><li><a href=\"#create-page-show-cats\" title=\"#create-page-show-cats\">Create a page to show your category</a></li><li><a href=\"#create-menu-link-pages\" title=\"#create-menu-link-pages\">Create a menu to control your sub-category showing</a></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"select-your-template-code\">Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use, please click the related theme button then copy and paste the codes in your page.list-cats file:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-boundless\">Boundless</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-brooklyn\">Brooklyn</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-debut\">Debut</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-minimal\">Minimal</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-narrative\">Narrative</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-simple\">Simple</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-venture\">Venture</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-boundless\"><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-brooklyn\"><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-debut\"><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-minimal\"><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-narrative\"><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-simple\"><strong>6) Simple</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-venture\"><strong>7) Venture</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n &lt;div class=\"content-block\">\n   &lt;div class=\"rte rte--indented-images\">\n     {{ page.content }}\n   &lt;/div>\n &lt;/div>\n\n {%- assign collection_count = 0 -%}\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection_count = collection_count | plus: 1 -%}\n   {%- endif -%}\n {%- endfor -%}\n\n {% assign number_rows = 1 %}\n\n {% case collection_count %}\n   {% when 1 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 2 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 3 %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n   {% when 4 %}\n     {% assign grid_item_width = \'medium-up--one-quarter\' %}\n     {% assign height = 235 %}\n   {% else %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}\n {% endcase %}\n\n &lt;div class=\"grid grid--no-gutters grid--uniform collection\" data-number-rows=\"{{ number_rows }}\">\n   {% assign row_number = 1 %}\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign featured_collection = collections[link.object.handle] -%}\n       {% if collection_count > 4 and forloop.index > 3 %}\n         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}\n       {% endif %}\n       {% include \'collection-grid-item\' with stretch_collection_image: false, height: height %}\n     {%- endif -%}\n   {%- endfor -%}\n &lt;/div>\n\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:heading -->\n<h2 id=\"create-page-show-cats\">Create a page to show your categories</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store &gt; Pages</strong>.</li><li>Click&nbsp;<strong>Add page</strong>.</li><li>In the page editor, enter a&nbsp;<strong>Title</strong>&nbsp;in the text box provided. You must use the same title for the menu that you\'ll create in the upcoming steps.</li><li>Assign your new template to the page by selecting&nbsp;<strong>list-collections</strong>&nbsp;from the&nbsp;<strong>Theme template</strong>&nbsp;drop-down menu in the&nbsp;<strong>Online store</strong>&nbsp;section.</li><li>Click&nbsp;<strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-menu-link-pages\">Create a menu to control your sub-category showing </h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store &gt; Navigation</strong>.</li><li>Click the&nbsp;<strong>Add menu</strong>&nbsp;button.</li><li>Give your menu the same&nbsp;<strong>Title</strong>&nbsp;as the title that you gave the page that will feature your collections. For example, if the page you created has the title&nbsp;<code>Living Room</code>, then give your menu the title&nbsp;<code>Living Room</code>.</li><li>Add links to your menu for each collection that you want to feature by clicking&nbsp;<strong>Add menu item</strong>. Choose collections from your store by clicking on&nbsp;<strong>Collections</strong>&nbsp;in the drop-down menu for the&nbsp;<strong>Link</strong>&nbsp;text box. Link to your collections in this way, instead of adding a URL to the text box.</li><li>Click&nbsp;<strong>Save menu</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in Shopify store for Shopify free themes','','inherit','closed','closed','','287-revision-v1','','','2021-11-13 22:58:05','2021-11-13 22:58:05','',287,'https://www.mojoin.com/?p=547',0,'revision','',0),(548,1,'2021-11-14 06:57:53','2021-11-14 06:57:53','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than <strong>50</strong> products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li><a href=\"#select-your-template-code\" title=\"#select-your-template-code\">Select your template code</a></li><li><a href=\"#create-page-show-cats\" title=\"#create-page-show-cats\">Create a page to show your category</a></li><li><a href=\"#create-menu-link-pages\" title=\"#create-menu-link-pages\">Create a menu to control your sub-category showing</a></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code（this article we take Debut theme as an example） below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"select-your-template-code\">Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use, please click the related theme button then copy and paste the codes in your page.list-cats file:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-boundless\">Boundless</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-brooklyn\">Brooklyn</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-debut\">Debut</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-minimal\">Minimal</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-narrative\">Narrative</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-simple\">Simple</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-venture\">Venture</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-boundless\"><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-brooklyn\"><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-debut\"><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-minimal\"><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-narrative\"><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-simple\"><strong>6) Simple</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-venture\"><strong>7) Venture</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n &lt;div class=\"content-block\">\n   &lt;div class=\"rte rte--indented-images\">\n     {{ page.content }}\n   &lt;/div>\n &lt;/div>\n\n {%- assign collection_count = 0 -%}\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection_count = collection_count | plus: 1 -%}\n   {%- endif -%}\n {%- endfor -%}\n\n {% assign number_rows = 1 %}\n\n {% case collection_count %}\n   {% when 1 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 2 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 3 %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n   {% when 4 %}\n     {% assign grid_item_width = \'medium-up--one-quarter\' %}\n     {% assign height = 235 %}\n   {% else %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}\n {% endcase %}\n\n &lt;div class=\"grid grid--no-gutters grid--uniform collection\" data-number-rows=\"{{ number_rows }}\">\n   {% assign row_number = 1 %}\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign featured_collection = collections[link.object.handle] -%}\n       {% if collection_count > 4 and forloop.index > 3 %}\n         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}\n       {% endif %}\n       {% include \'collection-grid-item\' with stretch_collection_image: false, height: height %}\n     {%- endif -%}\n   {%- endfor -%}\n &lt;/div>\n\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:heading -->\n<h2 id=\"create-page-show-cats\">Create a page to show your categories</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store &gt; Pages</strong>.</li><li>Click&nbsp;<strong>Add page</strong>.</li><li>In the page editor, enter a&nbsp;<strong>Title</strong>&nbsp;in the text box provided. You must use the same title for the menu that you\'ll create in the upcoming steps.</li><li>Assign your new template to the page by selecting&nbsp;<strong>list-collections</strong>&nbsp;from the&nbsp;<strong>Theme template</strong>&nbsp;drop-down menu in the&nbsp;<strong>Online store</strong>&nbsp;section.</li><li>Click&nbsp;<strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-menu-link-pages\">Create a menu to control your sub-category showing </h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store &gt; Navigation</strong>.</li><li>Click the&nbsp;<strong>Add menu</strong>&nbsp;button.</li><li>Give your menu the same&nbsp;<strong>Title</strong>&nbsp;as the title that you gave the page that will feature your collections. For example, if the page you created has the title&nbsp;<code>Living Room</code>, then give your menu the title&nbsp;<code>Living Room</code>.</li><li>Add links to your menu for each collection that you want to feature by clicking&nbsp;<strong>Add menu item</strong>. Choose collections from your store by clicking on&nbsp;<strong>Collections</strong>&nbsp;in the drop-down menu for the&nbsp;<strong>Link</strong>&nbsp;text box. Link to your collections in this way, instead of adding a URL to the text box.</li><li>Click&nbsp;<strong>Save menu</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in Shopify store for Shopify free themes','','inherit','closed','closed','','287-revision-v1','','','2021-11-14 06:57:53','2021-11-14 06:57:53','',287,'https://www.mojoin.com/?p=548',0,'revision','',0),(549,1,'2021-11-14 07:37:47','2021-11-14 07:37:47','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than <strong>50</strong> products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li><a href=\"#select-your-template-code\" title=\"#select-your-template-code\">Select your template code</a></li><li><a href=\"#create-page-show-cats\" title=\"#create-page-show-cats\">Create a page to show your category</a></li><li><a href=\"#create-menu-link-pages\" title=\"#create-menu-link-pages\">Create a menu to control your sub-category showing</a></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code（this article we take Debut theme as an example） below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>in case you don\'t know how to do the above steps. please follow this video:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https://youtu.be/SzMepoHmq44\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"responsive\":true,\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps://youtu.be/SzMepoHmq44\n</div></figure>\n<!-- /wp:embed -->\n\n<!-- wp:heading -->\n<h2 id=\"select-your-template-code\">Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use, please click the related theme button then copy and paste the codes in your page.list-cats file:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-boundless\">Boundless</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-brooklyn\">Brooklyn</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-debut\">Debut</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-minimal\">Minimal</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-narrative\">Narrative</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-simple\">Simple</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-venture\">Venture</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-boundless\"><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-brooklyn\"><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-debut\"><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-minimal\"><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-narrative\"><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-simple\"><strong>6) Simple</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-venture\"><strong>7) Venture</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n &lt;div class=\"content-block\">\n   &lt;div class=\"rte rte--indented-images\">\n     {{ page.content }}\n   &lt;/div>\n &lt;/div>\n\n {%- assign collection_count = 0 -%}\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection_count = collection_count | plus: 1 -%}\n   {%- endif -%}\n {%- endfor -%}\n\n {% assign number_rows = 1 %}\n\n {% case collection_count %}\n   {% when 1 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 2 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 3 %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n   {% when 4 %}\n     {% assign grid_item_width = \'medium-up--one-quarter\' %}\n     {% assign height = 235 %}\n   {% else %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}\n {% endcase %}\n\n &lt;div class=\"grid grid--no-gutters grid--uniform collection\" data-number-rows=\"{{ number_rows }}\">\n   {% assign row_number = 1 %}\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign featured_collection = collections[link.object.handle] -%}\n       {% if collection_count > 4 and forloop.index > 3 %}\n         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}\n       {% endif %}\n       {% include \'collection-grid-item\' with stretch_collection_image: false, height: height %}\n     {%- endif -%}\n   {%- endfor -%}\n &lt;/div>\n\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:heading -->\n<h2 id=\"create-page-show-cats\">Create a page to show your categories</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store &gt; Pages</strong>.</li><li>Click&nbsp;<strong>Add page</strong>.</li><li>In the page editor, enter a&nbsp;<strong>Title</strong>&nbsp;in the text box provided. You must use the same title for the menu that you\'ll create in the upcoming steps.</li><li>Assign your new template to the page by selecting&nbsp;<strong>list-collections</strong>&nbsp;from the&nbsp;<strong>Theme template</strong>&nbsp;drop-down menu in the&nbsp;<strong>Online store</strong>&nbsp;section.</li><li>Click&nbsp;<strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-menu-link-pages\">Create a menu to control your sub-category showing </h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store &gt; Navigation</strong>.</li><li>Click the&nbsp;<strong>Add menu</strong>&nbsp;button.</li><li>Give your menu the same&nbsp;<strong>Title</strong>&nbsp;as the title that you gave the page that will feature your collections. For example, if the page you created has the title&nbsp;<code>Living Room</code>, then give your menu the title&nbsp;<code>Living Room</code>.</li><li>Add links to your menu for each collection that you want to feature by clicking&nbsp;<strong>Add menu item</strong>. Choose collections from your store by clicking on&nbsp;<strong>Collections</strong>&nbsp;in the drop-down menu for the&nbsp;<strong>Link</strong>&nbsp;text box. Link to your collections in this way, instead of adding a URL to the text box.</li><li>Click&nbsp;<strong>Save menu</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in Shopify store for Shopify free themes','','inherit','closed','closed','','287-revision-v1','','','2021-11-14 07:37:47','2021-11-14 07:37:47','',287,'https://www.mojoin.com/?p=549',0,'revision','',0),(550,1,'2021-11-14 07:40:48','2021-11-14 07:40:48','<!-- wp:paragraph -->\n<p>When putting your products to your Shopify store, in case you have multiple products, for example, more than <strong>50</strong> products you definitely need to group your products by category. When you group your products by category. sometimes you find you must group some products by sub-category to make it easier for your customer to surf your store. for example, if you are going to sell living room related products, you may have a living room as the main category and set setting and accessories as a sub-category.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So you may want your living room page to look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":511,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https://www.mojoin.com/wp-content/uploads/2021/11/shopify-sub-category.png\" alt=\"\" class=\"wp-image-511\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Once you are going to use a sub-category, you will find you can\'t put the sub-category in your main category page directly in the normal way for your Shopify store no matter what free Shopify theme you are using.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Very frustrated right? calm down it is not only you got this issue, but there are also a lot of other Shopify users who have been trapped in here for a long time before.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Today I will share with you how to achieve this via a trick and easy way.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Before going to more details, you need to have some basic Shopify coding knowledge, otherwise please ask a Shopify developer or freelancer to help you. please do not try this if you do not know what you are doing exactly.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>In this article</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list -->\n<ul><li><a href=\"#create-new-page-template\" title=\"#create-new-page-template\">Create a new Shopify page template</a></li><li><a href=\"#select-your-template-code\" title=\"#select-your-template-code\">Select your template code</a></li><li><a href=\"#create-page-show-cats\" title=\"#create-page-show-cats\">Create a page to show your category</a></li><li><a href=\"#create-menu-link-pages\" title=\"#create-menu-link-pages\">Create a menu to control your sub-category showing</a></li></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-new-page-template\">Create a new Shopify page template</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Themes</strong>.</li><li>Find the theme you want to edit, and then click <strong>Actions > Edit code</strong>.</li><li>In the <strong>Templates</strong> directory, click <strong>Add a new template</strong>.</li><li>Create a new template for <strong>page</strong> called list-cats.</li><li>Delete the existing code in your new <code>page.list-cats</code> file. Find your theme code（this article we take Debut theme as an example） below and copy and paste the code in your <code>page.li</code>st-cats file.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p>in case you don\'t know how to do the above steps. please follow this video:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:embed {\"url\":\"https://youtu.be/SzMepoHmq44\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"responsive\":true,\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps://youtu.be/SzMepoHmq44\n</div></figure>\n<!-- /wp:embed -->\n\n<!-- wp:heading -->\n<h2 id=\"select-your-template-code\">Select your template code</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>this part code depends on which free Shopify default theme template you are going to use, please click the related theme button then copy and paste the codes in your page.list-cats file:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-boundless\">Boundless</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-brooklyn\">Brooklyn</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-debut\">Debut</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-minimal\">Minimal</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-narrative\">Narrative</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-simple\">Simple</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"backgroundColor\":\"light-green-cyan\",\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-light-green-cyan-background-color has-text-color has-background\" href=\"#page-code-venture\">Venture</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-boundless\"><strong>1) Boundless</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' -%}\n{%- case linklists[page.handle].links.size -%}\n{%- when 2 -%}\n {%- assign grid_item_width = \'medium-up--one-half\' -%}\n{%- when 3 -%}\n {%- assign grid_item_width = \'small--one-half medium-up--one-third\' %}\n{%- else -%}\n {%- assign grid_item_width = \'small--one-half medium--one-third large-up--one-quarter\' %}\n{%- endcase -%}\n\n&lt;div class=\"page-width page-container\">\n  &lt;header>\n    &lt;h1>{{ page.title }}&lt;/h1>\n  &lt;/header>\n  &lt;div class=\"rte rte--indented-images\">\n    {{ page.content }}\n  &lt;/div>\n\n  &lt;div class=\"grid grid--no-gutters collection-grid\">\n    {%- for link in linklists[page.handle].links -%}\n      {%- if link.type == \'collection_link\' -%}\n        {%- assign featured = link.object.handle -%}\n        {%- include \'collection-grid-item\', collection: collections[featured] -%}\n      {%- endif -%}\n    {%- endfor -%}\n  &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-brooklyn\"><strong>2) Brooklyn</strong><br></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n{%- assign collection_count = 0 -%}\n{%- assign isEmpty = true -%}\n{%- for link in linklists[page.handle].links -%}\n {%- if link.type == \'collection_link\' -%}\n {%- assign collection_count = collection_count | plus: 1 -%}\n {%- endif -%}\n{%- endfor -%}\n\n{%- assign collection_index = 0 -%}\n{%- assign divisible_by_three = collection_count | modulo: 3 -%}\n{%- assign divisible_by_two = collection_count | modulo: 2 -%}\n\n&lt;div class=\"grid\">\n &lt;div class=\"grid__item large--five-sixths push--large--one-twelfth\">\n\n   &lt;header class=\"section-header text-center\">\n     &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;hr class=\"hr--small\">\n   &lt;/header>\n\n   &lt;div class=\"grid\">\n     &lt;div class=\"grid__item large--four-fifths push--large--one-tenth\">\n       &lt;div class=\"rte rte--nomargin rte--indented-images\">\n         {{ page.content }}\n       &lt;/div>\n     &lt;/div>\n   &lt;/div>\n\n &lt;/div>\n&lt;/div>\n\n&lt;div class=\"grid collection-grid\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection = collections[link.object.handle] -%}\n     {%- assign collection_index = collection_index | plus: 1 -%}\n     {%- assign collection_handle = collection.handle -%}\n     {% include \'collection-grid-collage\' %}\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-debut\"><strong>3) Debut</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--five-sixths medium-up--push-one-twelfth\">\n     &lt;div class=\"section-header text-center\">\n       &lt;h1>{{ page.title }}&lt;/h1>\n     &lt;/div>\n\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;ul class=\"grid grid--uniform\">\n\n   {%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n   {%- assign image_size = \'350x\' -%}\n\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign collection = collections[link.object.handle] -%}\n       &lt;li class=\"grid__item {{ grid_item_width }}\">\n         {% include \'collection-grid-item\', collection_image_size: image_size %}\n       &lt;/li>\n     {%- endif -%}\n   {%- endfor -%}\n\n &lt;/ul>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-minimal\"><strong>4) Minimal</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"grid\">\n\n &lt;div class=\"grid__item post-large--two-thirds push--post-large--one-sixth\">\n\n   &lt;div class=\"section-header\">\n     &lt;h1 class=\"section-header--title\">{{ page.title }}&lt;/h1>\n   &lt;/div>\n\n   &lt;div class=\"rte\">\n     {{ page.content }}\n   &lt;/div>\n\n &lt;/div>\n\n&lt;/div>\n\n{%- assign collection_item_width = \'medium-down--one-half post-large--one-third\' -%}\n{%- assign collection_width = 410 -%}\n\n&lt;div class=\"grid-uniform\">\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign featured = link.object.handle -%}\n     &lt;div class=\"grid__item {{collection_item_width}} text-center\">\n       {% include \'collection-grid-item\' with collection_width: collection_width %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-narrative\"><strong>5) Narrative</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;header class=\"section-header text-center\">\n   &lt;h1 class=\"section-header__title h2\">{{ page.title }}&lt;/h1>\n &lt;/header>\n &lt;div class=\"grid\">\n   &lt;div class=\"grid__item medium-up--four-fifths medium-up--push-one-tenth\">\n     &lt;div class=\"rte\">\n       {{ page.content }}\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n\n &lt;div class=\"list-collections-template\" data-section-id=\"list-collections-template\" data-section-type=\"list-collections-template\">\n   {%- assign desktopColumns = \'3\' -%}\n   {%- assign mobileColumns = \'1\' -%}\n\n   {%- capture gridClasses -%}\n     {% if desktopColumns == \'3\' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}\n     {% if mobileColumns == \'2\' %}small--one-half {% endif %}\n   {%- endcapture -%}\n\n   {% comment %}\n     For Collage style replace grid_style = \'grid\' with grid_style = \'collage\' below\n   {% endcomment %}\n\n   {%- assign grid_style = \'grid\' -%}\n\n   &lt;div class=\"card-list grid\" data-desktop-columns=\"{{ desktopColumns }}\" data-mobile-columns=\"{{ mobileColumns }}\" data-grid-style=\"{{ grid_style }}\">\n     &lt;div class=\"card-list__column grid grid__item {{ gridClasses }}\">\n\n       {%- for link in linklists[page.handle].links -%}\n         {%- if link.type == \'collection_link\' -%}\n           {%- assign collection = collections[link.object.handle] -%}\n           {% include \'collection-card\', collection: collection, width: desktopColumns, grid_style: grid_style %}\n         {%- endif -%}\n       {%- endfor -%}\n\n     &lt;/div>\n   &lt;/div>\n &lt;/div>\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-simple\"><strong>6) Simple</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n\n&lt;div class=\"rte\">\n {{ page.content }}\n&lt;/div>\n\n{%- assign grid_item_width = \'small--one-half medium-up--one-third\' -%}\n\n&lt;div class=\"grid grid--uniform\">\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {% assign collection = collections[link.object.handle] %}\n     &lt;div class=\"grid__item {{ grid_item_width }}\">\n       {% include \'collection-grid-item\' %}\n     &lt;/div>\n   {%- endif -%}\n {%- endfor -%}\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p id=\"page-code-venture\"><strong>7) Venture</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% comment %}\n Featuring collections on a page using a menu\n https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page\n{% endcomment %}\n\n&lt;div class=\"page-width\">\n &lt;h1 class=\"small--text-center\">{{ page.title }}&lt;/h1>\n &lt;div class=\"content-block\">\n   &lt;div class=\"rte rte--indented-images\">\n     {{ page.content }}\n   &lt;/div>\n &lt;/div>\n\n {%- assign collection_count = 0 -%}\n\n {%- for link in linklists[page.handle].links -%}\n   {%- if link.type == \'collection_link\' -%}\n     {%- assign collection_count = collection_count | plus: 1 -%}\n   {%- endif -%}\n {%- endfor -%}\n\n {% assign number_rows = 1 %}\n\n {% case collection_count %}\n   {% when 1 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 2 %}\n     {% assign grid_item_width = \'medium-up--one-half\' %}\n     {% assign height = 450 %}\n   {% when 3 %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n   {% when 4 %}\n     {% assign grid_item_width = \'medium-up--one-quarter\' %}\n     {% assign height = 235 %}\n   {% else %}\n     {% assign grid_item_width = \'medium-up--one-third\' %}\n     {% assign height = 330 %}\n     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}\n {% endcase %}\n\n &lt;div class=\"grid grid--no-gutters grid--uniform collection\" data-number-rows=\"{{ number_rows }}\">\n   {% assign row_number = 1 %}\n   {%- for link in linklists[page.handle].links -%}\n     {%- if link.type == \'collection_link\' -%}\n       {%- assign featured_collection = collections[link.object.handle] -%}\n       {% if collection_count > 4 and forloop.index > 3 %}\n         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}\n       {% endif %}\n       {% include \'collection-grid-item\' with stretch_collection_image: false, height: height %}\n     {%- endif -%}\n   {%- endfor -%}\n &lt;/div>\n\n&lt;/div></pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:heading -->\n<h2 id=\"create-page-show-cats\">Create a page to show your categories</h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to <strong>Online Store > Pages</strong>.</li><li>Click <strong>Add page</strong>.</li><li>In the page editor, enter a <strong>Title</strong> in the text box provided. You must use the same title for the menu that you\'ll create in the upcoming steps.</li><li>Assign your new template to the page by selecting <strong>list-cats</strong> from the <strong>Theme template</strong> drop-down menu in the <strong>Online store</strong> section.</li><li>Click <strong>Save</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:heading -->\n<h2 id=\"create-menu-link-pages\">Create a menu to control your sub-category showing </h2>\n<!-- /wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li>From your Shopify admin, go to&nbsp;<strong>Online Store &gt; Navigation</strong>.</li><li>Click the&nbsp;<strong>Add menu</strong>&nbsp;button.</li><li>Give your menu the same&nbsp;<strong>Title</strong>&nbsp;as the title that you gave the page that will feature your collections. For example, if the page you created has the title&nbsp;<code>Living Room</code>, then give your menu the title&nbsp;<code>Living Room</code>.</li><li>Add links to your menu for each collection that you want to feature by clicking&nbsp;<strong>Add menu item</strong>. Choose collections from your store by clicking on&nbsp;<strong>Collections</strong>&nbsp;in the drop-down menu for the&nbsp;<strong>Link</strong>&nbsp;text box. Link to your collections in this way, instead of adding a URL to the text box.</li><li>Click&nbsp;<strong>Save menu</strong>.</li></ol>\n<!-- /wp:list -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','How to show sub category in parent category page in Shopify store for Shopify free themes','','inherit','closed','closed','','287-revision-v1','','','2021-11-14 07:40:48','2021-11-14 07:40:48','',287,'https://www.mojoin.com/?p=550',0,'revision','',0),