make section full width

Store Design
, ,

Topic summary

A user seeks help making a website section full-width instead of boxed, as this option isn’t available in their theme settings.

Three solutions provided:

  1. BSS-TekLabs: Add custom CSS code to the theme.liquid file before the </head> tag

  2. websensepro: Similar approach—insert CSS into theme.liquid to override the section width constraints

  3. Made4uo-Ribe: Navigate to the theme’s main CSS file (main.css, base.css, style.css, or theme.css) and add CSS targeting the specific section ID with negative margins (margin-left: -30px !important; margin-right: -30px !important;)

All solutions involve editing theme code files through the Shopify admin panel (Online Store → Themes → Edit code). Each responder included screenshots demonstrating the expected full-width result and requested the user mark their answer as the accepted solution if helpful.

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

Hi can anyone help me change the section to full width and not boxed? don’t have it in settings
https://zpaik4sx3nvsr2ag-66575565096.shopifypreview.com

Daniel19901_0-1726491845442.png
Daniel19901_0-1726491845442.png1919×676 359 KB

4 Likes
2
  • Here is the solution for you @Daniel19901
  • Please follow these steps:
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before and press ‘Save’ to save it
  • Here is the result you will achieve:

BSSTekLabs_0-1726492535197.png
BSSTekLabs_0-1726492535197.png1892×882 406 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
3

Hi @Daniel19901 ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

websensepro_0-1726493076500.png
websensepro_0-1726493076500.png1365×585 888 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

4

Hi @Daniel19901

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.

div#shopify-section-template--22442120413510__1726134055bffafc4a {
    margin-left: -30px !important; 
    margin-right: -30px !important;
}

And Save.

Result:

Made4uoRibe_0-1726494380479.png
Made4uoRibe_0-1726494380479.png1872×515 193 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!