Hello. How to edit the product page to have a little gap between product variants and quantity?
Link: https://holycup.lt/collections/indu-kolekcija/products/stikliniai-siaudeliai-wavy
Thank you!
Topic summary
A user seeks to add spacing between product variants and the quantity selector on their product page.
Two solutions provided:
-
Edit base.css margin - Locate the base.css file in the theme’s Asset folder and modify the margin value from 0 to a desired spacing (e.g., 10px). Screenshots show the specific code location and expected result.
-
Add custom CSS for mobile - Insert a CSS snippet into theme.css, base.css, custom.css, or styles.css that adds 20px top margin specifically for mobile view (max-width: 575px), since desktop layout doesn’t stack variants above quantity.
Both approaches involve accessing the theme code editor through Admin > Online Store > Themes > Edit Code. The issue appears unresolved as no follow-up confirmation was posted.
1 Like
Hi @manter
In your base.css file it was set 0 margin. You can edit it if not let me know.
From the admin > online store > select themes > edit code > Find the Asset folder and look for Base.css file.
Click open and find this code below.
You can also search by line numbers.
And add the size you like example below.
Then Save.
Result:
1 Like
Hi @manter ,
You can follow these steps to make a little gap between the quantity and the product variants
1, Open Online Store > Theme > Edit Code
-
Search and open theme.css, base.css, custom.css, or styles.css
-
Paste the code snippet below to the bottom of the file and hit save (this code only updates the display on mobile view since the larger view doesn’t have the variants sit on top of the quantity)
@media (max-width: 575px) {
.tt-product-single-info .tt-wrapper .tt-input-counter {
margin-top: 20px;
}
}
Here is the result
Hope this helps you solve the issue.
Please don’t forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!
1 Like