Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Grid

The Grid section displays a flexible collage of feature images and autoplay videos. Mix and match between different size blocks and reorder them to create a promotional feature or lookbook layout.

Grid section
Grid section

Set up section

Add this section to any template (except Checkout) and re-order its position. You can use this section multiple times on the same page with different content and settings.

Note: New sections will appear on all pages that use the same template. To add sections to specific pages only, learn how to create and assign multiple templates.

Steps

In your theme editor (Customize):

  1. Select a Template to edit from the dropdown menu in the top bar.

  2. In the side panel, click (+) Add section and select Grid.

  3. Change the order of your sections by using the drag and drop handles ⋮⋮

Add grid blocks

Add Grid blocks with adjustable widths. Create different layouts by reordering the blocks with the drag-and-drop handles ⋮⋮ and customize the width and height of each block.

Steps

In your theme editor (Customize):

  1. Click on a Grid item block to open the settings.

    Click + Add item to create new grid blocks.

    Click Remove block or the eye icon to delete or hide a block.

  2. Under Background image, click Select Image to select or upload an image.

    There are no required image dimensions. We recommend a minimum width of 2048px for optimal quality across all devices.

    (Optional.) Select or upload alternate Mobile image that looks best on smaller screen sizes.

  3. Change the Media fit to either have your image Cover the entire block or Contain the image in the block with its original shape.

  4. Select the Image focal point to control what part of the image to center within the block.

    Use the focal point to make sure the key part of your image won't be cropped when it overflows the size of the block.

  5. Use the drag and drop handles ⋮⋮ to change the layout of the mosaic blocks.

    Shopify content blocks nested in a section
    Shopify content blocks nested in a section

    Click the Remove block button in the block settings to remove a block.

  6. Click Save.

Add block headings

Each grid block can have up to three types of headings. Adjust the position, width, and color of your headings to match your image.

Steps

  1. Click on the Grid item block to open the settings.

  2. (Optional.) Enter text for an Accent heading in all capitals above the main heading.

    We recommend a short one or two word label.

  3. Add Heading text for a title.

    We recommended a short title of just a few words.

    Change the Heading size to Small, Medium, or Large.

  4. Add Subheading text for a short paragraph.

    We recommend two to three short sentences.

    Change the Subheading size to Small, Medium, or Large.

  5. (Optional.) Add additonal Text to display beneath the Subheading.

  6. Select a Text position (above) to position your headings (and button) in one of 9 areas of the grid block.

    Change the Text size to Small, Medium, or Large.

  7. Click Save.

  8. Select a Text color to match your headings to your brand and make sure the text is readable.

    We recommend using WebAIM's contrast checker when matching colors to make sure your text is clear and readable for everyone.

  9. Click Save.

Add block button

You can link to your collections or products or any other page. Add a Button Label and Link to display a button. Leave the Button label blank to make the entire block a clickable link.

Steps

  1. Click on the Grid item block to open the settings.

  2. Select or paste a Link.

    Make sure you copy the full URL, including https:// at the start. For example: https://instagram.com/abc123.

  3. Enter text for a Button label.

    Leave the Button text blank to make the entire block a clickable link.

    The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

  4. Select a Button style: either Solid, Outline, or Text.

  5. Click Save.

Block styles

Customize the grid block colors and add either a Overlay color or Overlay gradient over your grid image.

  1. Click on the Grid item block to open the settings.

  2. Under Color, use the color selectors to customize the Background, Text, Buttons, and Sold button text.

    We recommend using WebAIM's contrast checker when matching colors to make sure your text is clear and readable for everyone.

  3. Change the Overlay color and Overlay opacity using the slider to increase the contrast between the text and slide image.

    These settings help make your text clear and readable.

    Set the Opacity to 100% to create a solid color slide. This helps avoid images that include text in the image itself, which are not responsive or recommended.

  4. (Optional) Click the Overlay gradient option to add a color overlay that fades across a range of hues.

    You can choose the style, angle, position, and opacity of the gradient. See Shopify's color gradient guide to learn more.

  5. Click Save.

Section headings

Add a heading and subheading at the top of the section and choose their alignment.

Steps

  1. Click on the Grid section to open the section settings.

  2. Enter Heading text to display a section title.

  3. Enter Subheading text to display below the heading.

    Use the formatting buttons to add bold, italic, or linked text.

  4. Set the Alignment of the headings to Left, Right, or Center.

  5. Click save.

Section styles

Customize the look of your section by changing the style and layout.

  1. Click on the Grid section to open the settings.

  2. Choose whether to Enable animation to show visual effects when scrolling, hovering, or interacting with the section.

    Learn more about Section animations in Stiletto.

  3. Choose whether to set the Content width of the section to Full width.

  4. Use the slider to control the Grid spacing between the blocks.

  5. Choose to display a Top divider that separates sections with a Solid line.

    The Top divider uses the Lines and borders color selected in the Theme Settings.

  6. Select a Padding option to add space around the section to either the Top and bottom, Top only, Bottom only, or set it to None.

  7. Click Save.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.