A merchant is seeking help to reposition a custom-coded quick add-to-cart feature on collection pages. Currently, the variant options overlay product images, particularly problematic on mobile devices.
Proposed Solutions:
• CSS styling adjustment: One contributor provided CSS code to make the quick-add button transparent with a colored border, keeping it within the current position but more visually distinct.
• Structural repositioning: The merchant clarified they want the add-to-cart option moved entirely outside the photo container—ideally between the product image and title.
• Code relocation needed: A responder explained this requires moving the HTML code from inside the image container to outside it, warning this change needs careful implementation to avoid breaking functionality.
Current Status:
The discussion remains open. While CSS styling tweaks were offered, the merchant’s preferred solution (repositioning outside the image box) requires more complex code restructuring that hasn’t been fully implemented yet. One contributor offered to handle the code changes directly if needed.
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
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
If this was helpful, hit the like button and accept the solution.
Thanks
Is there a way that we can put it outside the photo? It can be in between the title and the photo.
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
