Skip to content

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.

An example grid layout for a store's Featured collection table section

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.

    The Customize theme option selected in Shopify admin.

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

    The Theme settings option selected in Theme editor.

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

    The save button in Theme settings

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.

    The Theme settings Grid border color picker selected in Theme editor.

    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.

    The Theme settings Grid content spacing options in Theme editor.

TIP

By default, the Bold and Modern presets are set to Small spacing. The Minimal preset has Medium spacing.

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.

    Fill images to border edge set checkbox

    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

    Grid border width slider

Example: Hide the grid border

The grid can't be removed, but the following settings make the grid less visible.

  • Set the grid Border width to 0 px.
  • Set the grid Border color to the same color as your page's or section's background color (transparent).
Example: Grid border width examples

The following grid border width and color settings provide interesting layouts. The settings are applied to a store's Featured collection table section. The section's table typically displays grid border lines between the table's rows and columns.

SettingValue
Grid border width5 px
Grid border colorSame color as your the section's background color (transparent).

Grid layout example with transparent grid border color

SettingValue
Grid border width0 px

Grid layout example with grid border set to 0