How to add white space between two custom liquid sections on product page?

Store Design

Topic summary

A user wants to add white space between two custom liquid sections (payment icons and letter specifying) on their product page.

Proposed Solutions:

  • Add CSS using margin or padding properties to create spacing between sections
  • Target sections with specific class selectors (e.g., .payment-icons-section)
  • Example: Apply margin-bottom: 20px; to the first section to add space below it
  • Adjust pixel values based on desired spacing

Current Status:

  • Multiple users requested the store URL and password to provide exact solutions
  • Store URL shared: www.johnposh.com with password 1891
  • Discussion remains open, awaiting specific implementation guidance after store review

Note: Some responses appear to have formatting/encoding issues, making portions of the technical advice difficult to parse.

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

Hello, I would like to ad white space between the two custom liquid sections on my product page (payment icons and letter specifying)

Screenshot 2023-05-17 145916.jpg
Screenshot 2023-05-17 145916.jpg661×385 20.4 KB

2 Likes
2

Add CSS to create the desired white space between the sections. You can use margin, padding, or a combination of both to achieve the desired spacing.

For example, if you have two sections with the classes .payment-icons-section and .letter-specifying-section, you can add the following CSS code to create space between them:

.payment-icons-section {
  margin-bottom: 20px;
}

The margin-bottom property adds space below the .payment-icons-section. Adjust the value (20px in this example) to your preferred spacing.

3

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

4

www.johnposh.com

Shopify*1981

5

Hi @Ulula ,

Would you mind to share your Store URL (with password)?

In that problem you can add some padding or margin below or under the container.

.selector {

padding or margin: 10px;

}

If you know a little bit coding.

Thanks!