Minimal Theme: Color, Quantity, Size on the same line

nad1
New Member
20 0 0

Hi all,

I am working with the minimal theme and I am still trying to put the Color, Quantity, Size on the same line.

I found some topics talking about this modifcation (for instance : https://ecommerce.shopify.com/c/ecommerce-design/t/minimal-theme-color-quantity-size-style-on-the-sa...), but it does not work as expected on my side.

The 'AddToCart' button seems to be automatically moved to the right, aligned with the quantity selector. I still not understand the reason.

Could someone give me his help to solve the issue ?

Thanks in advance

shop : gottshop.com

 

Replies 18 (18)
Pippa_Ridley_-_
Shopify Expert
222 0 11

Hi 

Can we see the page in question? 

If you need help with a Shopify customisation, drop me an email on pipparose@etempa.co.uk
nad1
New Member
20 0 0
Pippa_Ridley_-_
Shopify Expert
222 0 11

Hi

If you add this style to your timber.scss stylesheet: 

.product-single__add-to-cart, .product-single__quantity
{
        display: inline-block;
}

That should put everything on one line!

If you need help with a Shopify customisation, drop me an email on pipparose@etempa.co.uk
Soak
New Member
3 0 0

Hi Pippa.

I am trying to do the same thing but nothing is working for me. Do you have any advice?

(Website Link)

Thank you in advance for your help!

Pippa_Ridley_-_
Shopify Expert
222 0 11

Hi

You could try adding this style: 

#AddToCartForm .product-single__quantity
{
    display: inline;
}

It might need a few more alterations to get everything to line up. 

If you need help with a Shopify customisation, drop me an email on pipparose@etempa.co.uk
Soak
New Member
3 0 0

Pippa, thank you for your help! Everything is on the same line now but the 'Add to Cart' button is just a smidge lower than the 'Qty.' box. Do you happen to know how I can bump that up just a bit?

And actually, I didn't think this all the way through. :( I would really like to add all of these things next to the price. Is there a line I can to do that?

This is what I have so far:

.selector-wrapper {
    float: left;
    margin-right: 10px;
}
input#Quantity {
    max-width: 4em;
}
#AddToCartForm .product-single__quantity
{
    display: inline;
}

Thank you again!!!

Pippa_Ridley_-_
Shopify Expert
222 0 11

Hi

If you add 

#AddToCartForm, .product-single__prices
{
    display: inline-block;
}

Then that should get it all on one line, but you will need to spend quite a bit of time adding margins and padding to all the different elements to get it spaced out ok. 

 

If you need help with a Shopify customisation, drop me an email on pipparose@etempa.co.uk
Soak
New Member
3 0 0

Pippa,

Thank you again for your help! I really appreciate it!

Angela

natnel
New Member
4 0 0

Hi Pippa,

thank you for your help.

I have the Brooklyn theme and wanted to know how to have "size color quantity" in the same line

I have tried what you have suggested but did not work.

thank in advance for your help.

 

regards