Customizing landing page changed all of my pages

Store Design

Topic summary

A user reports that customizing their landing page caused layout issues across all pages, specifically with product prices overlapping the footer and breaking page integrity.

Problem Details:

  • Price elements are clipping through the footer
  • Changes to the landing page affected other pages unintentionally
  • Screenshots were provided showing the layout issues

Proposed Solutions:
Multiple community members offered CSS-based fixes:

  • Option 1: Add padding-bottom to the collection template section (div#shopify-section-collection-template)
  • Option 2: Apply margin-bottom to grid view items in the theme.css file
  • Option 3: Insert CSS code in theme.liquid before the closing </body> tag to add margin to the main collection content
  • Option 4: Similar approach using inline styles in theme.liquid

All solutions involve editing theme code files (theme.css or theme.liquid) through the Online Store → Theme → Edit Code path. The issue remains unresolved as the original poster has not confirmed which solution worked.

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

As you can see, the price of the item is clipping through the footer. It also broke the integrity of the other pages. How can I fix my other pages without modifying the landing page customizations? my website is https://lobonewyork.com/

Thanks for the help.

Screenshot_20230109_043103.png
Screenshot_20230109_043103.png1901×924 140 KB

Screenshot_20230109_043139.png
Screenshot_20230109_043139.png1897×334 307 KB

2

@gihan7575 ,

div#shopify-section-collection-template {
    padding-bottom: 22px;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

3

Hi @gihan7575

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/theme.css
  3. Add code below to bottom of file
.grid--view-items {
	margin-bottom: 0!important;
}
4

Hello @gihan7575

I would like to give you a solution to support you:

  1. Go to Online Store-> Theme-> Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before :
<style>
.template-collection #MainContent {
margin-bottom: 50px !important;
}
</style>

Was my reply helpful? Please Like and Accept Solution. This mean alot to me.

5

Hello @gihan7575 ,

Glad to support you today.

You can check out my suggestion below to get your concern resolved:

  1. Go to Edit code on Online Store:

GemPages_1-1673258082120.png
GemPages_1-1673258082120.png400×162 25.3 KB

  1. add my code above the tag on Theme.liquid:

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

1 Like