removing padding under product page in shopify

Shopify Discussion

Topic summary

Issue: Excess padding/empty space appears beneath the product content on the mobile product page.

Proposed solutions:

  • CSS override in theme assets (recommended). Steps: Online Store > Themes > Edit code > Assets > open main.css/base.css/style.css/theme.css, then append CSS to remove spacing for the specific product template:
    • #shopify-section-template–23128100471065__main .page-content.page-content–product { padding-bottom: 0; }
    • div#shopify-section-template–23128100471065__rich_text_QDQzMQ { margin-top: 0; }
    This targets template-specific section IDs to eliminate bottom padding and top margin. A screenshot shows the reduced gap as expected.
  • Alternative suggestion: Edit theme.liquid and insert code before . However, the actual code snippet was not included in the post, so the exact change is unclear.

Context/notes:

  • The CSS approach is tailored to specific section IDs; IDs may differ across themes/pages, so selectors may need adjustment.
  • Images in the thread illustrate the issue and the post-fix result on mobile.

Status: No confirmation from the original poster; outcome not verified. Discussion remains open.

Summarized with AI on December 24. AI used: gpt-5.
3

Hi @Byron_7 ,

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

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1721435420535.png
BSSCommerceHDL_0-1721435420535.png466×702 39.2 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like