How can I modify button style for rounded corners?

Store Design
, ,

Topic summary

A user seeks to add rounded corners to slideshow buttons in the August Shopify theme.

Solution Provided:

  • Navigate to Shopify Admin → Online Store → Themes → Actions → Edit Code
  • Open Asset > theme.css
  • Add custom CSS targeting .slideshow__btn class with border-radius: 12px
  • The code snippet includes hover effects with transitions and scaling animations

Outcome:
The solution successfully resolved the issue. The CSS customization applies rounded corners and includes additional styling for background color (#b96f4a) and interactive hover states with opacity and transform effects.

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

Hi,

I want to change the button style in the slideshow so that it has rounded corners. I’m using August theme .

My website is vitamia.mx

Thank you in advanced.

vitamia6.jpg
vitamia6.jpg1211×757 49.3 KB

1 Like
2

Hello @Pachos

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
.slideshow__btn {
position: relative;
border-radius: 12px;
transition: all 0.3s ease;
overflow: hidden;
z-index: 1;
}
.slideshow__btn::before {
background-color: #b96f4a;
border-radius: 12px;
z-index: -1;
transition: all 0.3s ease;
opacity: 0;
transform: scale(1.2);
}
.slideshow__btn:hover::before {
opacity: 1;
transform: scale(1);
border-radius: 12px;
background-color: #b96f4a;
}

ZestardTech_0-1733120785835.png
ZestardTech_0-1733120785835.png1834×687 126 KB

ZestardTech_1-1733120798652.png
ZestardTech_1-1733120798652.png1914×685 137 KB

1 Like
3

It works! Thank you very much.

1 Like
4

Hello @Pachos

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.