Skip to main content

Image / Gallery

Intro​

This tutorial covers the peculiarities of a specific block. Please ensure you are familiar with the basic tutorial before proceeding.

Supported metafield types​

The given block is compatible with the following metafield types:

  1. File reference;

  2. URL;

Their list versions are supported as well.

Customizing your block​

After creating a block, you can adjust its appearance to match your storefront perfectly. You can add a heading (1) to draw your customers' attention:

customizing-your-block-1.png

You can choose whether or not you want the images to be opened in a lightbox (2):

customizing-your-block-2.png

When working with multiple images or configuring a gallery, you can specify the number of columns for the items to be distributed (3):

customizing-your-block-3.png

You can change the settings for the mobile version of your website (4) if needed:

customizing-your-block-4.png

The layout, space between the items, padding, and image size can be configured too. Please note that you can also enable and disable the lazy loading (5):

customizing-your-block-5.png

Lazy loading is a technique for waiting to load certain parts of a webpage — especially images — until needed. It's great for your storefront's performance and the overall user experience. We suggest you keep this option enabled.