Can’t switch image by selecting attribute
Mouse can’t slide
Turn the dawn featured category into a slider on the desktop in 2 easy steps.
- unhide the controls on desk top. In component-slider.css change
@media screen and (min-width: 990px) {
.slider-buttons {
display: none;
}
}
to
@media screen and (min-width: 990px) {
#shopify-section-{{ section.id }} .slider-buttons {
display: flex;
}
}
- add slider css settings for destop. In component-slider.css add
@media screen and (min-width: 990px) {
.slider.slider--desktop {
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-left: 1rem;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
}
.slider.slider--desktop .slider__slide {
margin-bottom: 0;
padding-bottom: 0;
}
}
and add .slider .slider–desktop to the slider component UL in featured-category.liquid
I have updated the featured category section to switch netween slider and non slider mode using a checkbox in the featured category configuration settings. Update the code as below. In configuration settings sellect the show slider on desktop settings and ensure products to show is greater than 4.
sections . featured-category.liquid - Replace everything with
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-product-grid.css' | asset_url | stylesheet_tag }}
{%- liquid
assign products_to_display = section.settings.collection.all_products_count
if section.settings.collection.all_products_count > section.settings.products_to_show
assign products_to_display = section.settings.products_to_show
assign more_in_collection = true
endif
-%}
## {{ section.settings.title | escape }}
{%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%}
{{ 'sections.featured_collection.view_all' | t }}
{%- endif -%}
{%- if section.settings.show_view_all and more_in_collection -%}
{{ 'sections.featured_collection.view_all' | t }}
{%- endif -%}
{%- style -%}
{%- if section.settings.collection.all_products_count > 4 and section.settings.show_slider_on_desktop and section.settings.products_to_show > 4 -%}
@media screen and (min-width: 990px) {
#shopify-section-{{ section.id }} .slider-buttons {
display: flex;
}
}
{%- endif -%}
{%- endstyle -%}
{% schema %}
{
"name": "t:sections.featured-collection.name",
"tag": "section",
"class": "spaced-section",
"settings": [
{
"type": "text",
"id": "title",
"default": "Featured collection",
"label": "t:sections.featured-collection.settings.title.label"
},
{
"type": "collection",
"id": "collection",
"label": "t:sections.featured-collection.settings.collection.label"
},
{
"type": "range",
"id": "products_to_show",
"min": 2,
"max": 12,
"step": 2,
"default": 4,
"label": "t:sections.featured-collection.settings.products_to_show.label"
},
{
"type": "checkbox",
"id": "show_slider_on_desktop",
"default": false,
"label": "Enable slider on desktop"
},
{
"type": "checkbox",
"id": "show_view_all",
"default": true,
"label": "t:sections.featured-collection.settings.show_view_all.label"
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.featured-collection.settings.swipe_on_mobile.label"
},
{
"type": "header",
"content": "t:sections.featured-collection.settings.header.content"
},
{
"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": "add_image_padding",
"default": false,
"label": "t:sections.featured-collection.settings.add_image_padding.label"
},
{
"type": "checkbox",
"id": "show_image_outline",
"default": true,
"label": "t:sections.featured-collection.settings.show_image_outline.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"
}
],
"presets": [
{
"name": "t:sections.featured-collection.presets.name"
}
]
}
{% endschema %}
assets > component-slider.css - Replace everything with
slider-component {
position: relative;
display: block;
}
@media screen and (max-width: 989px) {
.no-js slider-component .slider {
padding-bottom: 3rem;
}
}
.slider__slide {
scroll-snap-align: start;
flex-shrink: 0;
}
@media screen and (max-width: 749px) {
.slider.slider--mobile {
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-left: 1rem;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
}
.slider.slider--mobile .slider__slide {
margin-bottom: 0;
padding-bottom: 0;
}
}
@media screen and (max-width: 989px) {
.slider.slider--tablet {
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-left: 1rem;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
}
.slider.slider--tablet .slider__slide {
margin-bottom: 0;
padding-bottom: 0;
}
}
@media screen and (min-width: 990px) {
.slider.slider--desktop {
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-left: 1rem;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
}
.slider.slider--desktop .slider__slide {
margin-bottom: 0;
padding-bottom: 0;
}
}
/* Scrollbar */
.slider {
scrollbar-color: rgb(var(--color-foreground)) rgba(var(--color-foreground), 0.04);
-ms-overflow-style: none;
scrollbar-width: none;
}
.slider::-webkit-scrollbar {
height: 0.4rem;
width: 0.4rem;
display: none;
}
.no-js .slider {
-ms-overflow-style: auto;
scrollbar-width: auto;
}
.no-js .slider::-webkit-scrollbar {
display: initial;
}
.slider::-webkit-scrollbar-thumb {
background-color: rgb(var(--color-foreground));
border-radius: 0.4rem;
border: 0;
}
.slider::-webkit-scrollbar-track {
background: rgba(var(--color-foreground), 0.04);
border-radius: 0.4rem;
}
.slider-counter {
margin: 0 1.2rem;
}
.slider-buttons {
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (min-width: 990px) {
.slider-buttons {
display: none;
}
}
@media screen and (min-width: 750px) {
.slider--mobile + .slider-buttons {
display: none;
}
}
.slider-button {
color: rgba(var(--color-foreground), 0.75);
background: transparent;
border: none;
cursor: pointer;
width: 44px;
height: 44px;
}
.slider-button:not([disabled]):hover {
color: rgb(var(--color-foreground));
}
.slider-button .icon {
height: 0.6rem;
}
.slider-button[disabled] .icon {
color: rgba(var(--color-foreground), 0.3);
}
.slider-button--next .icon {
margin-right: -0.2rem;
transform: rotate(-90deg) translateX(0.15rem);
}
.slider-button--prev .icon {
margin-left: -0.2rem;
transform: rotate(90deg) translateX(-0.15rem);
}
.slider-button--next:not([disabled]):hover .icon {
transform: rotate(-90deg) translateX(0.15rem) scale(1.07);
}
.slider-button--prev:not([disabled]):hover .icon {
transform: rotate(90deg) translateX(-0.15rem) scale(1.07);
}
Hope this is useful
Cheers
Darren
Thank you! This was super helpful
Hi Doug
Just received your message. Did to manage to sort out the code.
If not go into to edit code for your theme and find the files mentioned at
the end of the post and replace everything with the code give for each file.
You can then go back to the theme customiser and add the featured products
section to your homepage with the updated settings.
Let me know if you need any more help.
Kind Regards
Darren
what about the class=“slider–everywhere”
class SlideshowComponent extends SliderComponent
global.js
EDIT: Found the code files. Thanks!
Hi @marcoswata ! This looks super easy and I really like how it looks. Code you let me which
- lines to add the class to? There’s a few in there. And which lines of the {%if%} statement to remove.
And do I need to replicate each instance of the slider–mobile to a new slider–desktop in the component-slider.css?
Thank you!
Hi @RachelFox sorry I got a bit lost in the conversation here, what exactly do you need done now? Feel free to send me a message. This conversation was around the first versions of Dawn, now we’re on version 7 and things are probably very different.
Hi, I am building my first shop and would like to add a collection slider to the homepage. Could u tell me if this code can be adapted to Dawn 9.0? How can I achieve that?
Thank you in advance
@sapiens_sapiens this is already built into Dawn 9.0. Go to theme editor and add the Featured Collection Block and make sure to increase the maximum products to show to something like 10 and make sure to click enable carousel on desktop. Is that what you’re looking for?
Thx for replying. My goal is to have a collection list slider, while featured collection displays products, not the available collections. How can I achieve that?
@sapiens_sapiens Try this.
- Add the “Collection list” block.
- Increase Number of columns on desktop to 5.
- Change Mobile layout to 2 columns and enable swipe on mobile.
- Add the below CSS into the CUSTOM CSS.
- Fill in the desired collections.
.collection-list-wrapper > slider-component > .slider-buttons {
display: flex;
}
.collection-list-wrapper > slider-component > .slider.slider--tablet {
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-left: 1.5rem;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
}
Hope that helps!
Great, thanks. My goal is to enable desktop slider too, like in featured collection. Could you tell me how to do it?
@sapiens_sapiens If you follow my instructions this works on Dawn 9.0 theme. I tested as you can see below:
Otherwise you may have some CSS overriding it. If you install a fresh dawn theme and test it should work fine.
Thank u