Goal: Move the product quantity selector to the same horizontal line as the Add to Cart button, aligned to the left, to reduce unused white space—particularly on mobile—while keeping the Add to Cart button’s height unchanged.
Context:
Theme: Stiletto Theme.
Focus: CSS/customizations.
Visuals: Two images illustrate current spacing and the desired side‑by‑side layout with a square-style quantity selector.
Constraints: Do not alter the Add to Cart button height; the quantity selector should occupy some left-side width. “Buy Now” options are not used and can be ignored.
Technical intent:
Adjust layout so quantity selector and Add to Cart sit inline (same row), likely via CSS/HTML changes to the product form section.
Emphasis on mobile responsiveness and reducing white space.
Status:
Request for implementation guidance; no code or solutions provided yet.
Discussion is open and unresolved with key question: what CSS/structural edits are needed to achieve the inline layout in Stiletto?
Summarized with AI on December 10.
AI used: gpt-5.
I’m using the Stiletto Theme and want to move the quantity selector to be on the same level as the Add to Cart button, on the left side to reduce unneeded white space, especially for mobile.
That is a great move for Mobile UX. Consolidating the quantity selector and the ATC (Add to Cart) button into a single row significantly improves the “thumb zone” accessibility and keeps the fold higher.
Since you are not using the dynamic checkout buttons (Buy Now), this is relatively straightforward with some CSS Flexbox.
The logic is to target the container holding both elements and apply a flex property. It would look something like this (pseudo-code, as I don’t have your specific class names)
/* 1. Target the container wrapping both inputs */
.product-form__input-wrapper {
display: flex;
flex-wrap: nowrap;
gap: 10px; /* Space between the two */
align-items: stretch; /* Ensures both are the same height */
}
/* 2. Make the Add to Cart button fill the remaining space */
.product-form__submit {
flex-grow: 1;
width: auto; /* Overrides full width defaults */
}
/* 3. Keep quantity selector at a fixed or natural width */
.quantity__input {
width: auto; /* Or a fixed width like 100px */
}
Note: The class names (.product-form...) depend entirely on the Stiletto theme version you are running.
If you can share your store URL (and the password if it’s locked), I can inspect the code and give you the exact CSS snippet to copy-paste into your theme editor.
I have analyzed the specific HTML structure you pasted.
The issue is that in your version of Stiletto, the Visual Quantity Selector (.product__controls-group-quantity) and the Add to Cart Form (.product-form) are two separate “block” elements sitting on top of each other.
To fix this, we need to force them to behave as inline elements so they can sit on the same row.
Pro Tip: Before applying any code changes, it is always a best practice to Duplicate your Theme (Online Store > Themes > Actions > Duplicate). This gives you a safe backup just in case.
Here is the CSS code tailored to your specific HTML structure:
Go to Online Store > Themes > Customize.
Click on Theme Settings (gear icon) > Custom CSS.
Paste the following code:
/* Align Quantity Block and Add to Cart Form in one row */
@media screen and (min-width: 0px) {
/* 1. Target the Visual Quantity Selector Wrapper */
.product__controls-group-quantity {
display: inline-block !important;
width: 30% !important; /* Takes 30% of the row */
margin-bottom: 0 !important;
margin-right: 2% !important; /* Small gap */
vertical-align: bottom; /* Aligns with the bottom of the button */
}
/* 2. Target the Form containing the Button */
.product-form {
display: inline-block !important;
width: 68% !important; /* Takes the rest of the row */
vertical-align: bottom;
margin-top: 0 !important;
}
/* 3. Force the Button to fill its new container */
.product-form__cart-submit {
width: 100% !important;
min-width: unset !important; /* Prevents button from forcing width */
}
/* 4. Optional: Hide the duplicate label if it appears */
.product__controls-group-quantity .product__label-wrapper {
display: none;
}
}
Why this works: This code overrides the default “block” behavior (which takes up 100% width) and sets specific widths (30% for quantity, 68% for the button), allowing them to fit perfectly side-by-side on mobile and desktop.
Thanks for the screenshot! That clarifies everything perfectly.
The code worked to resize the elements (you can see the button is shorter now), but the Stiletto Theme uses a “Flex Column” layout on the parent container. This forces all elements to stack vertically on top of each other, forcing a new line even if they are small enough to fit side-by-side.
Since we want to avoid editing the Liquid structure, we need to override the parent container’s behavior.
Please replace the previous code with this updated “Smart” version:
/* Smart Layout: Force Quantity and ATC to sit side-by-side */
@media screen and (min-width: 0px) {
/* 1. Target the Parent Container dynamically using :has() */
/* This finds the specific div wrapping the quantity selector and allows horizontal flow */
div:has(> .product__controls-group-quantity) {
display: flex !important;
flex-direction: row !important; /* Switches from Column to Row */
flex-wrap: wrap !important; /* Allows larger items (Title, Price) to stack */
align-items: flex-end !important; /* Aligns the bottom of the input and button */
justify-content: flex-start !important;
}
/* 2. Force all standard blocks (Title, Price, Free Gift text) to stay full width */
div:has(> .product__controls-group-quantity) > * {
width: 100% !important;
}
/* 3. Resize ONLY the Quantity Selector to sit on the left */
.product__controls-group-quantity {
width: 28% !important;
margin-right: 2% !important; /* Creates the gap */
margin-bottom: 0 !important;
}
/* 4. Resize ONLY the Add to Cart Form to sit on the right */
.product-form {
width: 70% !important;
margin-top: 0 !important;
}
/* 5. Ensure the button fills the new available space */
.product-form__cart-submit {
width: 100% !important;
min-width: unset !important;
}
}
Why this fixes it: Instead of just asking the buttons to be smaller (which leaves them stacked), this code tells the Container to switch from “Vertical Mode” to “Row Mode”.
Rule #2 ensures the Title, Price, and Free Gift banner stay 100% width (stacked).
Rules #3 and #4 tell the Quantity and Button to share the last line (28% + 70%).
Let me know if this finally snaps them into place!
If the layout reverted to the original, it means your theme or browser isn’t recognizing the dynamic :has() selector, so it ignored the instructions completely. Stiletto can be quite stubborn with its CSS structure!
We have one last “Universal” CSS method to try. This forces the elements to Float (ignoring the flex-column rule) using the standard Stiletto container class.
Please clear the previous code and try this:
/* Force Side-by-Side Layout using Floats */
@media screen and (min-width: 0px) {
/* 1. Target the main container to break the vertical stack */
.product__info-container,
.product__block-list {
display: block !important; /* Disables Flexbox locking */
}
/* 2. Float the Quantity Selector to the Left */
.product__controls-group-quantity {
float: left !important;
width: 28% !important;
margin-right: 2% !important;
margin-bottom: 0 !important;
clear: none !important;
}
/* 3. Float the Add to Cart Form to the Right */
.product-form {
float: left !important;
width: 70% !important;
margin-top: 0 !important;
clear: none !important;
}
/* 4. Reset the layout after the buttons so description doesn't break */
.product-form:after,
.product__description {
content: "";
display: table;
clear: both;
}
}
The “Cleanest” Solution: If this CSS still fights with your theme settings, the most professional fix is to edit the Liquid code directly (wrapping both elements in a single <div>). This guarantees they stay together forever without relying on “CSS hacks.”
If the code above doesn’t work, feel free to send me a Collaborator Request (it’s free/safe). I can jump into the code and apply the Liquid fix in about 5 minutes for you.
Pro Tip: Before applying any code changes, it is always a best practice to Duplicate your Theme (Online Store > Themes > Actions > Duplicate). This gives you a safe backup just in case.
The “Cleanest” Solution: If this CSS still fights with your theme settings, the most professional fix is to edit the Liquid code directly (wrapping both elements in a single