Shopify Product page

AdamOx
New Member
8 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
2127 608 474

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
8 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
2127 608 474

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
8 0 0

AdamOx_0-1712736333106.png

 

Something similar - not the size button

 

scaleupprint
Shopify Partner
40 4 11

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

If you find my post helpful, please like and accept solution
Advanced Product Customizer Image Swatch, Color Swatch, unlimited product options, product designer for personalized products
Email: info@scaleupprint.comFor Shopify tips & tricks follow our YouTube channel
AdamOx
New Member
8 0 0

Hi,

 

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

 

AdamOx_0-1712736105570.png