Appearance

Setup a grid layout for collection pages ​

This guide describes how to apply Cascade's grid template to a Collection page.

By default, Cascade's collection pages use a Cascading layout. But Cascade also provides a template that applies a "standard" grid layout to Collection pages.

Important

The following guide applies only to published Cascade themes. If your Cascade theme is unpublished, set Cascade as your published theme, and then complete the following steps.

I'm not ready to publish

If you're not ready to publish Cascade, you can still preview Cascade's grid template applied to a Collection page in Theme editor.

To preview the grid applied to a collection:

  1. In your Shopify admin's Themes pane, locate your unpublished Cascade theme.

  2. Beside the theme's name, select Customize to open Theme editor.

  3. In Theme editor, use the dropdown at the top of the page to select the Collections > Grid page.

  4. From the side menu, select the Collection - grid section.

  5. In the section menu, select the Preview link to preview the current collection. Alternatively, select Change to choose a different collection to preview.

    The Collection - grid section menu in Theme editor.

    Note

    The previous steps apply only to previewing the grid template for a collection page in Theme editor. However, you cannot share your preview. If you need to share a preview for an unpublished theme, complete the steps to Share a preview for an unpublished theme. If you encounter problems, please contact our support team.

Share a preview for an unpublished theme ​

To share a preview for an unpublished theme:

  1. In your Shopify admin's Themes pane, locate your unpublished Cascade theme.

  2. Beside the theme's name, select "..." (the ellipsis icon), and then select Edit code to open Code editor.

    The Actions dropdown in Shopify admin.

  3. In Code editor, expand the Templates directory.

  4. Inside the Templates directory, rename the following files, and then select Save:

    • rename collection.grid.json to collection.json
    • rename collection.json to collection.grid.json

    The templates directory in Theme editor.

    Note

    After you complete this step, you should have swapped the names of both files. To undo these changes, after you've shared your preview, revert the files to their original filenames.

  5. After renaming the files, in your Shopify admin's Themes pane, locate your unpublished Cascade theme.

  6. Beside the theme's name, select Customize to open Theme editor.

  7. In Theme editor, use the dropdown at the top of the page to select the Collections > Default collection page.

  8. From the side menu, select the Collection - grid section.

  9. Use the section's settings to configure the section to suit your requirements, and then select Save. For guidance with configuring the section, refer to Collection - grid.

  10. To get a preview link for sharing, at the top of the page, select "..." (the ellipsis icon), and then select Preview > Share preview > Copy link. Refer to Shopify help: Share a theme preview with others.

    Note

    In a previous step you renamed two collection template files. As a result of the renaming, when you use Theme editor's template dropdown to select:

    • Collections > Default collection, Theme editor's section menu contains the Collection - grid section.
    • Collections > Collection - grid, Theme editor's section menu contains the (main/ cascade) Collection section.

    To undo these changes, after you've shared your preview, revert the template filenames to their original filenames.

Set a collection page to use a grid layout ​

To set a collection page to use a grid layout, complete the following steps.

  1. In your Shopify admin, select Products > Collections, and then choose your required collection.

  2. Use the Theme template dropdown to select grid, and then select Save.

    The Theme template dropdown in Shopify admin.

Refer to Shopify help: Apply a new template to a collection.

Configure the grid layout ​

  1. In your Shopify admin's Themes pane, locate your published Cascade theme.

  2. Beside the theme's name, select Customize to open Theme editor.

  3. In Theme editor, use the dropdown at the top of the page to select the Collections > Grid page.

  4. From the side menu, select the Collection - grid section.

  5. In the section menu, use the settings to specify the number of collection items (tiles) to display, per row, inside the section. To configure other section settings, refer to Collection - grid.

    The Collection - grid section settings in Theme editor.

    Note

    Use the Bulk editor to apply a new template to several products or collections at the same time. Refer to Shopify help: Bulk template changes.

Set the grid template as default ​

To set the grid template as the default template for collection pages, complete the following steps.

  1. In your Shopify admin's Themes pane, locate your published Cascade theme.

  2. Beside the theme's name, select "..." (the ellipsis icon), and then select Edit code to open Code editor.

    The Actions dropdown in Shopify admin.

  3. In Code editor, expand the Templates directory.

  4. Inside the Templates directory, open the files named collection.json and collection.grid.json.

    The templates directory in Theme editor.

  5. In the collection.json file:

    Replace the line:

    "type": "main-collection",

    with the following:

    "type": "main-collection-grid",

  6. In the collection.grid.json file:

    Replace the line:

    "type": "main-collection-grid",

    with the following:

    "type": "main-collection",

  7. Rename the collection.grid.json file to collection.json.

  8. Save your changes.