Media gallery #Image - #2 - #3 - #4 - #5 - #6 - #7 - #8

To set up the Media gallery section, please follow these steps:

STEP 1: Add media

Under the Media gallery section, add Media blocks. You can add multiple Media blocks, each representing a single media in the section.

STEP 2: Set up Media blocks 

With each Media block, you can add an image or a video. Click on Media block to open its setting panel: Image:

• Upload an Image from your library or free resources.
• Enter a Link for users to be redirected to when clicking the image.

Video:

• Select a Video from your store's data or embed one from YouTube or Vimeo by entering its URL.
• Choose whether to Enable video autoplay.
• Check the “Show sound control” box to enable the sound control feature, allowing customers to toggle sound on or off as needed.

STEP 3: Set up the Media block’s look 

Still in the Media block setting group: 

• Provide a Title for the media block.
• Choose an Icon for each block. Or you can custom icons, input your SVG code in the provided field. Then, adjust the Icon size.
• Enter the content to accompany the media, such as a description or caption.
• Adjust the Content alignment within the block (Left, Center, Right).
• Add a button to the media by providing Button label and Button link to redirect customers to the desired page. 
• Choose the Colors for all elements of the block.

STEP 4: Click “Save” when done.

To modify the height and width of each media block, follow these steps:

STEP 1: Click on Collection list to open its setting panel

STEP 2: Adjust the layout settings

Click on the Media gallery section, scroll down to Desktop layout and Mobile layout setting group:

For Desktop layout:

• Adjust the Number of columns displayed on desktop devices.
• Set the spacing between blocks within the section.
• Define the height of each row of media within the section.
• (Optional) Enable "Keep block ratio on different screen width" to maintain the block's aspect ratio across screen sizes, but disables the Row height setting.

For Mobile layout, the settings are similar to desktop layout, but the Number of columns is limited to 1-2 columns.

STEP 3: Customize the individual media block settings

Click on the media block that you want to adjust the height and width, then scroll down to the Layout setting group:

• Choose the Number of columns wide to adjust the width of the media block. 
• Select the Number of rows tall to adjust the height of the media block.

👉 For example, you can set the number of columns wide to 2 for a media block to display it with a specific size on your storefront. 

These settings allow you to control the dimensions of each media block according to your preferences and design requirements.

STEP 4: Click “Save” when done.

To display content right on the media, you can use the Overlay feature in the media block settings. 

STEP 1: Click on the Media block you want to make the content overlay to open its settings panel.

STEP 2: Scroll down to the Overlay content setting group, and:

• Toggle “Enable content overlay” to activate the feature.
• Choose the Overlay content position towards the media (Top, Center, Bottom).  

If you want the content to appear in the image, enable the content overlay option and adjust the overlay opacity (range from 0% to 100% - the higher the value, the darker the image is) and overlay content position settings accordingly.

STEP 3: Click “Save” when done.

If you have more than three images in your media gallery section, a swipeable carousel can be a better way for customers to view them on mobile devices. To enable this feature:

STEP 1: Click on the Media gallery section.

STEP 2: Scroll down to the Mobile layout setting group and toggle Enable swipe on mobile.

STEP 3: Click “Save” when done. 

If you want to display your Instagram posts on your feed, use our FREE OT: Easy Instagram Feed app to make the process easier than ever. With our app, you can:

• Link to Instagram account and display Instagram posts (photos, videos, reels) in various layouts.
• Make posts shoppable to let customers buy instantly.
• Create drag-and-drop feed to make the perfect display in seconds.

To install the app, follow this guide.