How do I make my product pages full width (OOTSB Turbo)

Store Design
,

Topic summary

A user seeks to make product pages full width on their Shopify store (using Out of the Sandbox Turbo theme) without affecting the entire site layout.

Initial Problem:

  • Found CSS code that makes the entire site full width but needs it to apply only to product pages
  • The CSS targets .section with max-width: 100% and centered margins

Solution Provided:
A helper suggests a two-step approach:

  1. Remove the original CSS snippet from its current location
  2. Add conditional CSS code to layout/theme.liquid before the </head> tag

Key Technical Detail:
The solution uses Liquid templating logic ({% if template.name == 'product' %}) to apply the full-width CSS only when on product pages.

Outcome:

  • Initial code suggestion was incomplete (missing <style> tags)
  • After correction with proper markup tags, the solution successfully resolved the issue
  • User confirmed it worked
Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I would like to make the layout of my product pages full width.

I have found that editing the code below makes the whole site full width but can’t figure out how to only make the product pages full width. Please help

site is www.nordichealth.co.nz

.section {
max-width: 100%;
width: 100%;
margin-left: auto;
margin-right: auto;
}
2

Hi @SM212

Please try this:

Step 1. Remove the code snippet you described from its original file.

Step 2. Please add this snippet before in the layout/theme.liquid.

{% if template.name == 'product' %}
  .section {
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
{% endif %}

Please let me know if you have any concern.

Regards,

Vinh

3

Thanks for your reply Vinh0225, But unfortunately it hasn’t changed the width of any of the product pages

4

Sorry, I missed tag. Please replace with this:

{% if template.name == 'product' %}

{% endif %}
1 Like
5

Thanks so much :smiley: