Appearance

Setup a grid layout for collection pages ​

This guide describes how use Cascade's Grid layout features for collection pages.

By default, Cascade's collection pages use a Cascading layout. Cascade also provides a page template for displaying products in a "standard" grid layout. Cascade's grid layout can be applied to Collection pages.

Set a collection page to use a grid layout ​

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

  1. On your store's Shopify admin > Products page, locate the Collections list, and then select the required collection.

  2. Use the Theme template dropdown to select the collection.grid template.

    The Collection template in shopify Admin.

    Enable the grid template for an unpublished Cascade theme

    If Cascade theme is unpublished, you cannot select the collection.grid template. To enable the template, complete one of the following:

    • Set Cascade as the published theme, and then select the collection.grid template on the required collection page in Admin > Products.

    • If you're not ready to publish Cascade, in the Code editor, add a new template named collection.grid.liquid. Then, on the required collection page, select the template file you added previously.

    Refer to the following image.

    The collection.grid.liquid file in 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, set the number of collection items per row to display.

    The Collection pages section setting 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 the Code editor, open the files named collection.json and collection.grid.json.

  2. In collection.json

    Replace the line:

    "type": "main-collection",

    with the following:

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

  3. In collection.grid.json

    Replace the line:

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

    with the following:

    "type": "main-collection",

  4. Rename the file collection.grid.json to collection.list.json.

  5. Save your changes.