Duplicate Collection Page As A Session In Homepage

JAViX · ‎08-03-2023

Hi there.

I have duplicated a session from the collection page to my homepage.

However, it is not working.

I would like to ask how could I copy that session to my homepage by code?

So far I create a section where products are displayed in list view ,but the grid/list view switch and sorting tool is malfunctioned , and the left side bar doesn't show,

Thanks a lot!!

collection-template.liquid:

{%- assign sset = section.settings -%}

<div class="shop-page-area pt-30 pb-65">
  <div class="container">
    <div class="row{% if sset.sidebar_handle == 'left_side' %} flex-row-reverse{% endif %}">
      <div class="col-lg-{%- if sset.sidebar_handle == 'without_sidebar' -%}12{%- else -%}9{%- endif -%}">
        {%- if sset.show_banner -%}
        {%- render 'collection-banner', sset: sset -%}
        {%- endif -%}

        {%- assign products_limit = sset.products_limit_handle -%}
        {%- paginate collection.products by products_limit -%}        
       
        {%- if sset.show_sorting_and_tab -%}
        {%- render 'collection-sorting', paginate: paginate, products_limit: products_limit, sset: sset -%}
        {%- endif -%}      

        <div class="product_grid">
          <div class="row">
            {%- for product in collection.products -%}
            <div class="col-xl-{{ sset.product_col }} col-lg-4 col-md-4 col-sm-6 col-12">
              {%- render 'product-grid-item' with product as product -%}
            </div>
            {%- endfor -%}
          </div>
        </div>

         {% if paginate.pages > 1 %}
        <div class="pagination-total-pages mt-20">
          {%- render 'pagination' with paginate as paginate -%}
          <div class="total-pages">
                   {%- assign paginate_checker = paginate.current_page | times: products_limit -%}
        {%- if paginate.items > paginate_checker  -%}
        	{%- assign paginate_final = paginate_checker -%}
        {%- else -%}
        	{%- assign paginate_final = paginate.items -%}
        {%- endif -%}
            
    {% assign showing_title = section.settings.showing_title_handle | split: "|" %}
            <p>{{ showing_title | slice: 0 }} 
        {{ paginate.current_offset | plus: 1 }} - {{ paginate_final }} 
        {{ showing_title | slice: 1 }} 
        {{ paginate.items }} 
        {{ showing_title | slice: 2 }} </p>
          </div>            
        </div>
           {% endif %}
        {%- endpaginate -%}
      </div>

      {%- unless sset.sidebar_handle == 'without_sidebar' -%}
      <div class="col-lg-3">
        {%- render 'collection-sidebar' -%}
      </div>
      {%- endunless -%}
    </div>
  </div>
</div>





