Appearance
Product grid - collection ​
This guide describes the Product grid - collection section.
For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks.
Configure the Product grid section ​
To configure your Product grid section:
Go to Customize theme.
In Theme editor, at the top of the page, use the dropdown to select Collections > Default collection.
Note
The section is available only on the Collections > Default collection page template.
From the side menu, select Product grid.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Number of products | Adjust the Number of products slider between 8 and 24 products. |
| Display on card | Set the Display on card checkbox to on or off. |
| Enable quick buy | Set the Enable quick buy checkbox to on or off. |
| Products per row on mobile | Use the Products per row on mobile options to select 1 or 2 products. |
| Products per row on desktop | Adjust the Products per row on desktop slider between 2 and 5 products. |
| Filtering and Sorting > Enable filtering | Set the Enable filtering checkbox to on or off. |
| Filtering and Sorting > Enable sorting | Set the Enable sorting checkbox to on or off. |
| Filtering and Sorting > Expand filters by default | Set the Expand filters by default checkbox to on or off. |
| Filtering and Sorting > Show filter counts | Set the Show filter counts checkbox to on or off. |
| Filtering and Sorting > Enable color swatch filters | Set the Enable color swatch filters checkbox to on or off. |
| Color > Color scheme | Use the Color scheme selector to select a color scheme. |
| Color > Theme settings (link) | Follow the Theme settings link to open Theme editor's Color theme settings. Use the settings to edit the theme colors for your entire store. |
| Color > Use gradient for background | Set the Use gradient for background checkbox to on or off. |
| Theme settings | If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu. |
| Custom CSS | Select Custom CSS. In the box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS. |
Configure a block within a Product grid section ​
To configure a block for your Product grid section:
Go to Customize theme.
In Theme editor, at the top of the page, use the dropdown to select Collections > Default collection.
From the side menu, expand the Product grid section menu.
To configure an existing block, select the block from the side menu.
To add a new block, select Add
block-name, and then select the block you added.Note
Inside the section, you can add, remove, show, hide, and move blocks. Refer to Configure blocks inside a section, and Shopify help: Sections and blocks.
Apply a block setting described in the following table.
| Block name | Block description | Block setting(s) |
|---|---|---|
| Collection banner | Displays a banner, with (optional) navigation links, collection title, description, and image tile inside the section. Use this block instead of the collection banner section if you prefer using a continuous pattern for the whole template. |
|
| Background pattern | Displays a stylistic pattern as a background inside the section. | Refer to Background pattern. |
| Background shape | Displays a stylistic shape as a background inside the section. | Refer to Background shape. |
| Sticker | Overlays the section with a stylized sticker. | Refer to Stickers. |