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 Natnel

Can you send me a URL of the page in question? 
 

Pippa

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

Hi Pippa,

let assume that we have a radio selector

when we use also quantity selector , it shows under the previous two selector.

 

Thank you in advance

Pippa_Ridley_-_
Shopify Expert
222 0 11

Hi Natnel

I can't actually click on anything on the page? There's also not a quantity box, only a size and colour select options?

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

Hi Pippa,

 

Thank you for your reply.

as you can see, each box is under the other.

 

thank you in advance for your help.

 

regards

Pippa_Ridley_-_
Shopify Expert
222 0 11

Hi Natnel 

If you add display: inline-block; property to .product-form__item and .product-single__quantity then they should go side by side. 

So 

.product-single__quantity, .product-form__item
{  
    display: inline-block;
}

But on that example page for example I don't think there's room to have them all on the same page. 

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

Hi Pippa,

Thank you very very much :)

daintybowshop
New Member
1 0 0

Please help!! I am trying to get all of these (select finish, Available Size, Qty) to either align the same horizontally or even put them one under the other in a list. Whichever is possible! 

website: www.thedaintybowshop.com pw: lol

Running the "Debut" theme. 

Pippa_Ridley_-_
Shopify Expert
222 0 11

Hi. If you just add the following style: 

#infiniteoptions-container 
{
    margin-bottom: 10px;
}

That should do it I think. 

If you need help with a Shopify customisation, drop me an email on pipparose@etempa.co.uk
Lukáš_Jagnešák
New Member
1 0 0

Hello, Pipa, 

 I'm trying to do the same at SUPPLY theme. Just want to add quantity next to add to cart button. But I'm really lost :( 

Do you think that you can help me a bit?

EXAMPLE:

https://chimpbuddies.com/collections/hot-deals/products/chimp-miniwell-water-filter-system

next thing is that I set up add to cart button via CSS because I need to do it bigger via this code:

button#addToCart-product-template {
  background-color: green;
  border-radius: 10px;
  width: 380px;
  height: 60px;
  font-size: 20px;
  font-weight: bold;
  
}

@media screen and (max-width: 325px){
  button#addToCart { width: 325px; }
}

 

But the ATC button is not accepted AUTO width and on the mobile devices looks really bad.

Thank you very MUCH