(Dawn) How to edit/design quick add button onto the featured products images

friendlyrobot19 · ‎07-25-2024

I am trying to add a quick add button to my featured collection on my homepage like the following example below. I would like to also make the button round, with the text "add".

Store link: https://95d536-88.myshopify.com/

Store keycode: www

Dan-From-Ryviu · ‎07-26-2024

Hi @friendlyrobot19

You can do that by adding this code to theme.liquid file, after <head> in Online Store > Themes > Edit code

<style>
.card__content .quick-add {
    position: absolute;
    bottom: 90px;
    right: 10px;
}
.card__content .quick-add .quick-add__submit {
    border-radius: 25px;
}
.card__content .quick-add .quick-add__submit > span { 
   color: transparent; font-size: 1px; }
.card__content .quick-add .quick-add__submit > span:after { 
    content: 'Add'; font-size: 16px; color: #000; display: flex; padding: 0 8px; }  
.card__content .quick-add .quick-add__submit:after {
    border: unset !important;
    box-shadow: unset !important;
}
.card__content .quick-add .quick-add__submit:hover {
 border: 1px solid #000 !important;
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎07-26-2024

Please open Online Store > Themes > Customize > Theme settings > Cart > Cart type, select Drawer or Popup notification

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎07-26-2024

Hi @friendlyrobot19

You can do that by adding this code to theme.liquid file, after <head> in Online Store > Themes > Edit code

<style>
.card__content .quick-add {
    position: absolute;
    bottom: 90px;
    right: 10px;
}
.card__content .quick-add .quick-add__submit {
    border-radius: 25px;
}
.card__content .quick-add .quick-add__submit > span { 
   color: transparent; font-size: 1px; }
.card__content .quick-add .quick-add__submit > span:after { 
    content: 'Add'; font-size: 16px; color: #000; display: flex; padding: 0 8px; }  
.card__content .quick-add .quick-add__submit:after {
    border: unset !important;
    box-shadow: unset !important;
}
.card__content .quick-add .quick-add__submit:hover {
 border: 1px solid #000 !important;
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

friendlyrobot19 · ‎07-26-2024

Thanks so much; I have added the following code, and it works. However, would it be possible for the button to add the item to the cart and remain on the homepage? Similar to how a usual quick buy button functions? Thanks once again.

Dan-From-Ryviu · ‎07-26-2024

Please open Online Store > Themes > Customize > Theme settings > Cart > Cart type, select Drawer or Popup notification

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

(Dawn) How to edit/design quick add button onto the featured products images

(Dawn) How to edit/design quick add button onto the featured products images

Community Blog Articles