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
New Member
3 0 0

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
New Member
3 0 0

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes