When reading the link below, it says Dawn will have a slider. Either I can’t find it, or it hasn’t been shipped in the last version. Does anyone have insight into this? https://ux.shopify.com/next-generation-theme-design-5aae94f6d44c Edit: I just found a slider example in a section named “featured…

There is a slider component that seems to be used on mobile only, in some sections. The component CSS and JS can be found at: /assets/component-slider.css /assets/slider.js It uses CSS Flex and you’d have to tweak the CSS to show it on desktop too.

@smj_90 Just FYI. The code is made to specify the use of the productSlider (the one I added). This is the code that I wrote for the onButtonClick function. onButtonClick(event) { event.preventDefault(); if (this.productSlider) { const slideScrollPosition = event.currentTarget.name === ‘next’ ? …

Hi @j1419 I found the problem, seems like there is conflicting css elements being called. In the main-product.liquid, in the product slider code. Delete class=“flickity-desktop” in the image tag <img class=“flickity-desktop” That will solve the issue. I also updated the blog to have a thumbnail …

@JohnFromJotting Thanks for that. The code is working great on mobile now. I like this original code without the thumbnails. Have you thought about making having both versions as separate blogs? Just a thought. Thanks again

Hi @j1419 To get rid of thumbnail, Find and delete below {% if product.images.size > 1 %} {%- for media in product.images -%} {%- endfor -%} {% endif %} then go to the script section and replace it to the below That …

Can’t switch image by selecting attribute

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-{{ secti…

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 produc…

what about the class=“slider–everywhere”

Does anyone know about the Dawn slide component availability?

Store Design

sapiens_sapiens June 2, 2023, 2:31pm 74

Great, thanks. My goal is to enable desktop slider too, like in featured collection. Could you tell me how to do it?

Topic		Replies	Views
DAWN THEME - Product thumbnails as sliders for the dawn theme in specific Store Design	31	364	January 21, 2022
How to change slideshow on Dawn theme from sliding to fading? Store Design	4	75	October 15, 2022
How can I add a product image slider to my Dawn theme store? Store Design	21	348	May 30, 2023
Dawn Theme - Product Page - Product Title over Image slider in Mobile Store Design	11	110	February 7, 2024
Home Page Single Product Carousel Help Store Design design	11	151	December 7, 2024

Does anyone know about the Dawn slide component availability?

Related topics