Solved

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

guygalloway
Visitor
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

Accepted Solution (1)
diego_ezfy
Shopify Partner
2935 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 5 (5)

leungvi8
Shopify Partner
20 1 3

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

guygalloway
Visitor
2 0 0

Of course, click HERE.

leungvi8
Shopify Partner
20 1 3

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

diego_ezfy
Shopify Partner
2935 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

AndreasEide
Visitor
1 0 0

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