A user is trying to implement two slideshows on their Dawn 7.0 Shopify store—one visible only on desktop, the other only on mobile. Their current CSS targets a specific section ID, which breaks when the template is reused on another store since IDs change.
Proposed Solution:
Use CSS adjacent selectors instead of targeting IDs. If the slideshows are the first two sections within #MainContent and appear consecutively, apply:
#MainContent section:first-child {display:none;}
#MainContent section:first-child + section {display: none;}
UX Concerns Raised:
A responder questions the value of using slideshows without analytics or A/B testing data. Key issues include:
The discussion remains focused on both the technical CSS solution and broader concerns about slideshow effectiveness.
Hi, i have this code below setup on Dawn 7.0 for my slideshows, what it does is allows me to have 2 slideshow sections on my store, and then have the top one display only on desktop, and the bottom only on mobile.
The problem is since it targets an ID # it does not work when i download this template on another store. I want to have the same code function but without the ID. How do I do this?
Here’s my store:
Password: lavishprintshop
Core problem is sections are outputting elements without any indication of what content they contain. An example is the theme section for a collection list should have a wrapper with the CSS class .section-collection-list . This behavior in themes can trivialize solving such problems.
CSS -
If the sections are the first two sections in the content AND are one after the other in the HTML DOM use a CSS adjacent selector.
#MainContent section:first-child {display:none;}
#MainContent section:first-child + section { display: none; }
If you show a product link to that product. There’s imagery for a backpack but no backpack.
Trying to convey vibes doesn’t go far if a customer sees something they like but then can’t find that item.
An indication slideshows should not be used is if a business has no analytics or a/b-testing to backup the value of slideshow content with data.
This isn’t easy to explain but basically not having controls is a self evident proof that a slideshow shouldn’t be used for varying content like this. Your setting it up as if the content is irrelevant to what a user wants to see. If it’s irrelevant then why have it.
If a user sees a piece of content they might click on > then they may not be even be able to because the slide changes > then they wait > then maybe they realize that when they put their mouse over the slide that now prevents the slides from changing to get to the one they maybe were interested on , so they mouse out and need to wait again etc etc. The threshold a prospect will wait again has to be incredibly high for a slideshow to have any value.
If you must use slideshows with no proof then avoid user annoyances.
Don’t have no slide-controls when the slide content will differ greatly in content such as where the position of the Call to action is, the imagery , or urls.
Especially if each slide shows different fashion and links to different content.
Just makes it seem like images/buttons are jumping around the page which may as well be a video.
At minimum either have all the “shop now” texts in the same position, or all images link to the same content, or enable slideshow controls.
At best use hero images and actually prioritize a single product(s) or content(collection) , instead of performance impacting slideshows. This saves a lot of time in trying to cram more into less, fiddling with imagery and settings future content updates, etc etc etc. And saves customer time in pages not having to load excess slide content or waiting for a slide that might have content they care about to cycle back around every couple of minutes.