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:

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

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

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

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):

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.