Shopify themes, liquid, logos, and UX
Hi,
Im looking for a way to move the add to cart button up just below the flavour variant selector.
Is there also a way to have the flavour variant selector go all the way across the full width of the box?
I'd love to have the variant and quantity stacked ontop of each other with the add-to-cart buttons just beneath.
https://www.discount-supplements.co.uk/products/efectiv-nutrition-whey-2kg
Thank you
Hey @AdamOx,
"I'd love to have the variant and quantity stacked ontop of each other with the add-to-cart buttons just beneath."
Not really possible due to way the code is structured. Would have to do major overhaul for that. Not worth the trouble.
Is there also a way to have the flavour variant selector go all the way across the full width of the box?
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
.product-form__variants {
display: grid !important;
grid-template-columns: 1fr auto !important;
}
.product-form__single-selector,
.select-wrapper.select-wrapper--primary {
width: 100% !important;
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Hi,
Thank you very much - this worked a treat.
How do I move the add to cart buttons up underneath the varient selector?
I answered that question above.
Something similar - not the size button
Dear @AdamOx ,
Hope you are doing well.
The UI modification you requested can be achieved through adjustments to your Shopify theme's CSS code and product template.
Due to the way these controls are currently organized, moving add to cart button and quantity box would require significant restructuring of the product template.
For your reference here is a screenshot showcasing the proposed changes -
Should you require further details regarding these adjustments, please don't hesitate to reach out. Alternatively, you can reach us directly.
Thanks & Regards,
Vivek
Team Scale-up Print
Hi,
This is exactly how I'd like the quantity - similar to the screenshot below disregarding the "size"
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024