Gap in product page

Store Design
,

Topic summary

A user seeks help adding spacing between product variants and quantity selector on their product page. A solution is provided involving custom CSS code:

Proposed Solution:

  • Navigate to: Shopify Admin → Online Store → Theme → Edit code
  • Locate the theme.liquid file
  • Insert CSS within <style> tags inside the <head> section
  • The CSS targets .product-single-info and .options-swatch elements with specific margin adjustments

Current Status:
The original poster attempted the solution but reports no visible changes occurred. They’re seeking clarification on the exact placement of the code within the <head> tag. The issue remains unresolved and awaiting further guidance.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

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-copy

Screenshot 2024-06-10 at 9.57.54 PM.png
Screenshot 2024-06-10 at 9.57.54 PM.png638×1188 70.6 KB

Thanks!

2

Hello @manter ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Inside tag head. You need create style tags. After you’ll insert my code inside it

@media (max-width: 768px){
.tt-product-single-info .tt-options-swatch {
    margin-top: -3px;
    margin-bottom: 10px;
}
}

thirtycoders_0-1718047941356.png
thirtycoders_0-1718047941356.png552×639 25.9 KB

Thanks!

3

Thank you! Where exactly I have to place it? I tried placing in the but no change happened.