Quantity selector and variant on the same line - Pipeline Theme

[Kreamch]

Hello,

As the title mentions, I would like to have in the same row/line the variant and quantity selector (quantity on the right side). Below you can find a picture for reference of what I intend and here is the link to a product page of my store: https://kream.ch/products/im-from-mugwort-essence-160-ml

Let me know if more information is required.
Thank you in advance for your support.

 

[Sweans · Accepted solution]

Hi @Kreamch ,

To align the variant and quantity selectors in the same row, you will need some coding knowledge. Please follow these steps:

1. In your Shopify admin, navigate to "Online Store" under Sales Channels. Click the "Customize" button for the theme you wish to modify. If you want to make changes directly to the live theme, select the first theme. Refer to the screenshot for guidance.

2. Click on a product shown on the homepage, which will direct you to the product template. Click on a blank area to add the CSS in the custom CSS section. Please refer to the screenshot.

3. Add the following code to the custom CSS section and save:

.product__block__variants {
display: inline-block;
max-width: 280px;
width: 64%;
}
.product__block__quantity {
display: inline-block;
width: fit-content;
}

Please refer to the screenshot for more details. If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,

Sweans

[Entesta]

Hi @Kreamch 

The change you are looking for will require CSS and Liquid file updates. We can help you out to achieve this in a couple of hours.

Please write an email to support@entesta.com to create a request for the same.

Thank you.

[Sweans · Accepted solution]

Hi @Kreamch ,

To align the variant and quantity selectors in the same row, you will need some coding knowledge. Please follow these steps:

1. In your Shopify admin, navigate to "Online Store" under Sales Channels. Click the "Customize" button for the theme you wish to modify. If you want to make changes directly to the live theme, select the first theme. Refer to the screenshot for guidance.

2. Click on a product shown on the homepage, which will direct you to the product template. Click on a blank area to add the CSS in the custom CSS section. Please refer to the screenshot.

3. Add the following code to the custom CSS section and save:

.product__block__variants {
display: inline-block;
max-width: 280px;
width: 64%;
}
.product__block__quantity {
display: inline-block;
width: fit-content;
}

Please refer to the screenshot for more details. If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,

Sweans

[Kreamch]

Hi @Sweans, thank you very much for the solution you provided. It was well explained and more important, it works.
I played a bit with the max width (292) and width (76%) of the variant block in order to fit the fit the content. You can observe the result in the picture below.

I would like for the quantity block to have the same height (top and bottom) of the variant block, and if possible to have a little more space between  the 2 blocks (variant and qty). Lastly, i noticed this css works only on web version, would it be possible for it to be operational also on the mobile version?
Thank you very much!

[Sweans · Accepted solution]

Please make the following changes and add the new media queries to the CSS to resolve the issue with the mobile and tablet views:

.product__block__variants

{
/* Please add this code to the existing CSS */
padding-right: 5px;
}
.product__block__quantity {
/* Please add this code to the existing CSS */
padding-bottom: 0 !important;
}
input.quantity__input {
height: 48px !important;
}

@media only screen and (max-width: 960px) {
.product__block__variants {
width: 69%;
}
.product__block__quantity {
width: 29%;
}
}

@media only screen and (max-width: 540px) {
.product__block__variants {
width: 71%;
}
.product__block__quantity {
width: 27%;
}
}

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[Kreamch]

Works!
Thank you very much