Hi i would like to change the shape of my button shop now with this one like the photo and also move it in same position . Thanks !
R&D GADGETS MALTA : Online Shopping For Electronic Products Malta (rdmalta.com)
Topic summary
A user wants to change their ‘Shop Now’ button shape and reposition it to match a reference image on their Shopify store.
Initial Solution Attempt:
- First responder provided custom CSS code to add to theme.liquid file
- Code caused the button to disappear on mobile version, though desktop display was nearly correct
Working Solution:
A second responder provided a successful approach:
- Navigate to Online Store → Themes → Customize
- Select ‘Image banner’ block
- Change ‘Desktop content position’ to bottom left
- Change ‘Mobile content alignment’ to Left
- Add custom CSS code to remove border-radius and adjust alignment
Follow-up Customization:
User requested button color change for better visibility of ‘SHOP NOW’ text:
- Additional CSS provided to modify button background color (#FFFFFF) and text color (#000000)
- Solution successfully implemented
Status: Resolved. All customizations working as intended across desktop and mobile.
Hello @PeppePro02
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Hi thank you for your reply , with this code not appering any button on mobile version , by the way in desktop mode is almost good .
Please follow below steps to change the button shape and move the button to bottom left. Let me know whether it is helpful for you.
- From admin, go to “Online Store” → “Themes” → “Customize”.
- Click “Image banner” block.
- Change “Desktop content position” to bottom left and change “Mobile content alignment” to Left.
- Paste below code in the “Custom CSS” field as shown in below image.
@media screen and (max-width: 750px) {
.banner__content.banner__content--bottom-left {
align-items: end;
}
}
.banner__box .button:before, .banner__box .button:after {
border-radius: unset !important;
}
Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.
1 Like
Thank you it works , can be also changed the color inside of the box? So can be easier to find it, where is SHOP NOW .
@PeppePro02 Sure. Please follow below steps to change the button color and let me know whether it is helpful for you.
- As done previously, go to “Online Store” → “Themes” → “Customize” from store admin panel.
- Click “Image banner” block and paste below code in the bottom of the “Custom CSS” field as shown in below image.
.banner__content .banner__box .banner__buttons a.button {
background-color: #FFFFFF;
color: #000000;
border-radius: unset;
}
It will shown like below,
Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.
1 Like
Thank you works!