Shopify themes, liquid, logos, and UX
I’m using the Impact theme for my Shopify store, and I’d like to move the quantity selector so that it appears directly next to the 'Add to Cart' button on the product page.
Currently, the quantity selector appears above the button, but I want both elements to sit side by side for a cleaner and more user-friendly layout. Could someone guide me on whether I should adjust the theme's code? Any tips on specific HTML, or CSS adjustments would be greatly appreciated.
This is how it looks at this moment:
Thank you!
Solved! Go to the solution
This is an accepted solution.
It would be better to edit the theme's Liquid code.
However, I’ve tried creating a custom CSS code that might help:
@media screen and (min-width: 750px) {
.product-info__block-item[data-block-id="quantity_selector"] {
float: left;
width: 30%;
}
.product-info__block-item[data-block-id="buy_buttons"] {
float: left;
width: 70%;
margin-block-start: 3rem;
}
.product-info__block-item[data-block-id="buy_buttons"] + * {
clear: both;
}
}
This is an accepted solution.
It would be better to edit the theme's Liquid code.
However, I’ve tried creating a custom CSS code that might help:
@media screen and (min-width: 750px) {
.product-info__block-item[data-block-id="quantity_selector"] {
float: left;
width: 30%;
}
.product-info__block-item[data-block-id="buy_buttons"] {
float: left;
width: 70%;
margin-block-start: 3rem;
}
.product-info__block-item[data-block-id="buy_buttons"] + * {
clear: both;
}
}
Savior! Thank you so much, it worked perfectly. I have another question about adding the '-' and '+' to the cart drawer. If you have a solution, I’d greatly appreciate it. Have a great day!
You're welcome—glad it worked perfectly for you!
Currently, I don't have a way to add the '-' and '+' to the cart drawer. I believe this issue would require more complex theme custom coding to handle properly.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025