FROM CACHE - en_header

More elaborate Product Detail Page

Solved
gregorsart
Shopify Partner
53 1 18

I want to develop with the new Dawn Theme. Everything ist fine so far, except the Product Detail Page. If I use more then one product image, they are displayed one img below the other. Is ist possible to integrate a kind of "slideshow" so only one image is shown and the others are accessible via thumbnails or bulletpoints. Is there a theme-app that already supports Shop 2.0 or can I develop functionality myself and how can I start?

Thx for the help, 

Greetings Gregor

Accepted Solution (1)

Accepted Solutions
marcoswatanabe
Shopify Partner
50 6 12

This is an accepted solution.

If you check the code for the product images, they are wrapped in a slider-component (if you check that option in the theme customiser). That means the product images are already ready to be in a slideshow, but on mobile only. 

So you basically just need to change the CSS in order to make the desktop view the same as on mobile devices. That means if some rules are specific to mobile (screen < 750px), you can apply the same for screens > 749px. And if there is anything specific for screens > 749px you can remove. You might need to adjust a few things, but that worked for me! 

If my answer was helpful then please Like and Accept Solution 🙂
If you need help with design, development or marketing your store, talk to one of our experts at https://whymatters.co.uk/

View solution in original post

Replies 4 (4)
marcoswatanabe
Shopify Partner
50 6 12

This is an accepted solution.

If you check the code for the product images, they are wrapped in a slider-component (if you check that option in the theme customiser). That means the product images are already ready to be in a slideshow, but on mobile only. 

So you basically just need to change the CSS in order to make the desktop view the same as on mobile devices. That means if some rules are specific to mobile (screen < 750px), you can apply the same for screens > 749px. And if there is anything specific for screens > 749px you can remove. You might need to adjust a few things, but that worked for me! 

If my answer was helpful then please Like and Accept Solution 🙂
If you need help with design, development or marketing your store, talk to one of our experts at https://whymatters.co.uk/
gregorsart
Shopify Partner
53 1 18

Clever! May I ask, what css files of the Dawn theme did you touch / edit:

  • component-slider.css
  • component-product-model.css

I changed these two, is this enough, because it is only almost working 😉

Greetings newbie

marcoswatanabe
Shopify Partner
50 6 12

component-slider.css should be enough, post a preview link here and I'll be happy to take a look 

If my answer was helpful then please Like and Accept Solution 🙂
If you need help with design, development or marketing your store, talk to one of our experts at https://whymatters.co.uk/
made4Uo
Shopify Partner
2394 429 606

@gregorsart 

Hi, 

I think you mean product slider? If so check this video. Link with code provided under the video description

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.