Gaps in product page

Solved

Gaps in product page

manter
Tourist
12 0 4

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

Screenshot 2024-06-10 at 9.57.54 PM.png

 

Thank you!

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
6884 1640 2025

This is an accepted solution.

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. 

Made4uoRibe_0-1718906806134.png

You can also search by line numbers. 

And add the size you like example below. 

Made4uoRibe_1-1718906862246.png

Then Save. 

Result:

Made4uoRibe_2-1718906886790.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 2 (2)

Made4uo-Ribe
Shopify Partner
6884 1640 2025

This is an accepted solution.

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. 

Made4uoRibe_0-1718906806134.png

You can also search by line numbers. 

And add the size you like example below. 

Made4uoRibe_1-1718906862246.png

Then Save. 

Result:

Made4uoRibe_2-1718906886790.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

BSS-TekLabs
Shopify Partner
556 159 188

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

2. Search and open theme.css, base.css, custom.css, or styles.css

3. 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

BSSTekLabs_0-1718907013194.png

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!

 
 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency