How to add custom arrows on thumbnail carousel?

Store Design
, ,

Topic summary

A user asked how to add custom arrows to a thumbnail carousel on their Shopify product page. A solution was provided involving CSS customization:

Steps provided:

  • Navigate to Shopify Admin → Online Store → Theme → Edit code
  • Locate the base.css file
  • Insert CSS code targeting .slider-button class

CSS modifications:

  • Add black border with border: 1px solid black !important
  • Apply rounded corners with border-radius: 30px
  • Adjust icon height to 0.8rem

The solution was confirmed successful by the original poster, who marked it as resolved. The helper offered continued support for any additional customization needs.

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

Anyone know how to add custom arrows on thumbnail carousel?

url: https://errival.com/products/errival%E2%84%A2-instant-period-cramp-relief-heated-belt

imageedit_1_3705903089.png
imageedit_1_3705903089.png1000×565 188 KB

2

Hi @Ryan1998 ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css

Step 3: Insert this code:

.slider-button {
    border: 1px solid black !important;
    border-radius: 30px;
}

.slider-button .icon {
    height: 0.8rem !important;
}

Here is result:

BSSCommerceHDL_0-1720967679214.png
BSSCommerceHDL_0-1720967679214.png1888×662 154 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

great thanks!

1 Like
4

@Ryan1998 No problem, If you need anything please let me know :heart_eyes:

1 Like