How can I correct the Dawn Theme product media slider count on mobile?

Store Design
, , ,

Topic summary

A user encountered an issue with the Dawn Theme’s product media slider on mobile: images weren’t centered on the page. They fixed the centering by modifying component-slider.css (changing scroll padding to 0 and adding 25px padding left/right), but this caused the slider counter to display an incorrect count—showing one more image than actually exists.

Solution Provided:
Another user (EBOOST) offered CSS code to be added to theme.liquid before the </body> tag. The code uses scroll-padding-inline and scroll-snap-align properties to adjust slider behavior.

Ongoing Issues:

  • The original poster requested further adjustments to fully center images and eliminate the “peek” of the next picture.
  • A second user (takeoverapparel) implemented the code but experienced the same miscounting problem (showing 6 images instead of 5).
  • EBOOST provided updated code focusing on scroll-snap-align: center to resolve the count issue.
  • The second user continues to report images not fully centered with partial visibility of adjacent images.

The discussion remains active with troubleshooting in progress, including some communication moved to private messages.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Originally I was having an issue with Dawn Theme where the product media slider images were not centering in the middle of the page for mobile (see first two attached images “IssueEx”). I was able to remedy this issue by changing scroll padding left:0 and adding 25px of padding to the left and right under component-slider.css. However now the slider count is incorrect, as it is showing there is one more photo than there actually is (see last two attached images). Is there a simple way to change the output of the slider counter to -1? Any push in the right direction would be greatly appreciated.

IssueEx1.jpg
IssueEx1.jpg1170×2532 190 KB

IssueEx2.jpg
IssueEx2.jpg1170×2532 177 KB

Fix1.jpg
Fix1.jpg1170×2532 171 KB

Fix 2.jpg
Fix 2.jpg1170×2532 192 KB

2

Hi @nevadaskye

Could you share your store url and password? I will help check it.

1 Like
3

https://eggculture.com/password
password: h6jbRk3zCxaPaBn

4

Hi @nevadaskye

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/theme.liquid
  3. Add code below to bottom of file before tag
{% if template contains 'product' %}

{% endif %}
1 Like
5

That worked to add padding to the right of the last image which is step in the right direction; However, is it possible to have the media image centered in the middle of the page and eliminate the peek of the next picture?

6

Hi @nevadaskye

Did you add code above? I can’t see it on site now.

7

@EBOOST check again now please

8

Hi @nevadaskye

replace code above with code below

{% if template contains 'product' %}

{% endif %}
9

@EBOOST Please check personal messages

10

Hey i used this code to add to my shopify dawn theme. When I added it. It miscounts the image. Like for one product I have 5 product pictures but once I added the code it says 6

11

my website is www.takeoverapparel.com and password is takeover

12

Hi @takeoverapparel ,

You try to code below:

{% if template contains 'product' %}
      
    {% endif %}

We only need to add a code to fix it

EBOOST_0-1734315312760.png
EBOOST_0-1734315312760.png1129×626 27.1 KB

13

Hello can you help me fix my picture. There not all the way in the middle some of the other picture is still showing on the page on mobile. This is my site www.takeoverapparel.com and password is takeover

14

Hi @takeoverapparel ,

Which issues are you facing? Could you please let me know details?

15

I just texted you