Remove Side Padding on Product Page

Store Design

Topic summary

Goal: reduce side padding on the product page only in a Shopify store to give the product description more width; a screenshot was shared to illustrate the cramped layout.

Key requests and actions:

  • Multiple participants asked for the store URL to diagnose theme-specific CSS.
  • Suggested approach 1: add custom CSS in the theme’s stylesheet (theme.scss.liquid or styles.scss.liquid) to remove left/right padding on the product template.
  • Suggested approach 2: add Custom CSS via Online Store > Themes > Customize > Theme settings to increase the page container width on product pages using:
    product-info .page-width:has(.product) { max-width: 1600px; }

Notes:

  • Both suggestions focus on CSS-only changes; no Liquid template edits were provided.
  • The screenshot is relevant to understanding the spacing issue.

Status: no confirmation from the original poster yet; awaiting the store URL and feedback on whether the CSS changes resolve the issue. The discussion remains open.

Summarized with AI on December 16. AI used: gpt-5.
1

How can I reduce the padding on the sides on the product page only? I want more space for the product descriptions to expand on the right. Everything feels too squished in the center.

Screen Shot 2024-10-20 at 3.25.34 PM.png
Screen Shot 2024-10-20 at 3.25.34 PM.png1526Ă—606 213 KB

1 Like
2

can you provide your website URL

3

Hi @jadedheart32

Please, share your store URL. Thanks!

4

To remove side padding on the product page in Shopify, you can add some custom CSS. Here’s a simple way to do it:

  1. Go to your Shopify admin.
  2. Click on “Online Store,” then “Themes.”
  3. Find your current theme and click on “Actions,” then “Edit Code.”
  4. In the “Assets” folder, look for a file named theme.scss.liquid or styles.scss.liquid.
  5. Open that file and scroll to the bottom.
  6. Try something like this CSS code:
    css .product-template { padding-left: 0; padding-right: 0; }
  7. Save your changes.
5

Hi @jadedheart32

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.

product-info .page-width:has(.product) { max-width: 1600px; }