Store Link: https://roampro.store
Topic summary
A user needed help changing button background colors on their Shopify store using the Motion theme.
The initial solution involved adding CSS code to the theme.scss file:
- Navigate to Online Store → Theme → Edit code
- Locate theme.scss
- Add custom CSS targeting slideshow button elements
However, this fix broke existing functionality where buttons displayed an arrow icon and extended on hover. The user had previous custom code for:
- Button styling with specific colors (#b825ff)
- Border radius (100px)
- Box shadows
- Variant input wrapping
A revised CSS solution was provided that maintained both the background color change and the existing arrow/extension functionality. The issue was successfully resolved with the updated code.
Hello @roampro
Step 1: Go to Online Store → Theme → Edit code.
Step 2: Search file theme.scss
Step 3: Paste the below code at bottom of the file → Save
.slideshow-wrapper .slideshow__slide .hero__link .animation-contents .btn {
background: skyblue !important;
}
1 Like
Hello Codewiser. This fixed the background issue, but I’ve just noticed that it broke some other code I had there. I had code embedded in that button so that it will extend to the right and display an arrow in front of the text. The extending function still works, but the arrow doesn’t appear anymore. Here is the other code I had for the button:
.btn,
.rte .btn,
.shopify-payment-button .shopify-payment-button__button–unbranded,
.spr-container .spr-button,
.spr-container .spr-summary-actions a {
border-radius: 100px !important;
}
.variant-input-wrap input[type=“radio”]:checked + label {
box-shadow: 0 0 0 2px #8b52ff;
background: #8b52ff;
color: #fff;
}
Please remove above code which I sent on my previous reply and paste these new code.
.slideshow-wrapper .slideshow__slide .hero__link .animation-contents .btn{background-color: dodgerblue !important;}
Let me know if you need any help
1 Like
Thanks, that solved it!
1 Like