Shopify themes, liquid, logos, and UX
I want to make the 'add to cart' button wider on my home screen
Solved! Go to the solution
This is an accepted solution.
Hi @sarpow
You can add this code to Custom CSS of Image with text section that you want the button wider
.button {
padding: 16px 40px;
font-weight: 700;
font-size: 20px;
}
- Solved it? Hit Like and Accept solution! Support me: ❤️Buy Me a Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
@sarpow - can you share the page link?
This is an accepted solution.
Hi @sarpow
You can add this code to Custom CSS of Image with text section that you want the button wider
.button {
padding: 16px 40px;
font-weight: 700;
font-size: 20px;
}
- Solved it? Hit Like and Accept solution! Support me: ❤️Buy Me a Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
.image-with-text .grid__item a.button{width: 100%;}
.button {
padding: 14px 112px;
font-weight: 700;
font-size: 20px;
}
i changed it to this code above to look the best on desktop, but on mobile the order of the text on the button changes, is there a way to keep it the same for both mobile and desktop
Please try to change code to this
.button {
padding: 14px 96px;
font-weight: 700;
font-size: 20px;
}
- Solved it? Hit Like and Accept solution! Support me: ❤️Buy Me a Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
is there any way to have a size for desktop and then a different size for mobile?
Sure, please use this code
.button {
padding: 14px 112px;
font-weight: 700;
font-size: 20px;
}
@media (max-width: 749px){
.button {
padding: 14px 96px !important; /* change numbers to set width of button on mobile */
}
}
- Solved it? Hit Like and Accept solution! Support me: ❤️Buy Me a Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025