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 %}
Shopify Discussion
Partners and Developers
