Getting Color, Size and Quantity selectors on same line in Debut theme?

Solved
guygalloway
New Member
2 0 0

Hi all,

As the title suggests, I want to get the color, size and quantity selectors, on my product pages, on same line as each other. I'm using the Debut theme.

Right now, the color and size selectors are on the same line, but quantity is on a new line, which pushes everything down.

I've been looking for a solution to this problem, with no success. I've seen potential solutions here, here and here but none have provided 100% what I want.

Currently, it looks like this:

guygalloway_0-1613139435782.png

But I'd like it to look like this:

guygalloway_1-1613139473837.png

 

Does anyone have a good solution?

Thanks,

Guy

0 Likes
leungvi8
Excursionist
16 1 1

Do you have a link to your site? So I can take a look at your code.

0 Likes
guygalloway
New Member
2 0 0

Of course, click HERE.

0 Likes
leungvi8
Excursionist
16 1 1

So you would need little bit of knowledge of html and css:

So taking a look at your code, it seem's like all 3 of those field forms (the Colour drop down, Size and Quantity) share the same class name ".product-form__item"... and the css for that is

  1. flex-basis: 50%;
  2. padding: 0 5px;

So an order for them all to be in the same line, you have to do the following:

1) first (CUT) and put the 3rd form field code - "Quantity":

<div class="product-form__item">
<label for="Quantity-product-template">Quantity</label>
<input type="number" id="Quantity-product-template" name="quantity" value="1" min="1" pattern="[0-9]*" class="product-form__input product-form__input--quantity" data-quantity-input="">
</div>

Into the product-form__controls-group. Under the end of the 2nd form fields code (Under size).

2) you have to go into the css/ scss file and change flex-basis from 50% to something like 33%. This will make them all fit in one line

3) Some of the content appears cut, so my only suggestion is to abbreviate the sizes such as SM, M, L instead of Small, Medium, Large.

4) Delete old code the unused "product-form__controls-group" that was used for the Quantity list.

While this solution isn't exactly what you wanted, it's probably the easiest solution.

Hope that helps.

V

0 Likes

This is an accepted solution.

@guygalloway 

 

Fix this in 20 seconds.

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

 

<script>
function move(){

function _moveDOMElement(parent, child) {
    parent.appendChild(child);
  }

function _addStyle(styleString) {
    const style = document.createElement("style");
    style.textContent = styleString;
    document.head.append(style);
  }



var $quantity = document.getElementById(`Quantity-product-template`);

if (!$quantity){return}

var $child = $quantity.closest(`.product-form__controls-group`);
var $parent = document.querySelector(`.product-form__controls-group:first-of-type`);

_addStyle(`
.product-form__controls-group:first-of-type{
    display: flex;
    align-items:center;
    justify-content: center;
}
.product-form__controls-group:first-of-type > *{
    flex-basis: 33.3%;
}
#Quantity-product-template{
    max-width: 100% !important;
        flex-basis: 100%;
width: 100%;
}
`);

_moveDOMElement($parent, $child);
}

move();
</script>

 

 

 

 

diego_ezfy_0-1613537704946.png

 




Please let me know whether it works.

Kind regards,
Diego

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
AndreasEide
New Member
1 0 0

Can you help me please? I tried this but it does not work on my store.

0 Likes