Solved

Expanse theme: How to move the quantity selector next to the buy button/price

Greenpeareco
Excursionist
13 0 3

Our website is www.greenpeareco.com

 

We currently have a lot of blocks on the product page meaning people have to scroll a fair bit to get past the "frequently bought with..." and subscription options.

 

Please can someone provide the code edits to move the quantity selector either next to the buy buttons or the price?

 

Thank you

Accepted Solution (1)

theycallmemakka
Shopify Partner
1476 336 359

This is an accepted solution.

Hi @Greenpeareco ,

 

I have written custom CSS. Can you try this and let me know if this works.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
.product-single__meta > div[data-product-blocks] {
    display: flex;
    flex-wrap: wrap;
}
.product-single__meta > div[data-product-blocks] div.product-block:nth-child(1),
.product-single__meta > div[data-product-blocks] div.product-block:nth-child(n+4){
 width: 100%;
}
.product-single__meta > div[data-product-blocks] div.product-block:nth-child(2) {
 margin-right: 3rem;
}
</style>

theycallmemakka_0-1714130430091.png

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 2 (2)

theycallmemakka
Shopify Partner
1476 336 359

This is an accepted solution.

Hi @Greenpeareco ,

 

I have written custom CSS. Can you try this and let me know if this works.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
.product-single__meta > div[data-product-blocks] {
    display: flex;
    flex-wrap: wrap;
}
.product-single__meta > div[data-product-blocks] div.product-block:nth-child(1),
.product-single__meta > div[data-product-blocks] div.product-block:nth-child(n+4){
 width: 100%;
}
.product-single__meta > div[data-product-blocks] div.product-block:nth-child(2) {
 margin-right: 3rem;
}
</style>

theycallmemakka_0-1714130430091.png

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Greenpeareco
Excursionist
13 0 3

Perfect, thank you so much