Media Grid

The Media Grid section offers a visually appealing way to display images along with customizable text elements like headings, descriptions, and buttons. This documentation guides you through adding and configuring the Media Grid section.

How to Add the Media Grid Section

Instructions
  1. In your Shopify admin, go to the Online Store > Themes.
  2. Find Essence and then click Customize.
  3. In the theme editor, click Add section.
  4. From the list of sections, choose Media Grid. This will add the Media Grid section to your page.

Adding and Configuring Cards in the Media Grid

Each image in the Media Grid is part of a "Card". To add and set up these cards, follow these steps:

Instructions
  1. In the Media Grid section, click on Add Card.
  2. For each card, you can configure settings such as:
    • Image: Upload or select an image for the card.
    • Heading: Add a heading text. This will be overlaid on the image.
    • Text: Add additional text or description. This also will be overlaid on the image.
    • Button Text: If you want a call-to-action, add text for the button.
    • Button Link: Set the URL to which the button should redirect.
    • Overlay opacity: This controls how much to darken the image, in order to make the text easier to read.

Customizing the Media Grid Layout

The Media Grid section offers customization options for layout and appearance.

Content Position

You can control the alignment of the text within each card:

  • In the settings for each card, locate the Content Position option.
  • Choose the alignment (e.g., top left, middle center, bottom right) that best suits your design.

Global Settings

To adjust the overall layout and appearance of the Media Grid, go back to the main settings of the Media Grid section in the theme editor and adjust use the global settings:

  • Go back to the main settings of the Media Grid section in the theme editor.
  • Here, you can find options like Layout and Element Height.
  • Adjust these settings to achieve your desired grid arrangement and the appearance of the elements.
  • Layout: This setting changes how cards are organized within the grid. There are 4 layout options to choose from, which will differ based on the number of cards in the grid. There is also the "stack" option which will display the cards underneath each other.
  • Element Height: Adjust this to control the height of the grid.
Table of Contents