Hello!> > Please I want to reduce the padding(border) of my product page> >
> > thank you
Topic summary
Goal: reduce excessive padding/margins on a Shopify product page. The issue is visual spacing inside the page container (“padding” in CSS).
Proposed solutions:
- Global container padding: Edit theme assets (base.css) and add a rule targeting the page container class (page-width) to reduce horizontal padding (e.g., 0 to 0.5rem). Steps and a before/after screenshot were provided.
- Section-specific padding: Edit your main CSS file (main.css/base.css/style.css/theme.css) and add a rule targeting the product page’s section class (section-template–[ID]__main-padding .page-width) to set padding to 0, affecting only that section. Steps and a result screenshot were provided. Note: the exact section ID varies by theme.
- Optional/related: One reply suggested removing breadcrumbs by adding code in theme.liquid above , but the code snippet was not included and appears incomplete.
Status and outcomes:
- Visual results for reduced padding were shown for both CSS approaches.
- No confirmation from the original poster; no solution marked yet.
Key context:
- CSS is the styling language controlling spacing; “padding” is the internal space of an element; “page-width” is a common Shopify container class governing page margins/padding.
1 Like
- Here is the solution for you @Sofiane2
- Please follow these steps:
- Then find the base.css file.
- Then add the following code at the end of the file and press ‘Save’ to save it.
.page-width {
padding: 0 0.5rem !important;
}
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
This is Richard from PageFly - Shopify Page Builder App
If you want remove breadcrumb you can try code:
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag
Hope my solution will help you resolve the issue.
Best regards,
Richard | PageFly
Hi @Sofiane2
Check this one.
- From you Admin page, go to Online Store > Themes
- Select the theme you want to edit
- Under the Asset folder, open the main.css(base.css, style.css or theme.css)
- Then place the code below at the very bottom of the file.
.section-template--17115988459753__main-padding .page-width {
padding: 0;
}
- And Save.
- Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!