How to set a particular page template to full width

Store Design

Topic summary

A user needed to make specific Shopify pages using a custom template display at full width to accommodate wider tables without horizontal scrolling.

Initial Solutions Attempted:

  • Adding CSS targeting a specific page ID via theme.liquid - worked for single pages only
  • Attempting to target template.name - failed to recognize the template

Key Issue Identified:
Shopify uses template.suffix rather than template.name to identify custom page templates.

Working Solutions:

  1. Add custom CSS directly to the page section’s “Custom CSS” field:
.rte {
  max-width: none;
}
  1. Alternatively, use a “Custom HTML” or “Custom Liquid” section with inline styles

Resolution:
The first CSS method successfully applied full-width styling. When saved as an alternate template, this setting persists and can be assigned to other pages requiring full-width content. The user adjusted the width percentage to their preference.

Note: The .page-content class initially suggested was rejected by Shopify’s Customizer as invalid, requiring the .rte class workaround.

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

trying to make a particular page template in shopify be full width so the tables are wider and dont need to be scrolled.

i dont want this for the entire website just the pages using page-wide-profile template.

heres an example of the page i need to widen.

https://partsoutlet.com.au/pages/batwing-fairing-guide

cheers

1 Like
2

Please add this code to theme.liquid file, after 

{% if page.id == 169675423934 %}

{% endif %}
3

thanks that works for the page, but can i apply it to a page template? so whenever i create a new page with that template it goes to full width?

4

thanks for that solution it worked on the single page, can i apply it to a particular page template somehow, so all pages created with that tempate have the full width?

1 Like
5

You can try to update code to this and check again

{%- if template.name == 'blog' or template.name == 'article' -%}

{%- endif -%}
6

ive tried it with the template name, but no go -

{%- if template.name == ‘wide-profile-template’ -%}

.site-page .page-content { max-width: 100%; }

{%- endif -%}

7

Try this

{%- if template.name contains 'blog' or template.name contains 'article' -%}

{%- endif -%}
8

no luck

i dont think it recognises the template.name as a trigger

9

Hi @partsluke

Please update the code to this and check again.
10

First of all, template.name would be “blog” or “page”, you should be checking template.suffix.

https://shopify.dev/api/liquid/objects/template

Second, this can easily be done without editing theme code – simply add this code to the “Custom CSS” of the main page section:

.page-content {
  max-width: none;
}

If you then save template as an alternate template, this setting will persist and you should be able to assign it to other pages where you need full-bleed content.

11

thanks tim, thats what i thoiught youd be able to do, just add custom css to that template.

however, its not working either, says its invalid CSS.

Invalid custom CSS: Certain At-rules are not supported. Try using global css

12

Sure, not all CSS is supported in “Custom CSS”.

The rule I’ve suggested certainly is.

What are you trying to use?

13

Screenshot 2025-05-09 at 1.39.15 PM.png
Screenshot 2025-05-09 at 1.39.15 PM.png2098×846 124 KB

just tryig to use it the way you wrote it but wont accept. maybe its this template

14

Wow! Must be a glitch in Customizer – looks like it does not like this quite legitimate class name.

Sorry, was not aware, and I am not always able to test my code in Customizer.

Try this instead:

.rte {
  max-width: none;
}

Alternatively, you can add a “Custom HTML” or “Custom liquid” section and paste something like:

This should also work fine and persist if part of the template.

1 Like
15

thanks tim , that first method worked and i just adjusted the % width to suit.

cheers mate!