Appearance

Centered layout for pages ​

Note

This is an advanced customization guide that requires editing theme code. These actions are not supported by Switch Themes or Shopify. We recommend hiring an expert if you're not comfortable editing Liquid, HTML, CSS, and Javascript.

Before you customize a theme, make a backup. Refer to Shopify help: Duplicating themes.

Alt text

Follow these steps to modify the Cascade page template, to display content in a single column in the center of the page. Make sure to work in a duplicate of the theme so you can easily undo your changes if something goes wrong.

You can make these changes to the main page template or, to create an alternate page with this layout, refer to Shopify partners blog: How to Use Alternate Templates in Shopify Theme Development.

  1. In the file Snippets / page__template.liquid, find the two .grid__item elements and remove the classes .lg--up--two-fifths and .lg--up--three-fifths, respectively.

    Remove the .lg-up--mt0 class on the second .grid__item.

  2. Change the .lg--up--seven-eighths class on the top-most div element to .lg--up--one-half. This prevents the content from becoming too wide.

    If you prefer a wider column here, we recommend increasing the font size by referring to Adjust font sizes. This prevents the lines of text from being too long to read comfortably.

  3. Verify that your template's final code is similar to our page.liquid file on GitHub.