How to change size of thumbnail carousel?

Store Design
, ,

Topic summary

A user seeks to reduce the size of their product page thumbnail carousel. A solution is provided involving custom CSS code:

Implementation steps:

  • Navigate to Shopify Admin ā†’ Online Store ā†’ Theme ā†’ Edit code
  • Locate the CSS file (base.css, theme.css, styles.css, custom.css, or theme.scss.liquid)
  • Add CSS code at the bottom targeting .product_thumbnail-slider and .slider-button elements
  • The code adjusts padding and scale properties to reduce thumbnail size

Outcome:
The original poster confirms the solution works perfectly. The thread then receives a follow-up question about displaying more thumbnail images simultaneously on mobile devices, which remains unanswered.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

How to change size of thumbnail carousel?

From this:

Screenshot 2024-06-30 at 11.11.00.png
Screenshot 2024-06-30 at 11.11.00.png1414Ɨ1268 291 KB

To this:

Screenshot 2024-06-30 at 11.10.52.png
Screenshot 2024-06-30 at 11.10.52.png1418Ɨ1132 425 KB

2

Hi @Ryan1998 ,

Step 1: Go to Shopify Admin ā†’ Online Store ->Theme ā†’ Edit code

BSSCommerceHDL_0-1719759712292.png
BSSCommerceHDL_0-1719759712292.png1902Ɨ899 133 KB

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

BSSCommerceHDL_1-1719759720044.png
BSSCommerceHDL_1-1719759720044.png1916Ɨ934 101 KB

Step 3: Insert the below code at the bottom of the file ā†’ Save

@media only screen and (min-width: 750px) {
    .product--thumbnail_slider .thumbnail-slider {
        padding: 0 100px;
        transform: translateX(12%);
    }
}

button.slider-button svg {
    scale: 2.5;
}

Here is result:

BSSCommerceHDL_2-1719759759447.png
BSSCommerceHDL_2-1719759759447.png1141Ɨ659 342 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
3

Works perfect :+1:

1 Like
4

@Ryan1998 , Iā€™m happy to always be able to help you :heart_eyes:

1 Like
5

Hi is there a way to get more images to show up at a time in the thumbnail on mobile version