Liquid, JavaScript, themes, sales channels
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:
But I'd like it to look like this:
Does anyone have a good solution?
Thanks,
Guy
Solved! Go to the solution
This is an accepted solution.
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>
Please let me know whether it works.
Kind regards,
Diego
Do you have a link to your site? So I can take a look at your code.
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
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
This is an accepted solution.
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>
Please let me know whether it works.
Kind regards,
Diego
Can you help me please? I tried this but it does not work on my store.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024