Configure the grid layout ​

Baseline uses a grid layout to arrange your store's products and collections.

By arranging products and collections in a grid layout, Baseline makes navigating your store easy for visitors. Use Shopify's Theme editor to modify Baseline's settings to customize the grid's appearance.

The previous image shows a Featured collection table section on a store's home page. The store's grid theme settings are applied to the grid border lines displayed between the table's rows and columns.

Access Theme editor's Theme settings ​

To access Theme editor's Theme settings:

1. In your store's Shopify admin, select Sales channels > Online store > Themes.

2. In the Themes pane, locate the version of Baseline you want to modify.

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

   

4. In Theme editor, select Theme settings (the "gears" icon).

   

5. When you're finished adjusting the theme, to avoid losing unsaved changes, select Save.

   

Set the grid's border color ​

To choose a color for the grid's borders:

1. In Theme editor, select Theme settings > Colors.

2. In the Color settings menu, locate the Grid > Border color menu area

3. Use one of the following methods to specify a color for the grid's borders.

   • Choose a color with the Color picker.
   • Enter a hexadecimal or hex color value. Refer to W3 Schools: Colors HEX.
   • Select a Currently used color.
   • Choose the Connect dynamic source icon.

   

   Note

   To colorize an element by using a color from a dynamic source, if available, select the Connect dynamic source icon beside the element selector, and then choose a dynamic source to add. To use this feature, you must define sources of dynamic content for colors. Refer to Shopify help: Metafields.

4. Select Save.

Adjust the spacing around content inside the grid ​

To adjust the spacing around content inside the grid:

1. In Theme editor, select Theme settings > Grid.

2. In the grid settings menu, use the Content spacing options to specify a setting for content spacing for the grid.

   The setting provides the following content spacing options:

   • None. With this option, no spacing is applied.
   • Small. Applies a small amount of spacing.
   • Medium. Applies medium spacing.
   • Large. Sets spacing to the maximum amount.

   

Turn on or off spacing between the edges of images and the grid border ​

Complete the following steps to turn on or off spacing between the edges of images and the grid border.

1. In Theme editor, select Theme settings > Grid.

2. In grid settings menu, select the checkbox Fill images to grid border edge.

   

   The checkbox provides the following options:

   • On or "checked". Images fill the grid to the edge of the border.
   • Off or "unchecked". Spacing or "padding" is applied between the images' edges and the grid borders.

Set the width of the grid's borders ​

To set the width of the grid's borders:

1. In Theme editor, select Theme settings > Grid.

2. Use the Border width slider to set the width of the grid border in pixels or px. The slider ranges from 0 px to 5 px