{% schema %}
  {
  	"name": "Collection Page",
  	"settings": [
          {
              "type": "header",
              "content": "Product Options"
          },	
          {
            "type": "select",
            "id": "product_col",
            "label": "Product Column",
            "options":[
                  {
                      "label": "2",
                      "value": "6"
                  },
                  {
                      "label": "3",
                      "value": "4"
                  },
                  {
                      "label": "4",
                      "value": "3"
                  }
              ],
              "default": "3"
          },
          {
            "type": "text",
            "id": "products_limit_handle",
            "label": "Product Limit",
            "default": "16"
          },
          {
            "type": "header",
            "content": "Banner"
          },
          {
            "type": "checkbox",
            "id": "show_banner",
            "label": "Show Banner",
            "default": true
          },
          {
            "type": "image_picker",
            "id": "ban_img",
            "label": "Image"
          },
          {
            "type": "url",
            "id": "ban_url",
            "label": "URL",
            "default": "\/collections\/all"
          },
          {
              "type": "header",
              "content": "Collection Tab Bar and Sorting"
          },
		  {
              "type": "checkbox",
              "id": "show_sorting_and_tab",
              "label": "Show Tab and Sorting",
              "default": true
          },
          {
              "type": "checkbox",
              "id": "show_tab_bar",
              "label": "Show Tab Bar",
              "default": true
          },
		  {
              "type": "text",
              "id": "showing_title_handle",
              "label": "Showing Title",
              "default": "Showing | of | result"
          },
          {
              "type": "checkbox",
              "id": "show_cl_sorting",
              "label": "Show Sorting",
              "default": true
          },
          {
              "type": "header",
              "content": "Collection Sidebar"
          },
          {
              "type": "paragraph",
              "content": "Set up sidebar from Theme settings > Collection Sidebar"
          },
          {
              "type": "radio",
              "id": "sidebar_handle",
              "label": "Sidebar Options",
              "options": [
                  {
                      "label": "Left Sidebar",
                      "value": "left_side"
                  },
                  {
                      "label": "Right Sidebar",
                      "value": "right_side"
                  },
                  {
                      "label": "No Sidebar",
                      "value": "without_sidebar"
                  }
              ],
              "default": "left_side"
          },
          {
            "type": "radio",
            "id": "collection_filtering_handle",
            "label": "Collection Filtering",
            "options": [
              {
                "label": "Storefront Filtering",
                "value": "storefront_filtering"
              },
              {
                "label": "Tag Filtering",
                "value": "tag_filtering"
              }
            ],
            "default": "storefront_filtering",
            "info": "Customize Storefront [filters](\/admin\/menus)"
          }
      ],
	  "blocks":[
	   {
          "type": "menu",
          "name": "Menu",
		  "limit": 1,
          "settings": [
            {
              "type": "text",
              "id": "menu_title",
              "label": "Menu Title",
              "default": "Custom Menu"
            },
            {
              "type": "link_list",
              "id": "menu_handle",
              "label": "Menu"
            }
          ]
       },
	   {
          "type": "category",
          "name": "Category",
		  "limit": 1,
          "settings": [
            {
              "type": "checkbox",
              "id": "categories_enable",
              "label": "Show Categories",
              "default": true
            },
            {
              "type": "text",
              "id": "categories_title",
              "label": "Categories Title",
              "default": "Shop By Categories"
            },
            {
              "type": "text",
              "id": "categories_list_limit_hanlde",
              "label": "Category Limit",
              "default": "5"
            }
          ]
       },
	   {
          "type": "vendor",
          "name": "Vendor",
		  "limit": 1,
          "settings": [
            {
              "type": "text",
              "id": "vendors_title",
              "label": "Vendors Title",
              "default": "By Brand"
            },
            {
              "type": "text",
              "id": "vendors_list_limit_hanlde",
              "label": "Vendor Limit",
              "default": "5"
            }
          ]
       },
	   {
          "type": "type",
          "name": "Type",
		  "limit": 1,
          "settings": [
            {
              "type": "text",
              "id": "types_title",
              "label": "Types Title",
              "default": "Product Types"
            },
            {
              "type": "text",
              "id": "types_list_limit_hanlde",
              "label": "Type Limit",
              "default": "5"
            }
          ]
       },
	   {
          "type": "color",
          "name": "Color",
		  "limit": 1,
          "settings": [
            {
              "type": "text",
              "id": "color_title",
              "label": "Color Title",
              "default": "By Color"
            },
            {
              "type": "textarea",
              "id": "color_picker",
              "label": "Put your color name",
              "default": "red, green, blue, white, yellow, violet, brown, black, orange, grey, pink, purple, maroon, silver, fuchsia, navy, aqua, lime, teal, magenta",
              "info": "Ex: red, green, blue [More Color Name](https:\/\/www.w3schools.com\/colors\/colors_names.asp)"
            },
            {
              "type": "text",
              "id": "colors_list_limit_hanlde",
              "label": "Color Limit",
              "default": "5"
            }
          ]
       },
	   {
          "type": "size",
          "name": "Size",
		  "limit": 1,
          "settings": [
            {
              "type": "text",
              "id": "size_title",
              "label": "Size Title",
              "default": "By Size"
            },
            {
              "type": "textarea",
              "id": "size_picker",
              "label": "Put your size name",
              "default": "xl, xs, ml, X, M, L",
              "info": "Ex: xl, xs, ml"
            },
            {
              "type": "text",
              "id": "size_list_limit_hanlde",
              "label": "Size Limit",
              "default": "5"
            }
          ]
       },
	   {
          "type": "tag",
          "name": "Tag",
		  "limit": 1,
          "settings": [
            {
              "type": "text",
              "id": "tags_title",
              "label": "Tags Title",
              "default": "Popular Tags"
            },
            {
              "type": "text",
              "id": "tags_list_limit_hanlde",
              "label": "Tag Limit",
              "default": "15"
            }
          ]
       }
	]
  }
{% endschema %}

my duplicated section's liquid:

{%- assign sset = section.settings -%}

