Liquid, JavaScript, themes, sales channels
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 %}
User | RANK |
---|---|
35 | |
25 | |
14 | |
13 | |
9 |
Make the shift from discounts to donations, and witness your business not only thrive fina...
By Holly Dec 4, 2023On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023