Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Shopify Community Downtime: The Shopify Community will be down December 5th for 15 minutes between 3pm and 4pm EST. Thank you for your understanding.

Re: Shopify Product page

Shopify Product page

AdamOx
New Member
15 0 0

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

 

AdamOx_0-1712671831093.png

 

 

Thank you

Replies 6 (6)

ThePrimeWeb
Shopify Partner
2139 616 512

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.

ThePrimeWeb_0-1712673779699.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
AdamOx
New Member
15 0 0

Hi,

 

Thank you very much - this worked a treat.

 

How do I move the add to cart buttons up underneath the varient selector?

ThePrimeWeb
Shopify Partner
2139 616 512

I answered that question above.

 

ThePrimeWeb_0-1712736794769.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
AdamOx
New Member
15 0 0

AdamOx_0-1712736333106.png

 

Something similar - not the size button

 

Vivek_goyal
Shopify Partner
54 5 14

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 -

scaleupprint_0-1712675838077.png

 


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

ScalePrint Designer & Variants: Offer customizable products in your Shopify store with ease. (Try for free)
Need a Shopify developer? Hire Us
Email: info@scaleupprint.com For Shopify tips & tricks follow our YouTube channel
AdamOx
New Member
15 0 0

Hi,

 

This is exactly how I'd like the quantity - similar to the screenshot below disregarding the "size"

 

AdamOx_0-1712736105570.png