Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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 %}
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025