We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Quick Add to cart on collection page - Impulse

Quick Add to cart on collection page - Impulse

VA-Laurice
Shopify Partner
19 0 0

Hi,

We have a quick add to cart option on our collection pages. It is custom coded. Can anyone help me adjust how it looks? I need it to be under the image as the options covers the images when they are active - specially on mobile.
We just want the option underneath or still have the image fully shown. 

This is the preview : https://e1gja361fggr6cev-37813911684.shopifypreview.com

Screenshot 2024-09-04 144153.png

Replies 3 (3)

Rahul_dhiman
Shopify Partner
856 168 186

Hello @VA-Laurice 
Go to online store ----> themes ----> actions ----> edit code ---->assets ---->custom.css ---> line number 46
search this code

.webcast-variant-box span.quick-product__label {
margin-top: 10px;
display: inline-block;
background-color: var(--colorBtnPrimary);
width: 100%;
padding: 10px;
}


and replace with this code ( you can change the color as per your requirement)

.webcast-variant-box span.quick-product__label {
margin-top: 10px;
display: inline-block;
background-color: transparent;
width: 100%;
padding: 10px;
border: 2px solid #00ffaa;
color: #00ffaa;
font-size: 21px;
font-weight: bolder;
}

 result

6.png

If this was helpful, hit the like button and accept the solution.
Thanks

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here


BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages

VA-Laurice
Shopify Partner
19 0 0

Is there a way that we can put it outside the photo? It can be in between the title and the photo. 

sahilsharma9515
Shopify Partner
1280 165 249

Hi @VA-Laurice I think you want it outside the image box, if yes then you need to move the code that is written inside the box to outside the box so that it will work accordingly, maybe while doing it you can face some issue, so keep that in mind do it with precaution so that it will not effect the functionality, that is working right now.

 

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️