What's your biggest current challenge? Have your say in Community Polls along the right column.

How to adjust width of Theme template Default page in Online store?

How to adjust width of Theme template Default page in Online store?

shimmertheweb
Tourist
3 0 1

I'm creating new pages within my store, but they are quite narrow, and content doesn't display well within the default margins. I would like to change the page width for all the pages within my store.

 

I have not created a custom template. I'm using the 'Default page' in the Theme template dropdown.

 

Would this a .css change needed to adjust the page width?

 

Helpful ideas are appreciated!

 

Thank you,

Replies 7 (7)

kazi
Shopify Partner
656 93 119

@shimmertheweb  You can adjust it from theme settings see the screenshot from Dawn theme. Go to customization > click the theme settings icon from top left then you will find it under "layout"

 

layout.jpg

 

▶️ If you need more help with your Shopify store
Speed Optimization | Theme Customization ? ☎️ WhatsApp ✉️Email Skype: kof.bd

shimmertheweb
Tourist
3 0 1

Thank you for Kazi and PageFly-Victor responding with this suggestion.
I've used this method and I'm able to change width of the Home page as well as the Contact and Catalog pages that are pre-built.
However, the changes do not affect a new page that I manually create using the 'Default page' within the 'Theme template' dropdown.
Only the header width is affected while the page content remains fixed.
Is there a way to manage the 'Default page' configuration values?
Thanks again!

PageFly-Victor
Shopify Partner
7865 1786 3120

Hi @shimmertheweb ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store -> Theme -> Customize

Step 2. Click on Theme Setting -> Layout -> Change Page width -> Save

PageFlyVictor_0-1681067589688.png

If you want to change it with css code, you can provide the site url and I can help you in more detail

Hope my answer will help you.

Best regards,

Victor | PageFly

DavidWarner
Visitor
1 0 0

The process for adjusting the width of a theme template default page in an online store will depend on the specific platform or website builder you are using. However, here are some general steps you can follow:

  1. Log in to your website builder or online store platform.

  2. Go to the "Theme" or "Design" section of your website builder.

  3. Look for an option to "Edit Code" or "Customize HTML/CSS".

  4. In the code editor, locate the section of the code that controls the width of the default page template.

  5. You may need to search for a specific CSS class or ID that corresponds to the default page template. This can vary depending on the specific theme or template you are using.

  6. Once you have located the appropriate section of code, adjust the width value as desired. This may involve changing a percentage value or a pixel value, depending on how the code is written.

  7. Save your changes and preview the page to see the new width. If the width is not what you want, go back to the code editor and make further adjustments.

Note that making changes to the code of your website can be risky and may cause unintended consequences if you are not familiar with coding. Always make a backup of your website or theme files before making any changes, and consider seeking the help of a professional web developer if you are unsure of what you are doing.

shimmertheweb
Tourist
3 0 1

Thanks for the response DavidWarner.
I've been looking for the file(s) that might manage the Default page for Dawn theme within the code editor.

Under Apps I see base.css as well as template-collection.css but nothing directly relating to 'default page' for this theme.
I've found multiple suggestions online but I don't see the same files as recommended.
Thanks again for your help on this!

Rasleen_Sahni
Tourist
10 0 4

Hi. Were you able to figure this out? I'm looking for the same help.

kazi
Shopify Partner
656 93 119

@Rasleen_Sahni  can you share the store URL if protected share pass

▶️ If you need more help with your Shopify store
Speed Optimization | Theme Customization ? ☎️ WhatsApp ✉️Email Skype: kof.bd