<!-- HPcollection section starts -->
<section class="HPcollection">
    <div class="shop-page-area pt-30 pb-65">
        <div class="container">
            <div class="row{% if sset.sidebar_handle == 'left_side' %} flex-row-reverse{% endif %}">
                <div class="col-lg-{%- if sset.sidebar_handle == 'without_sidebar' -%}12{%- else -%}9{%- endif -%}">
                    {%- if sset.show_banner -%} 
                    {%- render 'collection-banner', sset: sset -%} 
                    {%- endif -%} 

                    {%- assign products_limit = sset.products_limit_handle -%}
                    {%- paginate collections.all.products by products_limit -%}  
                  
                    {%- if sset.show_sorting_and_tab -%} 
                    {%- render 'collection-sorting', paginate: paginate, products_limit: products_limit, sset: sset -%} 
                    {%- endif -%}

                    <div class="product_grid" id="product-list">
                        {% for product in collections.all.products %} {%- render 'product-list-item' with product as
                        product -%}
                        <div class="product-list-wrapper"></div>
                        {% endfor %}
                    </div>

                    {% if paginate.pages > 1 %}
                      <div class="pagination-total-pages mt-20">
                        {%- render 'pagination' with paginate as paginate -%}
                        <div class="total-pages">
                                 {%- assign paginate_checker = paginate.current_page | times: products_limit -%}
                        {%- if paginate.items > paginate_checker  -%}
                        	{%- assign paginate_final = paginate_checker -%}
                        {%- else -%}
                        	{%- assign paginate_final = paginate.items -%}
                        {%- endif -%}
                            
                        {% assign showing_title = section.settings.showing_title_handle | split: "|" %}
                                <p>{{ showing_title | slice: 0 }} 
                            {{ paginate.current_offset | plus: 1 }} - {{ paginate_final }} 
                            {{ showing_title | slice: 1 }} 
                            {{ paginate.items }} 
                            {{ showing_title | slice: 2 }} </p>
                          </div>            
                        </div>
                         {% endif %}
                      {%- endpaginate -%}
                </div>
                          
            </div>
         <!-- sidebar相關 -->
          {%- unless sset.sidebar_handle == 'without_sidebar' -%}
          <div class="col-lg-3">
            {%- render 'collection-sidebar' -%}
          </div>
          {%- endunless -%} 
        </div>
    </div>
</section>
<!-- HPcollection section ends -->

<!-- Sorting 功能 -->
{%- if sset.show_cl_sorting -%}
<script>
  Shopify.queryParams = {};
  if (location.search.length) {
    for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
      aKeyValue = aCouples[i].split('=');
      if (aKeyValue.length > 1) {
        Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
      }
    }
  }

  $(function() {
    $('#SortBy')
    .val('{{ collection.sort_by | default: collection.default_sort_by }}')
         .bind('change', function() {
      Shopify.queryParams.sort_by = jQuery(this).val();
      location.search = jQuery.param(Shopify.queryParams);
    }
    );
  });
</script>
{%- endif -%}


