(453,1,'2021-10-17 23:14:44','0000-00-00 00:00:00','<!-- wp:paragraph -->\n<p>you can get collection products with ajax call URL like this :<br>https://wokamall.com/collections/monitor-stand-riser?view=list_product&amp;constraint=limit=3+layout=carousel+grid=3+sectionId=1632465351a37e7d8d&amp;_=1634511860011</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>in ajax call will be :</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:preformatted -->\n<pre class=\"wp-block-preformatted\">$.ajax({<br>    <strong>type</strong>: <strong>\"get\"</strong>,<br>    <strong>url</strong>: <strong>window</strong>.router + <strong>\'/collections/\' </strong>+ url,<br>    <strong>cache</strong>: <strong>false</strong>,<br>    <strong>data</strong>: {<br>        <strong>view</strong>: <strong>\'list_product\'</strong>,<br>        <strong>constraint</strong>: <strong>\'limit=\' </strong>+ limit + <strong>\'+layout=\' </strong>+ layout + <strong>\'+grid=\' </strong>+ grid + <strong>\'+sectionId=\' </strong>+ sectionId<br>    },<br>    beforeSend: <strong>function </strong>() {<br>        self.addClass(<strong>\'ajax-loaded\'</strong>);<br>    },<br>    success: <strong>function </strong>(data) {<br>        <strong>if </strong>(url != <strong>\'\'</strong>) {<br>            self.find(<strong>\'.products-grid\'</strong>).html(data);<br>        }<br>        $(<strong>\'[data-toggle=\"tooltip\"]\'</strong>).tooltip();<br>        ella.swapHoverVideo();<br>    },<br>    complete: <strong>function </strong>() {<br>        <strong>if </strong>(self.attr(<strong>\'data-featured-products\'</strong>) == <strong>undefined</strong>) {<br>            <strong>return</strong>;<br>        }<br>        <strong>if </strong>(layout == <strong>\'carousel\'</strong>) {<br>            <strong>var </strong>productGrid = self.find(<strong>\'.products-grid\'</strong>),<br>                gridItemWidth = productGrid.data(<strong>\'row\'</strong>),<br>                hasRightSidebar = $(<strong>\'.halo-product-content .pro-page [data-has-right-sidebar]\'</strong>);<br>            <strong>if </strong>(<strong>window</strong>.<strong>innerWidth </strong>&lt; 1200) {<br>                self.on(<strong>\"afterChange\"</strong>, <strong>function</strong>(event, slick) {<br>                    <strong>var </strong><em>isElementVisible </em>= <strong>function</strong>($el, threshold) {<br>                      <strong>var </strong>rect = $el[0].getBoundingClientRect();<br>                      <strong>var </strong>windowHeight = <strong>window</strong>.<strong>innerHeight </strong>|| <strong>document</strong>.<strong>documentElement</strong>.<strong>clientHeight</strong>;<br>                      threshold = threshold ? threshold : 0;<br><br>                      <strong>return </strong>(<br>                        rect.<strong>bottom </strong>&gt;= (0 - (threshold / 1.5)) &amp;&amp;<br>                        rect.<strong>right </strong>&gt;= 0 &amp;&amp;<br>                        rect.<strong>top </strong>&lt;= (windowHeight + threshold) &amp;&amp;<br>                        rect.<strong>left </strong>&lt;= (<strong>window</strong>.<strong>innerWidth </strong>|| <strong>document</strong>.<strong>documentElement</strong>.<strong>clientWidth</strong>)<br>                      );<br>                    };<br><br>                    $(<strong>\'.product-item[data-product-id]\'</strong>).each(<strong>function</strong>(i, el){<br>                      <strong>var </strong>self = $(<strong>this</strong>);<br>                      <strong>if</strong>(<em>isElementVisible</em>($(el), -100)) {<br>                        <strong>var </strong>$product = $(<strong>this</strong>);<br>                        <strong>if</strong>( !$product[0].hasAttribute(<strong>\'data-json-product\'</strong>) ) {<br>                          <strong>if</strong>( $product.hasClass(<strong>\'json-loading\'</strong>) )<br>                            <strong>return</strong>;<br>                          $product.addClass(<strong>\'json-loading\'</strong>);<br>                          <strong>var </strong>handle = $product.find(<strong>\'.product-title\'</strong>).attr(<strong>\'href\'</strong>);<br><br>                          <strong>var </strong>xhr = $.ajax({<br>                            <strong>type</strong>: <strong>\'GET\'</strong>,<br>                            <strong>url</strong>: handle,<br>                            <strong>data</strong>: {<br>                              <strong>view</strong>: <strong>\'get_json\'<br></strong><strong>                            </strong>},<br>                            <strong>cache</strong>: <strong>false</strong>,<br>                            <strong>dataType</strong>: <strong>\'html\'</strong>,<br>                            success: <strong>function </strong>(data) {<br>                              <strong>var </strong>json = <em>JSON</em>.<em>parse</em>(data);<br>                              $product.attr(<strong>\'data-json-product\'</strong>, <em>JSON</em>.<em>stringify</em>(json));<br>                            },<br>                            complete: <strong>function </strong>() {<br>                              $product.removeClass(<strong>\'json-loading\'</strong>);<br>                            }<br>                          });<br>                        }<br>                      }<br>                    });<br>                });<br>            }<br>            <strong>if</strong>(productGrid.not(<strong>\'.slick-initialized\'</strong>)) {<br>                productGrid.slick({<br>                    <strong>get </strong><em>slidesToShow</em>() {<br>                        <strong>if </strong>(hasRightSidebar.<strong>length</strong>) {<br>                            <strong>return this</strong>.slidesToShow = 5;<br>                        } <strong>else </strong>{<br>                            <strong>return this</strong>.slidesToShow = productGrid.data(<strong>\'row\'</strong>);<br>                        }<br>                    },<br><br>                    <strong>get </strong><em>vertical</em>() {<br>                        <strong>if</strong>(productGrid.hasClass(<strong>\'verticle\'</strong>)) {<br>                            <strong>return this</strong>.vertical = <strong>true</strong>;<br>                        }<strong>else </strong>{<br>                            <strong>return this</strong>.vertical = <strong>false</strong>;<br>                        }<br>                    },<br><br>                    <strong>get </strong><em>slidesToScroll</em>() {<br>                        <strong>if</strong>(productGrid.hasClass(<strong>\'verticle\'</strong>)) {<br>                            <strong>return this</strong>.slidesToScroll = 1;<br>                        }<strong>else </strong>{<br>                            <strong>return this</strong>.slidesToScroll = productGrid.data(<strong>\'row\'</strong>);<br>                        }<br>                    },<br><br>                    <strong>speed</strong>: 1000,<br>                    <strong>infinite</strong>: <strong>false</strong>,<br><br>                    <strong>get </strong><em>dots</em>() {<br>                        <strong>if</strong>((self.hasClass(<strong>\'has-banner\'</strong>)) || (<strong>window</strong>.layout_style == <strong>\'layout_style_suppermarket\'</strong>) || (<strong>window</strong>.layout_style == <strong>\'layout_style_surfup\'</strong>)){<br>                            <strong>return this</strong>.dots = <strong>true</strong>;<br>                        }<strong>else </strong>{<br>                            <strong>return this</strong>.dots = <strong>false</strong>;<br>                        };<br>                    },<br>                    <strong>get </strong><em>nextArrow</em>() {<br>                        <strong>if </strong>((<strong>window</strong>.layout_style == <strong>\'layout_style_1170\'</strong>) || (<strong>window</strong>.layout_style == <strong>\'layout_style_flower\'</strong>)) {<br>                            <strong>return this</strong>.nextArrow = <strong>\'&lt;button type=\"button\" class=\"slick-next\"&gt;&lt;svg viewBox=\"0 0 50 50\"&gt;&lt;path d=\"M 11.957031 13.988281 C 11.699219 14.003906 11.457031 14.117188 11.28125 14.308594 L 1.015625 25 L 11.28125 35.691406 C 11.527344 35.953125 11.894531 36.0625 12.242188 35.976563 C 12.589844 35.890625 12.867188 35.625 12.964844 35.28125 C 13.066406 34.933594 12.972656 34.5625 12.71875 34.308594 L 4.746094 26 L 48 26 C 48.359375 26.003906 48.695313 25.816406 48.878906 25.503906 C 49.058594 25.191406 49.058594 24.808594 48.878906 24.496094 C 48.695313 24.183594 48.359375 23.996094 48 24 L 4.746094 24 L 12.71875 15.691406 C 13.011719 15.398438 13.09375 14.957031 12.921875 14.582031 C 12.753906 14.203125 12.371094 13.96875 11.957031 13.988281 Z\"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;\'</strong>;<br>                        } <strong>else if </strong>((<strong>window</strong>.layout_style == <strong>\'layout_style_fullwidth\'</strong>) || (<strong>window</strong>.layout_style == <strong>\'layout_style_suppermarket\'</strong>) || (<strong>window</strong>.layout_style == <strong>\'layout_style_surfup\'</strong>)){<br>                            <strong>return this</strong>.nextArrow = <strong>\'&lt;button type=\"button\" class=\"slick-next\"&gt;&lt;svg viewBox=\"0 0 478.448 478.448\" class=\"icon icon-chevron-right\" id=\"icon-chevron-right\"&gt;&lt;g&gt;&lt;g&gt;&lt;polygon points=\"131.659,0 100.494,32.035 313.804,239.232 100.494,446.373 131.65,478.448 377.954,239.232\"&gt;&lt;/polygon&gt;&lt;/g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;\'</strong>;<br>                        }<br>                        <strong>else </strong>{<br>                            <strong>return this</strong>.nextArrow = <strong>\'&lt;button type=\"button\" class=\"slick-next\"&gt;&lt;i class=\"fa fa-angle-right\"&gt;&lt;/i&gt;&lt;/button&gt;\'</strong>;<br>                        }<br>                    },<br>                    <strong>get </strong><em>prevArrow</em>() {<br>                        <strong>if </strong>((<strong>window</strong>.layout_style == <strong>\'layout_style_1170\'</strong>) || (<strong>window</strong>.layout_style == <strong>\'layout_style_flower\'</strong>)) {<br>                            <strong>return this</strong>.prevArrow = <strong>\'&lt;button type=\"button\" class=\"slick-prev\"&gt;&lt;svg viewBox=\"0 0 50 50\"&gt;&lt;path d=\"M 11.957031 13.988281 C 11.699219 14.003906 11.457031 14.117188 11.28125 14.308594 L 1.015625 25 L 11.28125 35.691406 C 11.527344 35.953125 11.894531 36.0625 12.242188 35.976563 C 12.589844 35.890625 12.867188 35.625 12.964844 35.28125 C 13.066406 34.933594 12.972656 34.5625 12.71875 34.308594 L 4.746094 26 L 48 26 C 48.359375 26.003906 48.695313 25.816406 48.878906 25.503906 C 49.058594 25.191406 49.058594 24.808594 48.878906 24.496094 C 48.695313 24.183594 48.359375 23.996094 48 24 L 4.746094 24 L 12.71875 15.691406 C 13.011719 15.398438 13.09375 14.957031 12.921875 14.582031 C 12.753906 14.203125 12.371094 13.96875 11.957031 13.988281 Z\"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;\'</strong>;<br>                        } <strong>else if </strong>((<strong>window</strong>.layout_style == <strong>\'layout_style_fullwidth\'</strong>) || (<strong>window</strong>.layout_style == <strong>\'layout_style_suppermarket\'</strong>) || (<strong>window</strong>.layout_style == <strong>\'layout_style_surfup\'</strong>)){<br>                            <strong>return this</strong>.prevArrow = <strong>\'&lt;button type=\"button\" class=\"slick-prev\"&gt;&lt;svg viewBox=\"0 0 370.814 370.814\" class=\"icon icon-chevron-left\" id=\"icon-chevron-left\"&gt;&lt;g&gt;&lt;g&gt;&lt;polygon points=\"292.92,24.848 268.781,0 77.895,185.401 268.781,370.814 292.92,345.961 127.638,185.401\"&gt;&lt;/polygon&gt;&lt;/g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;\'</strong>;<br>                        } <br>                        <strong>else </strong>{<br>                            <strong>return this</strong>.prevArrow = <strong>\'&lt;button type=\"button\" class=\"slick-prev\"&gt;&lt;i class=\"fa fa-angle-left\"&gt;&lt;/i&gt;&lt;/button&gt;\'</strong>;<br>                        }<br>                    },<br>                    responsive: [<br>                        {<br>                            <strong>breakpoint</strong>: 1400,<br>                            settings: {<br>                                <strong>get </strong><em>slidesToShow</em>() {<br>                                    <strong>if</strong>(self.hasClass(<strong>\'has-banner\'</strong>)) {<br>                                        <strong>if</strong>(self.hasClass(<strong>\'layout_style_4\'</strong>)) {<br>                                            <strong>return this</strong>.slidesToShow = 2;<br>                                        } <strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToShow = 3;<br>                                        }<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt; 5) {<br>                                            <strong>return this</strong>.slidesToShow = 5;<br>                                        }<br>                                        <strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToShow = productGrid.data(<strong>\'row\'</strong>);<br>                                        }<br>                                    }<br>                                },<br>                                <strong>get </strong><em>slidesToScroll</em>() {<br>                                    <strong>if </strong>(self.hasClass(<strong>\'has-banner\'</strong>)) {<br>                                        <strong>return this</strong>.slidesToScroll = 3;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(productGrid.hasClass(<strong>\'verticle\'</strong>)) {<br>                                            <strong>return this</strong>.slidesToScroll = 1;<br>                                        }<strong>else </strong>{<br>                                            <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                                <strong>return this</strong>.slidesToScroll = 4;<br>                                            }<strong>else if</strong>(gridItemWidth = 3) {<br>                                                <strong>return this</strong>.slidesToScroll = 3;<br>                                            }<strong>else </strong>{<br>                                                <strong>return this</strong>.slidesToScroll = 2;<br>                                            }<br>                                        }<br>                                    };<br>                                }<br>                            }<br>                        },<br>                        {<br>                            <strong>breakpoint</strong>: 1281,<br>                            <strong>dots</strong>: <strong>true</strong>,<br>                            <strong>arrows</strong>: <strong>false</strong>,<br>                            <strong>vertical</strong>: <strong>false</strong>,<br>                            settings: {<br>                                <strong>get </strong><em>slidesToShow</em>() {<br>                                    <strong>if</strong>(self.parents(<strong>\'.featured-products\'</strong>).hasClass(<strong>\'layout_style_7\'</strong>) &amp;&amp; self.hasClass(<strong>\'col-md-12\'</strong>)) {<br>                                        <strong>return this</strong>.slidesToShow = 2;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                            <strong>return this</strong>.slidesToScroll = 4;<br>                                        }<strong>else if</strong>(gridItemWidth = 3) {<br>                                            <strong>return this</strong>.slidesToScroll = 3<br>                                        }<strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToScroll = 2<br>                                        }<br>                                    };<br>                                },<br>                                <strong>get </strong><em>slidesToScroll</em>() {<br>                                    <strong>if</strong>(self.parents(<strong>\'.featured-products\'</strong>).hasClass(<strong>\'layout_style_7\'</strong>) &amp;&amp; self.hasClass(<strong>\'col-md-12\'</strong>)) {<br>                                        <strong>return this</strong>.slidesToScroll = 2;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                            <strong>return this</strong>.slidesToScroll = 4;<br>                                        }<strong>else if</strong>(gridItemWidth = 3) {<br>                                            <strong>return this</strong>.slidesToScroll = 3<br>                                        }<strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToScroll = 2<br>                                        }<br>                                    };<br>                                }<br>                            }<br>                        },<br>                        {<br>                            <strong>breakpoint</strong>: 1200,<br>                            settings: {<br>                                <strong>dots</strong>: <strong>true</strong>,<br>                                <strong>arrows</strong>: <strong>false</strong>,<br>                                <strong>vertical</strong>: <strong>false</strong>,<br>                                <strong>get </strong><em>slidesToShow</em>() {<br>                                    <strong>if</strong>(self.hasClass(<strong>\'has-banner\'</strong>)) {<br>                                        <strong>return this</strong>.slidesToShow = 2;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                            <strong>return this</strong>.slidesToShow = 4;<br>                                        }<strong>else if</strong>(gridItemWidth = 3) {<br>                                            <strong>return this</strong>.slidesToShow = 3<br>                                        }<strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToShow = 2<br>                                        }<br>                                    }<br>                                },<br>                                <strong>get </strong><em>slidesToScroll</em>() {<br>                                    <strong>if </strong>(self.hasClass(<strong>\'has-banner\'</strong>)) {<br>                                        <strong>return this</strong>.slidesToScroll = 2;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                            <strong>return this</strong>.slidesToScroll = 4;<br>                                        }<strong>else if</strong>(gridItemWidth = 3) {<br>                                            <strong>return this</strong>.slidesToScroll = 3<br>                                        }<strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToScroll = 2<br>                                        }<br>                                    };<br>                                }<br>                            }<br>                        },<br>                        {<br>                            <strong>breakpoint</strong>: 1025,<br>                            <strong>dots</strong>: <strong>true</strong>,<br>                            <strong>arrows</strong>: <strong>false</strong>,<br>                            <strong>vertical</strong>: <strong>false</strong>,<br>                            settings: {<br>                                <strong>get </strong><em>slidesToShow</em>() {<br>                                    <strong>if</strong>(self.parents(<strong>\'.featured-products\'</strong>).hasClass(<strong>\'layout_style_7\'</strong>) &amp;&amp; self.hasClass(<strong>\'col-md-12\'</strong>)) {<br>                                        <strong>return this</strong>.slidesToShow = 2;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                            <strong>return this</strong>.slidesToScroll = 4;<br>                                        }<strong>else if</strong>(gridItemWidth = 3) {<br>                                            <strong>return this</strong>.slidesToScroll = 3<br>                                        }<strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToScroll = 2<br>                                        }<br>                                    };<br>                                },<br>                                <strong>get </strong><em>slidesToScroll</em>() {<br>                                    <strong>if</strong>(self.parents(<strong>\'.featured-products\'</strong>).hasClass(<strong>\'layout_style_7\'</strong>) &amp;&amp; self.hasClass(<strong>\'col-md-12\'</strong>)) {<br>                                        <strong>return this</strong>.slidesToScroll = 2;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                            <strong>return this</strong>.slidesToScroll = 4;<br>                                        }<strong>else if</strong>(gridItemWidth = 3) {<br>                                            <strong>return this</strong>.slidesToScroll = 3<br>                                        }<strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToScroll = 2<br>                                        }<br>                                    };<br>                                }<br>                            }<br>                        },<br>                        {<br>                            <strong>breakpoint</strong>: 992,<br>                            settings: {<br>                                <strong>dots</strong>: <strong>true</strong>,<br>                                <strong>arrows</strong>: <strong>false</strong>,<br>                                <strong>vertical</strong>: <strong>false</strong>,<br>                                <strong>get </strong><em>slidesToShow</em>() {<br>                                    <strong>if</strong>(gridItemWidth &gt;= 3) {<br>                                        <strong>if</strong>(self.hasClass(<strong>\'layout_style_5\'</strong>) || self.hasClass(<strong>\'layout_style_6\'</strong>)) {<br>                                            <strong>return this</strong>.slidesToShow = 2;<br>                                        } <strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToShow = 3;<br>                                        }<br>                                    }<strong>else </strong>{<br>                                        <strong>return this</strong>.slidesToShow = 2<br>                                    }<br>                                },<br>                                <strong>get </strong><em>slidesToScroll</em>() {<br>                                    <strong>if</strong>(gridItemWidth &gt;= 3) {<br>                                        <strong>if</strong>(self.hasClass(<strong>\'layout_style_5\'</strong>) || self.hasClass(<strong>\'layout_style_6\'</strong>)) {<br>                                            <strong>return this</strong>.slidesToScroll = 2;<br>                                        } <strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToScroll = 3;<br>                                        }<br>                                    }<strong>else </strong>{<br>                                        <strong>return this</strong>.slidesToScroll = 2<br>                                    }<br>                                }<br>                            }<br>                        },<br>                        {<br>                            <strong>breakpoint</strong>: 768,<br>                            <strong>settings</strong>: {<br>                                <strong>slidesToShow</strong>: 2,<br>                                <strong>slidesToScroll</strong>: 2,<br>                                <strong>arrows</strong>: <strong>false</strong>,<br>                                <strong>vertical</strong>: <strong>false</strong>,<br>                                <strong>dots</strong>: <strong>true<br></strong><strong>                            </strong>}<br>                        }<br>                    ]<br>                });<br>            };<br>        }<br><br>        <strong>if </strong>(ella.checkNeedToConvertCurrency()) {<br>            <strong><em>Currency</em></strong>.convertAll(<strong>window</strong>.shop_currency, $(<strong>\'#currencies .active\'</strong>).attr(<strong>\'data-currency\'</strong>), <strong>\'span.money\'</strong>, <strong>\'money_format\'</strong>);<br>        };<br>        <strong>if </strong>($(<strong>\'.shopify-product-reviews-badge\'</strong>).<strong>length </strong>&amp;&amp; $(<strong>\'.spr-badge\'</strong>).<strong>length</strong>) {<br>            <strong>return </strong><strong>window</strong>.SPR.registerCallbacks(), <strong>window</strong>.SPR.initRatingHandler(), <strong>window</strong>.SPR.initDomEls(), <strong>window</strong>.SPR.loadProducts(), <strong>window</strong>.SPR.loadBadges();<br>        };<br>    }<br>});</pre>\n<!-- /wp:preformatted -->','get collection products with list_product','','draft','open','open','','','','','2021-10-17 23:14:44','2021-10-17 23:14:44','',0,'https://www.mojoin.com/?p=453',0,'post','',0),(454,1,'2021-10-17 23:14:33','2021-10-17 23:14:33','<!-- wp:paragraph -->\n<p>you can get collection products with ajax call URL like this :<br>https://wokamall.com/collections/monitor-stand-riser?view=list_product&amp;constraint=limit=3+layout=carousel+grid=3+sectionId=1632465351a37e7d8d&amp;_=1634511860011</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>in ajax call will be :</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:preformatted -->\n<pre class=\"wp-block-preformatted\">$.ajax({<br>    <strong>type</strong>: <strong>\"get\"</strong>,<br>    <strong>url</strong>: <strong>window</strong>.router + <strong>\'/collections/\' </strong>+ url,<br>    <strong>cache</strong>: <strong>false</strong>,<br>    <strong>data</strong>: {<br>        <strong>view</strong>: <strong>\'list_product\'</strong>,<br>        <strong>constraint</strong>: <strong>\'limit=\' </strong>+ limit + <strong>\'+layout=\' </strong>+ layout + <strong>\'+grid=\' </strong>+ grid + <strong>\'+sectionId=\' </strong>+ sectionId<br>    },<br>    beforeSend: <strong>function </strong>() {<br>        self.addClass(<strong>\'ajax-loaded\'</strong>);<br>    },<br>    success: <strong>function </strong>(data) {<br>        <strong>if </strong>(url != <strong>\'\'</strong>) {<br>            self.find(<strong>\'.products-grid\'</strong>).html(data);<br>        }<br>        $(<strong>\'[data-toggle=\"tooltip\"]\'</strong>).tooltip();<br>        ella.swapHoverVideo();<br>    },<br>    complete: <strong>function </strong>() {<br>        <strong>if </strong>(self.attr(<strong>\'data-featured-products\'</strong>) == <strong>undefined</strong>) {<br>            <strong>return</strong>;<br>        }<br>        <strong>if </strong>(layout == <strong>\'carousel\'</strong>) {<br>            <strong>var </strong>productGrid = self.find(<strong>\'.products-grid\'</strong>),<br>                gridItemWidth = productGrid.data(<strong>\'row\'</strong>),<br>                hasRightSidebar = $(<strong>\'.halo-product-content .pro-page [data-has-right-sidebar]\'</strong>);<br>            <strong>if </strong>(<strong>window</strong>.<strong>innerWidth </strong>&lt; 1200) {<br>                self.on(<strong>\"afterChange\"</strong>, <strong>function</strong>(event, slick) {<br>                    <strong>var </strong><em>isElementVisible </em>= <strong>function</strong>($el, threshold) {<br>                      <strong>var </strong>rect = $el[0].getBoundingClientRect();<br>                      <strong>var </strong>windowHeight = <strong>window</strong>.<strong>innerHeight </strong>|| <strong>document</strong>.<strong>documentElement</strong>.<strong>clientHeight</strong>;<br>                      threshold = threshold ? threshold : 0;<br><br>                      <strong>return </strong>(<br>                        rect.<strong>bottom </strong>&gt;= (0 - (threshold / 1.5)) &amp;&amp;<br>                        rect.<strong>right </strong>&gt;= 0 &amp;&amp;<br>                        rect.<strong>top </strong>&lt;= (windowHeight + threshold) &amp;&amp;<br>                        rect.<strong>left </strong>&lt;= (<strong>window</strong>.<strong>innerWidth </strong>|| <strong>document</strong>.<strong>documentElement</strong>.<strong>clientWidth</strong>)<br>                      );<br>                    };<br><br>                    $(<strong>\'.product-item[data-product-id]\'</strong>).each(<strong>function</strong>(i, el){<br>                      <strong>var </strong>self = $(<strong>this</strong>);<br>                      <strong>if</strong>(<em>isElementVisible</em>($(el), -100)) {<br>                        <strong>var </strong>$product = $(<strong>this</strong>);<br>                        <strong>if</strong>( !$product[0].hasAttribute(<strong>\'data-json-product\'</strong>) ) {<br>                          <strong>if</strong>( $product.hasClass(<strong>\'json-loading\'</strong>) )<br>                            <strong>return</strong>;<br>                          $product.addClass(<strong>\'json-loading\'</strong>);<br>                          <strong>var </strong>handle = $product.find(<strong>\'.product-title\'</strong>).attr(<strong>\'href\'</strong>);<br><br>                          <strong>var </strong>xhr = $.ajax({<br>                            <strong>type</strong>: <strong>\'GET\'</strong>,<br>                            <strong>url</strong>: handle,<br>                            <strong>data</strong>: {<br>                              <strong>view</strong>: <strong>\'get_json\'<br></strong><strong>                            </strong>},<br>                            <strong>cache</strong>: <strong>false</strong>,<br>                            <strong>dataType</strong>: <strong>\'html\'</strong>,<br>                            success: <strong>function </strong>(data) {<br>                              <strong>var </strong>json = <em>JSON</em>.<em>parse</em>(data);<br>                              $product.attr(<strong>\'data-json-product\'</strong>, <em>JSON</em>.<em>stringify</em>(json));<br>                            },<br>                            complete: <strong>function </strong>() {<br>                              $product.removeClass(<strong>\'json-loading\'</strong>);<br>                            }<br>                          });<br>                        }<br>                      }<br>                    });<br>                });<br>            }<br>            <strong>if</strong>(productGrid.not(<strong>\'.slick-initialized\'</strong>)) {<br>                productGrid.slick({<br>                    <strong>get </strong><em>slidesToShow</em>() {<br>                        <strong>if </strong>(hasRightSidebar.<strong>length</strong>) {<br>                            <strong>return this</strong>.slidesToShow = 5;<br>                        } <strong>else </strong>{<br>                            <strong>return this</strong>.slidesToShow = productGrid.data(<strong>\'row\'</strong>);<br>                        }<br>                    },<br><br>                    <strong>get </strong><em>vertical</em>() {<br>                        <strong>if</strong>(productGrid.hasClass(<strong>\'verticle\'</strong>)) {<br>                            <strong>return this</strong>.vertical = <strong>true</strong>;<br>                        }<strong>else </strong>{<br>                            <strong>return this</strong>.vertical = <strong>false</strong>;<br>                        }<br>                    },<br><br>                    <strong>get </strong><em>slidesToScroll</em>() {<br>                        <strong>if</strong>(productGrid.hasClass(<strong>\'verticle\'</strong>)) {<br>                            <strong>return this</strong>.slidesToScroll = 1;<br>                        }<strong>else </strong>{<br>                            <strong>return this</strong>.slidesToScroll = productGrid.data(<strong>\'row\'</strong>);<br>                        }<br>                    },<br><br>                    <strong>speed</strong>: 1000,<br>                    <strong>infinite</strong>: <strong>false</strong>,<br><br>                    <strong>get </strong><em>dots</em>() {<br>                        <strong>if</strong>((self.hasClass(<strong>\'has-banner\'</strong>)) || (<strong>window</strong>.layout_style == <strong>\'layout_style_suppermarket\'</strong>) || (<strong>window</strong>.layout_style == <strong>\'layout_style_surfup\'</strong>)){<br>                            <strong>return this</strong>.dots = <strong>true</strong>;<br>                        }<strong>else </strong>{<br>                            <strong>return this</strong>.dots = <strong>false</strong>;<br>                        };<br>                    },<br>                    <strong>get </strong><em>nextArrow</em>() {<br>                        <strong>if </strong>((<strong>window</strong>.layout_style == <strong>\'layout_style_1170\'</strong>) || (<strong>window</strong>.layout_style == <strong>\'layout_style_flower\'</strong>)) {<br>                            <strong>return this</strong>.nextArrow = <strong>\'&lt;button type=\"button\" class=\"slick-next\"&gt;&lt;svg viewBox=\"0 0 50 50\"&gt;&lt;path d=\"M 11.957031 13.988281 C 11.699219 14.003906 11.457031 14.117188 11.28125 14.308594 L 1.015625 25 L 11.28125 35.691406 C 11.527344 35.953125 11.894531 36.0625 12.242188 35.976563 C 12.589844 35.890625 12.867188 35.625 12.964844 35.28125 C 13.066406 34.933594 12.972656 34.5625 12.71875 34.308594 L 4.746094 26 L 48 26 C 48.359375 26.003906 48.695313 25.816406 48.878906 25.503906 C 49.058594 25.191406 49.058594 24.808594 48.878906 24.496094 C 48.695313 24.183594 48.359375 23.996094 48 24 L 4.746094 24 L 12.71875 15.691406 C 13.011719 15.398438 13.09375 14.957031 12.921875 14.582031 C 12.753906 14.203125 12.371094 13.96875 11.957031 13.988281 Z\"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;\'</strong>;<br>                        } <strong>else if </strong>((<strong>window</strong>.layout_style == <strong>\'layout_style_fullwidth\'</strong>) || (<strong>window</strong>.layout_style == <strong>\'layout_style_suppermarket\'</strong>) || (<strong>window</strong>.layout_style == <strong>\'layout_style_surfup\'</strong>)){<br>                            <strong>return this</strong>.nextArrow = <strong>\'&lt;button type=\"button\" class=\"slick-next\"&gt;&lt;svg viewBox=\"0 0 478.448 478.448\" class=\"icon icon-chevron-right\" id=\"icon-chevron-right\"&gt;&lt;g&gt;&lt;g&gt;&lt;polygon points=\"131.659,0 100.494,32.035 313.804,239.232 100.494,446.373 131.65,478.448 377.954,239.232\"&gt;&lt;/polygon&gt;&lt;/g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;\'</strong>;<br>                        }<br>                        <strong>else </strong>{<br>                            <strong>return this</strong>.nextArrow = <strong>\'&lt;button type=\"button\" class=\"slick-next\"&gt;&lt;i class=\"fa fa-angle-right\"&gt;&lt;/i&gt;&lt;/button&gt;\'</strong>;<br>                        }<br>                    },<br>                    <strong>get </strong><em>prevArrow</em>() {<br>                        <strong>if </strong>((<strong>window</strong>.layout_style == <strong>\'layout_style_1170\'</strong>) || (<strong>window</strong>.layout_style == <strong>\'layout_style_flower\'</strong>)) {<br>                            <strong>return this</strong>.prevArrow = <strong>\'&lt;button type=\"button\" class=\"slick-prev\"&gt;&lt;svg viewBox=\"0 0 50 50\"&gt;&lt;path d=\"M 11.957031 13.988281 C 11.699219 14.003906 11.457031 14.117188 11.28125 14.308594 L 1.015625 25 L 11.28125 35.691406 C 11.527344 35.953125 11.894531 36.0625 12.242188 35.976563 C 12.589844 35.890625 12.867188 35.625 12.964844 35.28125 C 13.066406 34.933594 12.972656 34.5625 12.71875 34.308594 L 4.746094 26 L 48 26 C 48.359375 26.003906 48.695313 25.816406 48.878906 25.503906 C 49.058594 25.191406 49.058594 24.808594 48.878906 24.496094 C 48.695313 24.183594 48.359375 23.996094 48 24 L 4.746094 24 L 12.71875 15.691406 C 13.011719 15.398438 13.09375 14.957031 12.921875 14.582031 C 12.753906 14.203125 12.371094 13.96875 11.957031 13.988281 Z\"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;\'</strong>;<br>                        } <strong>else if </strong>((<strong>window</strong>.layout_style == <strong>\'layout_style_fullwidth\'</strong>) || (<strong>window</strong>.layout_style == <strong>\'layout_style_suppermarket\'</strong>) || (<strong>window</strong>.layout_style == <strong>\'layout_style_surfup\'</strong>)){<br>                            <strong>return this</strong>.prevArrow = <strong>\'&lt;button type=\"button\" class=\"slick-prev\"&gt;&lt;svg viewBox=\"0 0 370.814 370.814\" class=\"icon icon-chevron-left\" id=\"icon-chevron-left\"&gt;&lt;g&gt;&lt;g&gt;&lt;polygon points=\"292.92,24.848 268.781,0 77.895,185.401 268.781,370.814 292.92,345.961 127.638,185.401\"&gt;&lt;/polygon&gt;&lt;/g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/button&gt;\'</strong>;<br>                        } <br>                        <strong>else </strong>{<br>                            <strong>return this</strong>.prevArrow = <strong>\'&lt;button type=\"button\" class=\"slick-prev\"&gt;&lt;i class=\"fa fa-angle-left\"&gt;&lt;/i&gt;&lt;/button&gt;\'</strong>;<br>                        }<br>                    },<br>                    responsive: [<br>                        {<br>                            <strong>breakpoint</strong>: 1400,<br>                            settings: {<br>                                <strong>get </strong><em>slidesToShow</em>() {<br>                                    <strong>if</strong>(self.hasClass(<strong>\'has-banner\'</strong>)) {<br>                                        <strong>if</strong>(self.hasClass(<strong>\'layout_style_4\'</strong>)) {<br>                                            <strong>return this</strong>.slidesToShow = 2;<br>                                        } <strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToShow = 3;<br>                                        }<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt; 5) {<br>                                            <strong>return this</strong>.slidesToShow = 5;<br>                                        }<br>                                        <strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToShow = productGrid.data(<strong>\'row\'</strong>);<br>                                        }<br>                                    }<br>                                },<br>                                <strong>get </strong><em>slidesToScroll</em>() {<br>                                    <strong>if </strong>(self.hasClass(<strong>\'has-banner\'</strong>)) {<br>                                        <strong>return this</strong>.slidesToScroll = 3;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(productGrid.hasClass(<strong>\'verticle\'</strong>)) {<br>                                            <strong>return this</strong>.slidesToScroll = 1;<br>                                        }<strong>else </strong>{<br>                                            <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                                <strong>return this</strong>.slidesToScroll = 4;<br>                                            }<strong>else if</strong>(gridItemWidth = 3) {<br>                                                <strong>return this</strong>.slidesToScroll = 3;<br>                                            }<strong>else </strong>{<br>                                                <strong>return this</strong>.slidesToScroll = 2;<br>                                            }<br>                                        }<br>                                    };<br>                                }<br>                            }<br>                        },<br>                        {<br>                            <strong>breakpoint</strong>: 1281,<br>                            <strong>dots</strong>: <strong>true</strong>,<br>                            <strong>arrows</strong>: <strong>false</strong>,<br>                            <strong>vertical</strong>: <strong>false</strong>,<br>                            settings: {<br>                                <strong>get </strong><em>slidesToShow</em>() {<br>                                    <strong>if</strong>(self.parents(<strong>\'.featured-products\'</strong>).hasClass(<strong>\'layout_style_7\'</strong>) &amp;&amp; self.hasClass(<strong>\'col-md-12\'</strong>)) {<br>                                        <strong>return this</strong>.slidesToShow = 2;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                            <strong>return this</strong>.slidesToScroll = 4;<br>                                        }<strong>else if</strong>(gridItemWidth = 3) {<br>                                            <strong>return this</strong>.slidesToScroll = 3<br>                                        }<strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToScroll = 2<br>                                        }<br>                                    };<br>                                },<br>                                <strong>get </strong><em>slidesToScroll</em>() {<br>                                    <strong>if</strong>(self.parents(<strong>\'.featured-products\'</strong>).hasClass(<strong>\'layout_style_7\'</strong>) &amp;&amp; self.hasClass(<strong>\'col-md-12\'</strong>)) {<br>                                        <strong>return this</strong>.slidesToScroll = 2;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                            <strong>return this</strong>.slidesToScroll = 4;<br>                                        }<strong>else if</strong>(gridItemWidth = 3) {<br>                                            <strong>return this</strong>.slidesToScroll = 3<br>                                        }<strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToScroll = 2<br>                                        }<br>                                    };<br>                                }<br>                            }<br>                        },<br>                        {<br>                            <strong>breakpoint</strong>: 1200,<br>                            settings: {<br>                                <strong>dots</strong>: <strong>true</strong>,<br>                                <strong>arrows</strong>: <strong>false</strong>,<br>                                <strong>vertical</strong>: <strong>false</strong>,<br>                                <strong>get </strong><em>slidesToShow</em>() {<br>                                    <strong>if</strong>(self.hasClass(<strong>\'has-banner\'</strong>)) {<br>                                        <strong>return this</strong>.slidesToShow = 2;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                            <strong>return this</strong>.slidesToShow = 4;<br>                                        }<strong>else if</strong>(gridItemWidth = 3) {<br>                                            <strong>return this</strong>.slidesToShow = 3<br>                                        }<strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToShow = 2<br>                                        }<br>                                    }<br>                                },<br>                                <strong>get </strong><em>slidesToScroll</em>() {<br>                                    <strong>if </strong>(self.hasClass(<strong>\'has-banner\'</strong>)) {<br>                                        <strong>return this</strong>.slidesToScroll = 2;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                            <strong>return this</strong>.slidesToScroll = 4;<br>                                        }<strong>else if</strong>(gridItemWidth = 3) {<br>                                            <strong>return this</strong>.slidesToScroll = 3<br>                                        }<strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToScroll = 2<br>                                        }<br>                                    };<br>                                }<br>                            }<br>                        },<br>                        {<br>                            <strong>breakpoint</strong>: 1025,<br>                            <strong>dots</strong>: <strong>true</strong>,<br>                            <strong>arrows</strong>: <strong>false</strong>,<br>                            <strong>vertical</strong>: <strong>false</strong>,<br>                            settings: {<br>                                <strong>get </strong><em>slidesToShow</em>() {<br>                                    <strong>if</strong>(self.parents(<strong>\'.featured-products\'</strong>).hasClass(<strong>\'layout_style_7\'</strong>) &amp;&amp; self.hasClass(<strong>\'col-md-12\'</strong>)) {<br>                                        <strong>return this</strong>.slidesToShow = 2;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                            <strong>return this</strong>.slidesToScroll = 4;<br>                                        }<strong>else if</strong>(gridItemWidth = 3) {<br>                                            <strong>return this</strong>.slidesToScroll = 3<br>                                        }<strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToScroll = 2<br>                                        }<br>                                    };<br>                                },<br>                                <strong>get </strong><em>slidesToScroll</em>() {<br>                                    <strong>if</strong>(self.parents(<strong>\'.featured-products\'</strong>).hasClass(<strong>\'layout_style_7\'</strong>) &amp;&amp; self.hasClass(<strong>\'col-md-12\'</strong>)) {<br>                                        <strong>return this</strong>.slidesToScroll = 2;<br>                                    }<strong>else </strong>{<br>                                        <strong>if</strong>(gridItemWidth &gt;= 4) {<br>                                            <strong>return this</strong>.slidesToScroll = 4;<br>                                        }<strong>else if</strong>(gridItemWidth = 3) {<br>                                            <strong>return this</strong>.slidesToScroll = 3<br>                                        }<strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToScroll = 2<br>                                        }<br>                                    };<br>                                }<br>                            }<br>                        },<br>                        {<br>                            <strong>breakpoint</strong>: 992,<br>                            settings: {<br>                                <strong>dots</strong>: <strong>true</strong>,<br>                                <strong>arrows</strong>: <strong>false</strong>,<br>                                <strong>vertical</strong>: <strong>false</strong>,<br>                                <strong>get </strong><em>slidesToShow</em>() {<br>                                    <strong>if</strong>(gridItemWidth &gt;= 3) {<br>                                        <strong>if</strong>(self.hasClass(<strong>\'layout_style_5\'</strong>) || self.hasClass(<strong>\'layout_style_6\'</strong>)) {<br>                                            <strong>return this</strong>.slidesToShow = 2;<br>                                        } <strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToShow = 3;<br>                                        }<br>                                    }<strong>else </strong>{<br>                                        <strong>return this</strong>.slidesToShow = 2<br>                                    }<br>                                },<br>                                <strong>get </strong><em>slidesToScroll</em>() {<br>                                    <strong>if</strong>(gridItemWidth &gt;= 3) {<br>                                        <strong>if</strong>(self.hasClass(<strong>\'layout_style_5\'</strong>) || self.hasClass(<strong>\'layout_style_6\'</strong>)) {<br>                                            <strong>return this</strong>.slidesToScroll = 2;<br>                                        } <strong>else </strong>{<br>                                            <strong>return this</strong>.slidesToScroll = 3;<br>                                        }<br>                                    }<strong>else </strong>{<br>                                        <strong>return this</strong>.slidesToScroll = 2<br>                                    }<br>                                }<br>                            }<br>                        },<br>                        {<br>                            <strong>breakpoint</strong>: 768,<br>                            <strong>settings</strong>: {<br>                                <strong>slidesToShow</strong>: 2,<br>                                <strong>slidesToScroll</strong>: 2,<br>                                <strong>arrows</strong>: <strong>false</strong>,<br>                                <strong>vertical</strong>: <strong>false</strong>,<br>                                <strong>dots</strong>: <strong>true<br></strong><strong>                            </strong>}<br>                        }<br>                    ]<br>                });<br>            };<br>        }<br><br>        <strong>if </strong>(ella.checkNeedToConvertCurrency()) {<br>            <strong><em>Currency</em></strong>.convertAll(<strong>window</strong>.shop_currency, $(<strong>\'#currencies .active\'</strong>).attr(<strong>\'data-currency\'</strong>), <strong>\'span.money\'</strong>, <strong>\'money_format\'</strong>);<br>        };<br>        <strong>if </strong>($(<strong>\'.shopify-product-reviews-badge\'</strong>).<strong>length </strong>&amp;&amp; $(<strong>\'.spr-badge\'</strong>).<strong>length</strong>) {<br>            <strong>return </strong><strong>window</strong>.SPR.registerCallbacks(), <strong>window</strong>.SPR.initRatingHandler(), <strong>window</strong>.SPR.initDomEls(), <strong>window</strong>.SPR.loadProducts(), <strong>window</strong>.SPR.loadBadges();<br>        };<br>    }<br>});</pre>\n<!-- /wp:preformatted -->','get collection products with list_product','','inherit','closed','closed','','453-revision-v1','','','2021-10-17 23:14:33','2021-10-17 23:14:33','',453,'https://www.mojoin.com/?p=454',0,'revision','',0),(455,1,'2021-10-18 03:17:20','0000-00-00 00:00:00','<!-- wp:paragraph -->\n<p>how to save and show user recently viewed products</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://medium.com/gobeyond-ai/showing-recently-viewed-products-in-shopify-eff00309642c\">https://medium.com/gobeyond-ai/showing-recently-viewed-products-in-shopify-eff00309642c</a></p>\n<!-- /wp:paragraph -->','how to save and show user recently viewed products','','draft','open','open','','how-to-save-and-show-user-recently-viewed-products','','','2021-10-18 03:17:20','2021-10-18 03:17:20','',0,'https://www.mojoin.com/?p=455',0,'post','',0),(456,1,'2021-10-18 03:17:10','2021-10-18 03:17:10','<!-- wp:paragraph -->\n<p>how to save and show user recently viewed products</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://medium.com/gobeyond-ai/showing-recently-viewed-products-in-shopify-eff00309642c\">https://medium.com/gobeyond-ai/showing-recently-viewed-products-in-shopify-eff00309642c</a></p>\n<!-- /wp:paragraph -->','how to save and show user recently viewed products','','inherit','closed','closed','','455-revision-v1','','','2021-10-18 03:17:10','2021-10-18 03:17:10','',455,'https://www.mojoin.com/?p=456',0,'revision','',0),(457,1,'2021-10-21 00:37:03','2021-10-21 00:37:03','<!-- wp:paragraph -->\n<p>When you develop or modify your Shopify responsive front-end page, as you put more and more elements in, your <a href=\"https://www.w3schools.com/css/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS</a> file constructs and the content will be more complex.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t know when suddenly you maybe find your page does not work well on the mobile because it will make the mobile page has a horizontal scroll. It will be a bad user experience for your mobile users.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>How to fix it? Normally due to some elements\' size over the window size, we know this, but how to find the culprit one from your tons of elements. Of course, you can write javascript snippet codes to find anyone which size is over the screen size.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Is there any easy and quick way to find the culprit? the answer is <strong>YES</strong>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can do as below steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Step1</strong> - Open your page from your Chrome browser</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Step2</strong> - Right-click on your page, select Inspector from the popup menu</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":462,\"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/mj-inspector.png\" alt=\"\" class=\"wp-image-462\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step3</strong> - Switch to Mobile view mode<br>click the mobile switch button switch to Mobile view mode and select iPhone 6/7/8 plus</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":463,\"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/in-mobile-view-mode.png\" alt=\"\" class=\"wp-image-463\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step4</strong> - Add a New Style Rule into Styles context<br>Click + button in the Style Tab</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":467,\"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/ins-add-new-style-rule.png\" alt=\"\" class=\"wp-image-467\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step5</strong> - Change style name to <strong>* </strong>and copy the following CSS code in</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">* {\n    outline: 1px solid #f00 !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Once done your CSS will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":470,\"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/change-to-outline.png\" alt=\"\" class=\"wp-image-470\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step6</strong> - Now you can see all the elements with a red outline</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":472,\"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/outline-all.png\" alt=\"\" class=\"wp-image-472\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now your culprit will appear immediately.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Good luck, hope this can help you out.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','A quick way to find what causes your page horizontal scrolling on mobile','','publish','open','open','','quickway-find-what-causes-horizontal-scrolling-on-mobile','','','2021-10-21 01:11:12','2021-10-21 01:11:12','',0,'https://www.mojoin.com/?p=457',0,'post','',0),(458,1,'2021-10-20 00:32:44','2021-10-20 00:32:44','<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.slide-content .scroller {\n  width: 1024px;\n}\n</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>\"fastestest\" way: added this in inspector:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre 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  outline: 1px solid #f00 !important;\n}\n</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>and the culprit appeared</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to :</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://stackoverflow.com/questions/31458477/find-element-that-is-causing-the-showing-of-horizontal-scrollbar-in-google-chrom?answertab=votes#tab-top\">https://stackoverflow.com/questions/31458477/find-element-that-is-causing-the-showing-of-horizontal-scrollbar-in-google-chrom?answertab=votes#tab-top</a></p>\n<!-- /wp:paragraph -->','a quick way to find what causes horizontal scroll on mobile','','inherit','closed','closed','','457-revision-v1','','','2021-10-20 00:32:44','2021-10-20 00:32:44','',457,'https://www.mojoin.com/?p=458',0,'revision','',0),(460,1,'2021-10-20 00:47:56','2021-10-20 00:47:56','<!-- wp:paragraph -->\n<p>\"fastestest\" way: added this in inspector:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre 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  outline: 1px solid #f00 !important;\n}\n* {\n    outline: 1px solid #f00 !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>and the culprit appeared</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to :</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://stackoverflow.com/questions/31458477/find-element-that-is-causing-the-showing-of-horizontal-scrollbar-in-google-chrom?answertab=votes#tab-top\">https://stackoverflow.com/questions/31458477/find-element-that-is-causing-the-showing-of-horizontal-scrollbar-in-google-chrom?answertab=votes#tab-top</a></p>\n<!-- /wp:paragraph -->','a quick way to find what causes horizontal scroll on mobile','','inherit','closed','closed','','457-revision-v1','','','2021-10-20 00:47:56','2021-10-20 00:47:56','',457,'https://www.mojoin.com/?p=460',0,'revision','',0),(461,1,'2021-10-20 23:52:01','2021-10-20 23:52:01','<!-- wp:paragraph -->\n<p>\"fastestest\" way: added this in inspector:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre 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  outline: 1px solid #f00 !important;\n}\n* {\n    outline: 1px solid #f00 !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>and the culprit appeared</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to :</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https://stackoverflow.com/questions/31458477/find-element-that-is-causing-the-showing-of-horizontal-scrollbar-in-google-chrom?answertab=votes#tab-top\">https://stackoverflow.com/questions/31458477/find-element-that-is-causing-the-showing-of-horizontal-scrollbar-in-google-chrom?answertab=votes#tab-top</a></p>\n<!-- /wp:paragraph -->','A quick way to find what causes your page horizontal scrolling on mobile','','inherit','closed','closed','','457-revision-v1','','','2021-10-20 23:52:01','2021-10-20 23:52:01','',457,'https://www.mojoin.com/?p=461',0,'revision','',0),(462,1,'2021-10-21 00:15:48','2021-10-21 00:15:48','','mj-inspector','','inherit','open','closed','','mj-inspector','','','2021-10-21 00:15:48','2021-10-21 00:15:48','',457,'https://www.mojoin.com/wp-content/uploads/2021/10/mj-inspector.png',0,'attachment','image/png',0),(463,1,'2021-10-21 00:18:05','2021-10-21 00:18:05','','in-mobile-view-mode','','inherit','open','closed','','in-mobile-view-mode','','','2021-10-21 00:18:05','2021-10-21 00:18:05','',457,'https://www.mojoin.com/wp-content/uploads/2021/10/in-mobile-view-mode.png',0,'attachment','image/png',0),(464,1,'2021-10-21 00:18:14','2021-10-21 00:18:14','<!-- wp:paragraph -->\n<p>When you develop or modify your Shopify responsive front-end page, as you put more and more elements in, your CSS file constructs and the content will be more complex.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t know when suddenly you maybe find your page does not work well on the mobile because it will make the mobile page has a horizontal scroll. It will be a bad user experience for your mobile users.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>How to fix it? Normally due to some elements\' size over the window size, we know this, but how to find the culprit one from your tons of elements. Of course, you can write javascript snippet codes to find anyone which size is over the screen size.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Is there any easy and quick way to find the culprit? the answer is YES.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can do as below steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Step1 - Open your page from your Chrome browser</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Step2 - Right-click on your page , select Inspector from popup menu</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":462,\"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/mj-inspector.png\" alt=\"\" class=\"wp-image-462\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Step2 - Switch to Mobile view mode<br>click mobile switch button switch to Mobile view mode and select iPhone 6/7/8 plus</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":463,\"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/in-mobile-view-mode.png\" alt=\"\" class=\"wp-image-463\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">* {\n    outline: 1px solid #f00 !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>and the culprit appeared</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to :</p>\n<!-- /wp:paragraph -->','A quick way to find what causes your page horizontal scrolling on mobile','','inherit','closed','closed','','457-revision-v1','','','2021-10-21 00:18:14','2021-10-21 00:18:14','',457,'https://www.mojoin.com/?p=464',0,'revision','',0),(465,1,'2021-10-21 00:18:32','2021-10-21 00:18:32','<!-- wp:paragraph -->\n<p>When you develop or modify your Shopify responsive front-end page, as you put more and more elements in, your CSS file constructs and the content will be more complex.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t know when suddenly you maybe find your page does not work well on the mobile because it will make the mobile page has a horizontal scroll. It will be a bad user experience for your mobile users.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>How to fix it? Normally due to some elements\' size over the window size, we know this, but how to find the culprit one from your tons of elements. Of course, you can write javascript snippet codes to find anyone which size is over the screen size.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Is there any easy and quick way to find the culprit? the answer is YES.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can do as below steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Step1 - Open your page from your Chrome browser</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Step2 - Right-click on your page , select Inspector from popup menu</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":462,\"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/mj-inspector.png\" alt=\"\" class=\"wp-image-462\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Step3 - Switch to Mobile view mode<br>click mobile switch button switch to Mobile view mode and select iPhone 6/7/8 plus</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":463,\"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/in-mobile-view-mode.png\" alt=\"\" class=\"wp-image-463\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">* {\n    outline: 1px solid #f00 !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>and the culprit appeared</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to :</p>\n<!-- /wp:paragraph -->','A quick way to find what causes your page horizontal scrolling on mobile','','inherit','closed','closed','','457-revision-v1','','','2021-10-21 00:18:32','2021-10-21 00:18:32','',457,'https://www.mojoin.com/?p=465',0,'revision','',0),(466,1,'2021-10-21 00:20:19','2021-10-21 00:20:19','<!-- wp:paragraph -->\n<p>When you develop or modify your Shopify responsive front-end page, as you put more and more elements in, your CSS file constructs and the content will be more complex.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t know when suddenly you maybe find your page does not work well on the mobile because it will make the mobile page has a horizontal scroll. It will be a bad user experience for your mobile users.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>How to fix it? Normally due to some elements\' size over the window size, we know this, but how to find the culprit one from your tons of elements. Of course, you can write javascript snippet codes to find anyone which size is over the screen size.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Is there any easy and quick way to find the culprit? the answer is YES.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can do as below steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Step1 - Open your page from your Chrome browser</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Step2 - Right-click on your page , select Inspector from popup menu</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":462,\"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/mj-inspector.png\" alt=\"\" class=\"wp-image-462\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Step3 - Switch to Mobile view mode<br>click mobile switch button switch to Mobile view mode and select iPhone 6/7/8 plus</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":463,\"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/in-mobile-view-mode.png\" alt=\"\" class=\"wp-image-463\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Step4 - Add a New Style Rule into Styles context<br>Click + button in the Style Tab</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">* {\n    outline: 1px solid #f00 !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>and the culprit appeared</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to :</p>\n<!-- /wp:paragraph -->','A quick way to find what causes your page horizontal scrolling on mobile','','inherit','closed','closed','','457-revision-v1','','','2021-10-21 00:20:19','2021-10-21 00:20:19','',457,'https://www.mojoin.com/?p=466',0,'revision','',0),(467,1,'2021-10-21 00:21:33','2021-10-21 00:21:33','','ins-add-new-style-rule','','inherit','open','closed','','ins-add-new-style-rule','','','2021-10-21 00:21:33','2021-10-21 00:21:33','',457,'https://www.mojoin.com/wp-content/uploads/2021/10/ins-add-new-style-rule.png',0,'attachment','image/png',0),(468,1,'2021-10-21 00:21:46','2021-10-21 00:21:46','<!-- wp:paragraph -->\n<p>When you develop or modify your Shopify responsive front-end page, as you put more and more elements in, your CSS file constructs and the content will be more complex.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t know when suddenly you maybe find your page does not work well on the mobile because it will make the mobile page has a horizontal scroll. It will be a bad user experience for your mobile users.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>How to fix it? Normally due to some elements\' size over the window size, we know this, but how to find the culprit one from your tons of elements. Of course, you can write javascript snippet codes to find anyone which size is over the screen size.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Is there any easy and quick way to find the culprit? the answer is YES.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can do as below steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Step1 - Open your page from your Chrome browser</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Step2 - Right-click on your page , select Inspector from popup menu</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":462,\"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/mj-inspector.png\" alt=\"\" class=\"wp-image-462\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Step3 - Switch to Mobile view mode<br>click mobile switch button switch to Mobile view mode and select iPhone 6/7/8 plus</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":463,\"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/in-mobile-view-mode.png\" alt=\"\" class=\"wp-image-463\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Step4 - Add a New Style Rule into Styles context<br>Click + button in the Style Tab</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":467,\"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/ins-add-new-style-rule.png\" alt=\"\" class=\"wp-image-467\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">* {\n    outline: 1px solid #f00 !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>and the culprit appeared</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to :</p>\n<!-- /wp:paragraph -->','A quick way to find what causes your page horizontal scrolling on mobile','','inherit','closed','closed','','457-revision-v1','','','2021-10-21 00:21:46','2021-10-21 00:21:46','',457,'https://www.mojoin.com/?p=468',0,'revision','',0),(469,1,'2021-10-21 00:25:22','2021-10-21 00:25:22','<!-- wp:paragraph -->\n<p>When you develop or modify your Shopify responsive front-end page, as you put more and more elements in, your CSS file constructs and the content will be more complex.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t know when suddenly you maybe find your page does not work well on the mobile because it will make the mobile page has a horizontal scroll. It will be a bad user experience for your mobile users.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>How to fix it? Normally due to some elements\' size over the window size, we know this, but how to find the culprit one from your tons of elements. Of course, you can write javascript snippet codes to find anyone which size is over the screen size.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Is there any easy and quick way to find the culprit? the answer is YES.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can do as below steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Step1 - Open your page from your Chrome browser</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Step2 - Right-click on your page , select Inspector from popup menu</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":462,\"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/mj-inspector.png\" alt=\"\" class=\"wp-image-462\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Step3 - Switch to Mobile view mode<br>click mobile switch button switch to Mobile view mode and select iPhone 6/7/8 plus</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":463,\"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/in-mobile-view-mode.png\" alt=\"\" class=\"wp-image-463\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Step4 - Add a New Style Rule into Styles context<br>Click + button in the Style Tab</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":467,\"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/ins-add-new-style-rule.png\" alt=\"\" class=\"wp-image-467\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Step5 - Change style name to * and copy the following CSS code in</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">* {\n    outline: 1px solid #f00 !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Once done you CSS will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>and the culprit appeared</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to :</p>\n<!-- /wp:paragraph -->','A quick way to find what causes your page horizontal scrolling on mobile','','inherit','closed','closed','','457-revision-v1','','','2021-10-21 00:25:22','2021-10-21 00:25:22','',457,'https://www.mojoin.com/?p=469',0,'revision','',0),(470,1,'2021-10-21 00:27:15','2021-10-21 00:27:15','','change-to-outline','','inherit','open','closed','','change-to-outline','','','2021-10-21 00:27:15','2021-10-21 00:27:15','',457,'https://www.mojoin.com/wp-content/uploads/2021/10/change-to-outline.png',0,'attachment','image/png',0),(471,1,'2021-10-21 00:27:23','2021-10-21 00:27:23','<!-- wp:paragraph -->\n<p>When you develop or modify your Shopify responsive front-end page, as you put more and more elements in, your CSS file constructs and the content will be more complex.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t know when suddenly you maybe find your page does not work well on the mobile because it will make the mobile page has a horizontal scroll. It will be a bad user experience for your mobile users.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>How to fix it? Normally due to some elements\' size over the window size, we know this, but how to find the culprit one from your tons of elements. Of course, you can write javascript snippet codes to find anyone which size is over the screen size.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Is there any easy and quick way to find the culprit? the answer is YES.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can do as below steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Step1 - Open your page from your Chrome browser</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Step2 - Right-click on your page , select Inspector from popup menu</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":462,\"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/mj-inspector.png\" alt=\"\" class=\"wp-image-462\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Step3 - Switch to Mobile view mode<br>click mobile switch button switch to Mobile view mode and select iPhone 6/7/8 plus</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":463,\"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/in-mobile-view-mode.png\" alt=\"\" class=\"wp-image-463\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Step4 - Add a New Style Rule into Styles context<br>Click + button in the Style Tab</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":467,\"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/ins-add-new-style-rule.png\" alt=\"\" class=\"wp-image-467\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Step5 - Change style name to * and copy the following CSS code in</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">* {\n    outline: 1px solid #f00 !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Once done you CSS will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":470,\"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/change-to-outline.png\" alt=\"\" class=\"wp-image-470\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>and the culprit appeared</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to :</p>\n<!-- /wp:paragraph -->','A quick way to find what causes your page horizontal scrolling on mobile','','inherit','closed','closed','','457-revision-v1','','','2021-10-21 00:27:23','2021-10-21 00:27:23','',457,'https://www.mojoin.com/?p=471',0,'revision','',0),(472,1,'2021-10-21 00:30:02','2021-10-21 00:30:02','','outline-all','','inherit','open','closed','','outline-all','','','2021-10-21 00:30:02','2021-10-21 00:30:02','',457,'https://www.mojoin.com/wp-content/uploads/2021/10/outline-all.png',0,'attachment','image/png',0),(473,1,'2021-10-21 00:31:26','2021-10-21 00:31:26','<!-- wp:paragraph -->\n<p>When you develop or modify your Shopify responsive front-end page, as you put more and more elements in, your CSS file constructs and the content will be more complex.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t know when suddenly you maybe find your page does not work well on the mobile because it will make the mobile page has a horizontal scroll. It will be a bad user experience for your mobile users.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>How to fix it? Normally due to some elements\' size over the window size, we know this, but how to find the culprit one from your tons of elements. Of course, you can write javascript snippet codes to find anyone which size is over the screen size.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Is there any easy and quick way to find the culprit? the answer is YES.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can do as below steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Step1</strong> - Open your page from your Chrome browser</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Step2</strong> - Right-click on your page , select Inspector from popup menu</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":462,\"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/mj-inspector.png\" alt=\"\" class=\"wp-image-462\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step3</strong> - Switch to Mobile view mode<br>click mobile switch button switch to Mobile view mode and select iPhone 6/7/8 plus</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":463,\"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/in-mobile-view-mode.png\" alt=\"\" class=\"wp-image-463\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step4</strong> - Add a New Style Rule into Styles context<br>Click + button in the Style Tab</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":467,\"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/ins-add-new-style-rule.png\" alt=\"\" class=\"wp-image-467\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step5</strong> - Change style name to * and copy the following CSS code in</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">* {\n    outline: 1px solid #f00 !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Once done you CSS will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":470,\"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/change-to-outline.png\" alt=\"\" class=\"wp-image-470\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step6</strong> - Now you can see all the elements with red outline</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":472,\"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/outline-all.png\" alt=\"\" class=\"wp-image-472\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now your culprit will appear immediately.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Good luck, hope can help you out.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','A quick way to find what causes your page horizontal scrolling on mobile','','inherit','closed','closed','','457-revision-v1','','','2021-10-21 00:31:26','2021-10-21 00:31:26','',457,'https://www.mojoin.com/?p=473',0,'revision','',0),(474,1,'2021-10-21 00:31:41','2021-10-21 00:31:41','<!-- wp:paragraph -->\n<p>When you develop or modify your Shopify responsive front-end page, as you put more and more elements in, your CSS file constructs and the content will be more complex.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t know when suddenly you maybe find your page does not work well on the mobile because it will make the mobile page has a horizontal scroll. It will be a bad user experience for your mobile users.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>How to fix it? Normally due to some elements\' size over the window size, we know this, but how to find the culprit one from your tons of elements. Of course, you can write javascript snippet codes to find anyone which size is over the screen size.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Is there any easy and quick way to find the culprit? the answer is YES.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can do as below steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Step1</strong> - Open your page from your Chrome browser</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Step2</strong> - Right-click on your page , select Inspector from popup menu</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":462,\"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/mj-inspector.png\" alt=\"\" class=\"wp-image-462\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step3</strong> - Switch to Mobile view mode<br>click mobile switch button switch to Mobile view mode and select iPhone 6/7/8 plus</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":463,\"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/in-mobile-view-mode.png\" alt=\"\" class=\"wp-image-463\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step4</strong> - Add a New Style Rule into Styles context<br>Click + button in the Style Tab</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":467,\"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/ins-add-new-style-rule.png\" alt=\"\" class=\"wp-image-467\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step5</strong> - Change style name to * and copy the following CSS code in</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">* {\n    outline: 1px solid #f00 !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Once done you CSS will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":470,\"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/change-to-outline.png\" alt=\"\" class=\"wp-image-470\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step6</strong> - Now you can see all the elements with red outline</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":472,\"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/outline-all.png\" alt=\"\" class=\"wp-image-472\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now your culprit will appear immediately.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Good luck, hope this can help you out.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','A quick way to find what causes your page horizontal scrolling on mobile','','inherit','closed','closed','','457-revision-v1','','','2021-10-21 00:31:41','2021-10-21 00:31:41','',457,'https://www.mojoin.com/?p=474',0,'revision','',0),(475,1,'2021-10-21 00:31:57','2021-10-21 00:31:57','<!-- wp:paragraph -->\n<p>When you develop or modify your Shopify responsive front-end page, as you put more and more elements in, your CSS file constructs and the content will be more complex.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t know when suddenly you maybe find your page does not work well on the mobile because it will make the mobile page has a horizontal scroll. It will be a bad user experience for your mobile users.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>How to fix it? Normally due to some elements\' size over the window size, we know this, but how to find the culprit one from your tons of elements. Of course, you can write javascript snippet codes to find anyone which size is over the screen size.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Is there any easy and quick way to find the culprit? the answer is YES.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can do as below steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Step1</strong> - Open your page from your Chrome browser</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Step2</strong> - Right-click on your page , select Inspector from popup menu</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":462,\"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/mj-inspector.png\" alt=\"\" class=\"wp-image-462\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step3</strong> - Switch to Mobile view mode<br>click mobile switch button switch to Mobile view mode and select iPhone 6/7/8 plus</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":463,\"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/in-mobile-view-mode.png\" alt=\"\" class=\"wp-image-463\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step4</strong> - Add a New Style Rule into Styles context<br>Click + button in the Style Tab</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":467,\"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/ins-add-new-style-rule.png\" alt=\"\" class=\"wp-image-467\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step5</strong> - Change style name to * and copy the following CSS code in</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">* {\n    outline: 1px solid #f00 !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Once done your CSS will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":470,\"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/change-to-outline.png\" alt=\"\" class=\"wp-image-470\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step6</strong> - Now you can see all the elements with red outline</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":472,\"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/outline-all.png\" alt=\"\" class=\"wp-image-472\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now your culprit will appear immediately.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Good luck, hope this can help you out.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','A quick way to find what causes your page horizontal scrolling on mobile','','inherit','closed','closed','','457-revision-v1','','','2021-10-21 00:31:57','2021-10-21 00:31:57','',457,'https://www.mojoin.com/?p=475',0,'revision','',0),(476,1,'2021-10-21 00:33:02','2021-10-21 00:33:02','<!-- wp:paragraph -->\n<p>When you develop or modify your Shopify responsive front-end page, as you put more and more elements in, your CSS file constructs and the content will be more complex.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t know when suddenly you maybe find your page does not work well on the mobile because it will make the mobile page has a horizontal scroll. It will be a bad user experience for your mobile users.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>How to fix it? Normally due to some elements\' size over the window size, we know this, but how to find the culprit one from your tons of elements. Of course, you can write javascript snippet codes to find anyone which size is over the screen size.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Is there any easy and quick way to find the culprit? the answer is YES.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can do as below steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Step1</strong> - Open your page from your Chrome browser</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Step2</strong> - Right-click on your page, select Inspector from the popup menu</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":462,\"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/mj-inspector.png\" alt=\"\" class=\"wp-image-462\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step3</strong> - Switch to Mobile view mode<br>click the mobile switch button switch to Mobile view mode and select iPhone 6/7/8 plus</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":463,\"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/in-mobile-view-mode.png\" alt=\"\" class=\"wp-image-463\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step4</strong> - Add a New Style Rule into Styles context<br>Click + button in the Style Tab</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":467,\"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/ins-add-new-style-rule.png\" alt=\"\" class=\"wp-image-467\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step5</strong> - Change style name to * and copy the following CSS code in</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">* {\n    outline: 1px solid #f00 !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Once done your CSS will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":470,\"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/change-to-outline.png\" alt=\"\" class=\"wp-image-470\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step6</strong> - Now you can see all the elements with a red outline</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":472,\"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/outline-all.png\" alt=\"\" class=\"wp-image-472\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now your culprit will appear immediately.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Good luck, hope this can help you out.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','A quick way to find what causes your page horizontal scrolling on mobile','','inherit','closed','closed','','457-revision-v1','','','2021-10-21 00:33:02','2021-10-21 00:33:02','',457,'https://www.mojoin.com/?p=476',0,'revision','',0),(477,1,'2021-10-21 00:36:47','2021-10-21 00:36:47','<!-- wp:paragraph -->\n<p>When you develop or modify your Shopify responsive front-end page, as you put more and more elements in, your <a href=\"https://www.w3schools.com/css/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS</a> file constructs and the content will be more complex.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t know when suddenly you maybe find your page does not work well on the mobile because it will make the mobile page has a horizontal scroll. It will be a bad user experience for your mobile users.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>How to fix it? Normally due to some elements\' size over the window size, we know this, but how to find the culprit one from your tons of elements. Of course, you can write javascript snippet codes to find anyone which size is over the screen size.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Is there any easy and quick way to find the culprit? the answer is YES.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can do as below steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Step1</strong> - Open your page from your Chrome browser</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Step2</strong> - Right-click on your page, select Inspector from the popup menu</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":462,\"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/mj-inspector.png\" alt=\"\" class=\"wp-image-462\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step3</strong> - Switch to Mobile view mode<br>click the mobile switch button switch to Mobile view mode and select iPhone 6/7/8 plus</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":463,\"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/in-mobile-view-mode.png\" alt=\"\" class=\"wp-image-463\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step4</strong> - Add a New Style Rule into Styles context<br>Click + button in the Style Tab</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":467,\"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/ins-add-new-style-rule.png\" alt=\"\" class=\"wp-image-467\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step5</strong> - Change style name to <strong>* </strong>and copy the following CSS code in</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">* {\n    outline: 1px solid #f00 !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Once done your CSS will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":470,\"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/change-to-outline.png\" alt=\"\" class=\"wp-image-470\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step6</strong> - Now you can see all the elements with a red outline</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":472,\"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/outline-all.png\" alt=\"\" class=\"wp-image-472\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now your culprit will appear immediately.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Good luck, hope this can help you out.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','A quick way to find what causes your page horizontal scrolling on mobile','','inherit','closed','closed','','457-revision-v1','','','2021-10-21 00:36:47','2021-10-21 00:36:47','',457,'https://www.mojoin.com/?p=477',0,'revision','',0),(478,1,'2021-10-21 00:36:58','2021-10-21 00:36:58','<!-- wp:paragraph -->\n<p>When you develop or modify your Shopify responsive front-end page, as you put more and more elements in, your <a href=\"https://www.w3schools.com/css/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS</a> file constructs and the content will be more complex.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Don\'t know when suddenly you maybe find your page does not work well on the mobile because it will make the mobile page has a horizontal scroll. It will be a bad user experience for your mobile users.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>How to fix it? Normally due to some elements\' size over the window size, we know this, but how to find the culprit one from your tons of elements. Of course, you can write javascript snippet codes to find anyone which size is over the screen size.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Is there any easy and quick way to find the culprit? the answer is <strong>YES</strong>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can do as below steps:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Step1</strong> - Open your page from your Chrome browser</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Step2</strong> - Right-click on your page, select Inspector from the popup menu</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":462,\"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/mj-inspector.png\" alt=\"\" class=\"wp-image-462\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step3</strong> - Switch to Mobile view mode<br>click the mobile switch button switch to Mobile view mode and select iPhone 6/7/8 plus</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":463,\"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/in-mobile-view-mode.png\" alt=\"\" class=\"wp-image-463\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step4</strong> - Add a New Style Rule into Styles context<br>Click + button in the Style Tab</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":467,\"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/ins-add-new-style-rule.png\" alt=\"\" class=\"wp-image-467\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step5</strong> - Change style name to <strong>* </strong>and copy the following CSS code in</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">* {\n    outline: 1px solid #f00 !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Once done your CSS will look like this:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":470,\"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/change-to-outline.png\" alt=\"\" class=\"wp-image-470\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Step6</strong> - Now you can see all the elements with a red outline</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"id\":472,\"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/outline-all.png\" alt=\"\" class=\"wp-image-472\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>Now your culprit will appear immediately.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Good luck, hope this can help you out.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->','A quick way to find what causes your page horizontal scrolling on mobile','','inherit','closed','closed','','457-revision-v1','','','2021-10-21 00:36:58','2021-10-21 00:36:58','',457,'https://www.mojoin.com/?p=478',0,'revision','',0),(479,1,'2021-10-21 01:10:16','2021-10-21 01:10:16','','stx-post-feature-default','','inherit','open','closed','','stx-post-feature-default','','','2021-10-21 01:10:16','2021-10-21 01:10:16','',457,'https://www.mojoin.com/wp-content/uploads/2021/10/stx-post-feature-default.jpg',0,'attachment','image/jpeg',0),(480,1,'2021-10-21 01:10:21','2021-10-21 01:10:21','','stx-hr-culprit','','inherit','open','closed','','stx-hr-culprit','','','2021-10-21 01:10:21','2021-10-21 01:10:21','',457,'https://www.mojoin.com/wp-content/uploads/2021/10/stx-hr-culprit.jpg',0,'attachment','image/jpeg',0),(482,1,'2021-10-29 04:50:36','2021-10-29 04:50:36','<!-- 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','','publish','open','open','','how-to-add-an-image-setting-to-shopify-theme-setting-page','','','2021-10-29 04:55:07','2021-10-29 04:55:07','',0,'https://www.mojoin.com/?p=482',0,'post','',0),(483,1,'2021-10-28 11:39:14','2021-10-28 11:39:14','<!-- wp:paragraph -->\n<p>you just need to edit your settings_schema.json file </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to https://shopify.dev/themes/architecture/settings#access-settings</p>\n<!-- /wp:paragraph -->','add setting to theme setting page','','inherit','closed','closed','','482-revision-v1','','','2021-10-28 11:39:14','2021-10-28 11:39:14','',482,'https://www.mojoin.com/?p=483',0,'revision','',0),(484,1,'2021-10-28 23:38:37','2021-10-28 23:38:37','','change-full-w','','inherit','open','closed','','change-full-w','','','2021-10-28 23:38:37','2021-10-28 23:38:37','',0,'https://www.mojoin.com/wp-content/uploads/2021/10/change-full-w.png',0,'attachment','image/png',0),(485,1,'2021-10-28 23:45:33','2021-10-28 23:45:33','<!-- wp:paragraph -->\n<p>you just need to edit your settings_schema.json file </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to https://shopify.dev/themes/architecture/settings#access-settings</p>\n<!-- /wp:paragraph -->','How to add an image setting to Shopify theme setting page','','inherit','closed','closed','','482-revision-v1','','','2021-10-28 23:45:33','2021-10-28 23:45:33','',482,'https://www.mojoin.com/?p=485',0,'revision','',0),(486,1,'2021-10-28 23:50:32','2021-10-28 23:50:32','<!-- wp:paragraph -->\n<p>Settings</p>\n<!-- /wp:paragraph -->\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:paragraph -->\n<p>you just need to edit your settings_schema.json file </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to https://shopify.dev/themes/architecture/settings#access-settings</p>\n<!-- /wp:paragraph -->','How to add an image setting to Shopify theme setting page','','inherit','closed','closed','','482-revision-v1','','','2021-10-28 23:50:32','2021-10-28 23:50:32','',482,'https://www.mojoin.com/?p=486',0,'revision','',0),(487,1,'2021-10-28 23:54:33','2021-10-28 23:54:33','','settings-schema-location','','inherit','open','closed','','settings-schema-location','','','2021-10-28 23:54:33','2021-10-28 23:54:33','',482,'https://www.mojoin.com/wp-content/uploads/2021/10/settings-schema-location.png',0,'attachment','image/png',0),(488,1,'2021-10-29 00:00:36','2021-10-29 00:00:36','<!-- 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 at : <strong>shopify admin -> theme -> current online them -> 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:paragraph -->\n<p>Add new Image Setting</p>\n<!-- /wp:paragraph -->\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></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>you just need to edit your settings_schema.json file </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to https://shopify.dev/themes/architecture/settings#access-settings</p>\n<!-- /wp:paragraph -->','How to add an image setting to Shopify theme setting page','','inherit','closed','closed','','482-revision-v1','','','2021-10-29 00:00:36','2021-10-29 00:00:36','',482,'https://www.mojoin.com/?p=488',0,'revision','',0),(489,1,'2021-10-29 00:01:04','2021-10-29 00:01: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 -> theme -> current online them -> 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:paragraph -->\n<p>Add new Image Setting</p>\n<!-- /wp:paragraph -->\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></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>you just need to edit your settings_schema.json file </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to https://shopify.dev/themes/architecture/settings#access-settings</p>\n<!-- /wp:paragraph -->','How to add an image setting to Shopify theme setting page','','inherit','closed','closed','','482-revision-v1','','','2021-10-29 00:01:04','2021-10-29 00:01:04','',482,'https://www.mojoin.com/?p=489',0,'revision','',0),(490,1,'2021-10-29 00:06:21','2021-10-29 00:06:21','','config-updated-with-newimage','','inherit','open','closed','','config-updated-with-newimage','','','2021-10-29 00:06:21','2021-10-29 00:06:21','',482,'https://www.mojoin.com/wp-content/uploads/2021/10/config-updated-with-newimage.png',0,'attachment','image/png',0),(491,1,'2021-10-29 00:07:37','2021-10-29 00:07:37','<!-- 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 -> theme -> current online them -> 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>Save it. go to your theme settings page, you will see your mobile logo setting item:</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>you just need to edit your settings_schema.json file </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to https://shopify.dev/themes/architecture/settings#access-settings</p>\n<!-- /wp:paragraph -->','How to add an image setting to Shopify theme setting page','','inherit','closed','closed','','482-revision-v1','','','2021-10-29 00:07:37','2021-10-29 00:07:37','',482,'https://www.mojoin.com/?p=491',0,'revision','',0),(492,1,'2021-10-29 00:18:15','2021-10-29 00:18:15','<!-- 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>Save it. go to your theme settings page, you will see your mobile logo setting item:</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>you just need to edit your settings_schema.json file </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to https://shopify.dev/themes/architecture/settings#access-settings</p>\n<!-- /wp:paragraph -->','How to add an image setting to Shopify theme setting page','','inherit','closed','closed','','482-revision-v1','','','2021-10-29 00:18:15','2021-10-29 00:18:15','',482,'https://www.mojoin.com/?p=492',0,'revision','',0),(493,1,'2021-10-29 00:18:23','2021-10-29 00:18: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>Save it. go to your theme settings page, you will see your mobile logo setting item:</figcaption></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>you just need to edit your settings_schema.json file </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to https://shopify.dev/themes/architecture/settings#access-settings</p>\n<!-- /wp:paragraph -->','How to add an image setting to Shopify theme setting page','','inherit','closed','closed','','482-revision-v1','','','2021-10-29 00:18:23','2021-10-29 00:18:23','',482,'https://www.mojoin.com/?p=493',0,'revision','',0),(494,1,'2021-10-29 00:18:55','2021-10-29 00:18:55','<!-- 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>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:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>you just need to edit your settings_schema.json file </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>refer to https://shopify.dev/themes/architecture/settings#access-settings</p>\n<!-- /wp:paragraph -->','How to add an image setting to Shopify theme setting page','','inherit','closed','closed','','482-revision-v1','','','2021-10-29 00:18:55','2021-10-29 00:18:55','',482,'https://www.mojoin.com/?p=494',0,'revision','',0),(495,1,'2021-10-29 04:01:06','2021-10-29 04:01:06','<!-- 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>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: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:01:06','2021-10-29 04:01:06','',482,'https://www.mojoin.com/?p=495',0,'revision','',0),(496,1,'2021-10-29 04:04:38','2021-10-29 04:04:38','','mobile-logo-changes','','inherit','open','closed','','mobile-logo-changes','','','2021-10-29 04:04:38','2021-10-29 04:04:38','',482,'https://www.mojoin.com/wp-content/uploads/2021/10/mobile-logo-changes.png',0,'attachment','image/png',0),(497,1,'2021-10-29 04:05:40','2021-10-29 04:05:40','<!-- 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>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></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:05:40','2021-10-29 04:05:40','',482,'https://www.mojoin.com/?p=497',0,'revision','',0),(498,1,'2021-10-29 04:06:41','2021-10-29 04:06:41','<!-- 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>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.</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:06:41','2021-10-29 04:06:41','',482,'https://www.mojoin.com/?p=498',0,'revision','',0),(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),