Hello guys.
I am trying to make subcollections in every collection and i wonder if anyone of you have a code to enable swipe on desktop feature for collection list in dawn theme 6.0.2.
Thanks in advance.
can you please send store url
Hello Mr. Kumar
my store link is www.saketistore.com.gr
i don’t have any collections-list on my main theme version, if you struggling to find one, you can check my Dawn theme version 6.0.2 and press any link from (Quick Links) from footer.
Thank you in advance.
If you need access to my admin page let me know.
Hi @Eleftheria2022 ,
I have written a code for collection list to be a slider. I am selling the code in my website. Only if you are interested, you can visit my website below.
See the demo store here. Password: made4uo
@made4Uo I didn’t forget about you and your services, your YT videos gave me a lot ideas to improve my online store and i planned in a few days to purchase your vertical product slider, may i ask if it’s suitable for 6.0.2 dawn?
2 Likes
@KetanKumar Can this also work for collections instead of products? because i searched a lot before to post here.
1 Like
Thank you. Yes. The vertical product slider should work well with Dawn 6.0.2. If you do encounter errors for some reason, just let me know.
yes its work as well
@KetanKumar This works only for products, i changed a little bit the code and now i can choose collection from backend but when i save my changes the collection won’t show up
here is the code:
refference file: section-collection-slider.liquid
## {{ section.settings.title | escape }}
{% for block in section.blocks %}
{% assign collection = all_collections[block.settings.product_item] %}
{{ collection.title }}
{{ product.price | money }}
{% endfor %}
{% assign nav_range = section.settings.navigation_amount %}
{% style %}
@media only screen and ( min-width: 1201px ) {
{% if nav_range == 2 %}
.dawn-collection-slider .carousel-cell {
width: calc(49% - 10px);
}
{% elsif nav_range == 3 %}
.dawn-collection-slider .carousel-cell {
width: calc(32% - 10px);
}
{% elsif nav_range == 4 %}
.dawn-collection-slider .carousel-cell {
width: calc(24% - 10px);
}
{% endif %}
}
.flickity-page-dots .dot {
background: {{ section.settings.navigation_color }};
}
.flickity-button-icon {
color: {{ section.settings.navigation_color }};
}
{% endstyle %}
{% schema %}
{
"name": "Products slider",
"settings": [
{
"type": "range",
"id": "navigation_amount",
"min": 2,
"max": 4,
"step": 1,
"default": 3,
"label": "Change the number of cards in view"
},
{
"type": "color",
"id": "navigation_color",
"label": "Change color of the pagination|navigation|scrollbar"
},
{
"type": "text",
"id": "title",
"default": "Products slider",
"label": "t:sections.featured-collection.settings.title.label"
}
] ,
"blocks": [
{
"type": "card",
"name": "Product card",
"settings": [
{
"type": "collection",
"id": "collection_list",
"label": "Choose the product you want to displayed"
}
]
}
] ,
"presets": [
{
"name": "Product slider",
"category":"Custom"
}
]
}
{% endschema %}
1 Like
its can be done some custom code but can you create new section
below new section name featured-cards
{%- unless section.settings.title == blank -%}
## {{ section.settings.title }}
{%- endunless -%}
{% for block in section.blocks %}
{% assign product = all_products[block.settings.product_item] %}
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating
%}
{% endfor %}
{% assign nav_range = section.settings.navigation_amount %}
{% style %}
@media only screen and ( min-width: 1201px ) {
{% if nav_range == 2 %}
.featured-cards .carousel-cell {
width: calc(49% - 10px);
}
{% elsif nav_range == 3 %}
.featured-cards .carousel-cell {
width: calc(32% - 10px);
}
{% elsif nav_range == 4 %}
.featured-cards .carousel-cell {
width: calc(24% - 10px);
}
{% elsif nav_range == 5 %}
.featured-cards .carousel-cell {
width: calc(19% - 10px);
}
{% endif %}
}
.flickity-page-dots .dot {
background: {{ section.settings.navigation_color }};
}
.flickity-button-icon {
color: {{ section.settings.navigation_color }};
}
{% endstyle %}
{% schema %}
{
"name": "Product cards",
"settings": [
{
"type": "text",
"id": "title",
"default": "Featured collection",
"label": "t:sections.featured-collection.settings.title.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "range",
"id": "navigation_amount",
"min": 2,
"max": 5,
"step": 1,
"default": 3,
"label": "Change the number of cards in view"
},
{
"type": "color",
"id": "navigation_color",
"label": "Change color of the pagination|navigation|scrollbar"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.label"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "t:sections.featured-collection.settings.show_secondary_image.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.featured-collection.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.featured-collection.settings.show_rating.label",
"info": "t:sections.featured-collection.settings.show_rating.info"
}
] ,
"blocks": [
{
"type": "card",
"name": "Product card",
"settings": [
{
"type": "product",
"id": "product_item",
"label": "Choose the product you want displayed"
}
]
}
] ,
"presets": [
{
"name": "Featured cards",
"category":"Custom"
}
]
}
{% endschema %}
This also works for featured products, i had a file named as featured cards created from jotting.com for featured product slider.
I deleted the previous file and created yours but also that worked for products, i will try to change the code a little bit to featured cards to check if it works, otherwise i will let my developer to create it for me and paste then the code here.
As you can see, the edited code gives us an element on store page but the photo is missing
here is the code
{%- unless section.settings.title == blank -%}
## {{ section.settings.title }}
{%- endunless -%}
{% for block in section.blocks %}
{% assign collection = all_collections[block.settings.product_item] %}
{% render 'card-collection',
card_collection: collection,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating
%}
{% endfor %}
{% assign nav_range = section.settings.navigation_amount %}
{% style %}
@media only screen and ( min-width: 1201px ) {
{% if nav_range == 2 %}
.featured-cards .carousel-cell {
width: calc(49% - 10px);
}
{% elsif nav_range == 3 %}
.featured-cards .carousel-cell {
width: calc(32% - 10px);
}
{% elsif nav_range == 4 %}
.featured-cards .carousel-cell {
width: calc(24% - 10px);
}
{% elsif nav_range == 5 %}
.featured-cards .carousel-cell {
width: calc(19% - 10px);
}
{% endif %}
}
.flickity-page-dots .dot {
background: {{ section.settings.navigation_color }};
}
.flickity-button-icon {
color: {{ section.settings.navigation_color }};
}
{% endstyle %}
{% schema %}
{
"name": "Product cards",
"settings": [
{
"type": "text",
"id": "title",
"default": "Featured collection",
"label": "t:sections.featured-collection.settings.title.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "range",
"id": "navigation_amount",
"min": 2,
"max": 5,
"step": 1,
"default": 3,
"label": "Change the number of cards in view"
},
{
"type": "color",
"id": "navigation_color",
"label": "Change color of the pagination|navigation|scrollbar"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.label"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "t:sections.featured-collection.settings.show_secondary_image.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.featured-collection.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.featured-collection.settings.show_rating.label",
"info": "t:sections.featured-collection.settings.show_rating.info"
}
] ,
"blocks": [
{
"type": "featured_collection",
"name": "t:sections.collection-list.blocks.featured_collection.name",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Choose the product you want displayed"
}
]
}
] ,
"presets": [
{
"name": "Featured cards",
"category":"Custom"
}
]
}
{% endschema %}