{% schema %}
{
"name": "HPcollection",
"settings": [
          {
              "type": "header",
              "content": "Product Options"
          },	
          {
            "type": "select",
            "id": "product_col",
            "label": "Product Column",
            "options":[
                  {
                      "label": "2",
                      "value": "6"
                  },
                  {
                      "label": "3",
                      "value": "4"
                  },
                  {
                      "label": "4",
                      "value": "3"
                  }
              ],
              "default": "3"
          },
          {
            "type": "text",
            "id": "products_limit_handle",
            "label": "Product Limit",
            "default": "16"
          },
          {
            "type": "header",
            "content": "Banner"
          },
          {
            "type": "checkbox",
            "id": "show_banner",
            "label": "Show Banner",
            "default": true
          },
          {
            "type": "image_picker",
            "id": "ban_img",
            "label": "Image"
          },
          {
            "type": "url",
            "id": "ban_url",
            "label": "URL",
            "default": "\/collections\/all"
          },
          {
              "type": "header",
              "content": "Collection Tab Bar and Sorting"
          },
		  {
              "type": "checkbox",
              "id": "show_sorting_and_tab",
              "label": "Show Tab and Sorting",
              "default": true
          },
          {
              "type": "checkbox",
              "id": "show_tab_bar",
              "label": "Show Tab Bar",
              "default": true
          },
		  {
              "type": "text",
              "id": "showing_title_handle",
              "label": "Showing Title",
              "default": "Showing | of | result"
          },
          {
              "type": "checkbox",
              "id": "show_cl_sorting",
              "label": "Show Sorting",
              "default": true
          },
          {
              "type": "header",
              "content": "Collection Sidebar"
          },
          {
              "type": "paragraph",
              "content": "Set up sidebar from Theme settings > Collection Sidebar"
          },
          {
              "type": "radio",
              "id": "sidebar_handle",
              "label": "Sidebar Options",
              "options": [
                  {
                      "label": "Left Sidebar",
                      "value": "left_side"
                  },
                  {
                      "label": "Right Sidebar",
                      "value": "right_side"
                  },
                  {
                      "label": "No Sidebar",
                      "value": "without_sidebar"
                  }
              ],
              "default": "left_side"
          },
          {
            "type": "radio",
            "id": "collection_filtering_handle",
            "label": "Collection Filtering",
            "options": [
              {
                "label": "Storefront Filtering",
                "value": "storefront_filtering"
              },
              {
                "label": "Tag Filtering",
                "value": "tag_filtering"
              }
            ],
            "default": "storefront_filtering",
            "info": "Customize Storefront [filters](\/admin\/menus)"
          }
      ],
	  "blocks":[
	   {
          "type": "menu",
          "name": "Menu",
		  "limit": 1,
          "settings": [
            {
              "type": "text",
              "id": "menu_title",
              "label": "Menu Title",
              "default": "Custom Menu"
            },
            {
              "type": "link_list",
              "id": "menu_handle",
              "label": "Menu"
            }
          ]
       },
	   {
          "type": "category",
          "name": "Category",
		  "limit": 1,
          "settings": [
            {
              "type": "checkbox",
              "id": "categories_enable",
              "label": "Show Categories",
              "default": true
            },
            {
              "type": "text",
              "id": "categories_title",
              "label": "Categories Title",
              "default": "Shop By Categories"
            },
            {
              "type": "text",
              "id": "categories_list_limit_hanlde",
              "label": "Category Limit",
              "default": "5"
            }
          ]
       },
	   {
          "type": "vendor",
          "name": "Vendor",
		  "limit": 1,
          "settings": [
            {
              "type": "text",
              "id": "vendors_title",
              "label": "Vendors Title",
              "default": "By Brand"
            },
            {
              "type": "text",
              "id": "vendors_list_limit_hanlde",
              "label": "Vendor Limit",
              "default": "5"
            }
          ]
       },
	   {
          "type": "type",
          "name": "Type",
		  "limit": 1,
          "settings": [
            {
              "type": "text",
              "id": "types_title",
              "label": "Types Title",
              "default": "Product Types"
            },
            {
              "type": "text",
              "id": "types_list_limit_hanlde",
              "label": "Type Limit",
              "default": "5"
            }
          ]
       },
	   {
          "type": "color",
          "name": "Color",
		  "limit": 1,
          "settings": [
            {
              "type": "text",
              "id": "color_title",
              "label": "Color Title",
              "default": "By Color"
            },
            {
              "type": "textarea",
              "id": "color_picker",
              "label": "Put your color name",
              "default": "red, green, blue, white, yellow, violet, brown, black, orange, grey, pink, purple, maroon, silver, fuchsia, navy, aqua, lime, teal, magenta",
              "info": "Ex: red, green, blue [More Color Name](https:\/\/www.w3schools.com\/colors\/colors_names.asp)"
            },
            {
              "type": "text",
              "id": "colors_list_limit_hanlde",
              "label": "Color Limit",
              "default": "5"
            }
          ]
       },
	   {
          "type": "size",
          "name": "Size",
		  "limit": 1,
          "settings": [
            {
              "type": "text",
              "id": "size_title",
              "label": "Size Title",
              "default": "By Size"
            },
            {
              "type": "textarea",
              "id": "size_picker",
              "label": "Put your size name",
              "default": "xl, xs, ml, X, M, L",
              "info": "Ex: xl, xs, ml"
            },
            {
              "type": "text",
              "id": "size_list_limit_hanlde",
              "label": "Size Limit",
              "default": "5"
            }
          ]
       },
	   {
          "type": "tag",
          "name": "Tag",
		  "limit": 1,
          "settings": [
            {
              "type": "text",
              "id": "tags_title",
              "label": "Tags Title",
              "default": "Popular Tags"
            },
            {
              "type": "text",
              "id": "tags_list_limit_hanlde",
              "label": "Tag Limit",
              "default": "15"
            }
          ]
       }
	]
  }
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

Duplicate Collection Page As A Session In Homepage

Duplicate Collection Page As A Session In Homepage

Community Blog Articles