Media Gallery

1. What is a media gallery?

The media gallery is a feature used to showcase various types of media related to products or promotions on an e-commerce website.:

• Showcase Product: The media gallery allows you to display high-quality images and videos of your products from different angles, providing customers with a comprehensive view before making a purchase decision.
• Promotion: You can use the media gallery to highlight promotional images or videos, such as special discounts, limited-time offers, or seasonal sales, to attract customers' attention and encourage them to explore further.
• Buyer's Review: Including images or videos submitted by satisfied customers in the media gallery can serve as social proof and build trust with potential buyers.
• Social Images: In some cases, social media images related to your brand or products act as a substitute for an Instagram feed or aggregating user-generated content to foster community engagement.

2. How to set up the media?

To set up media, you can add either images or videos to each block. Images provide visual content while videos offer dynamic multimedia experiences. In the Media Gallery section, you can customize various aspects:

• Enter a heading for the media gallery and a subheading if needed.
• Select the heading tag for this section to enhance the SEO of the page. 

Image:

• Upload an image from your library or free resources.
• Enter a link for users to be redirected to when clicking the image.
• Adjust the overlay opacity of the image to control its visibility.

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.
• Locate the “Show sound control” checkbox. Check the box to enable the sound control feature. By default, this checkbox is set to false. Once enabled, an icon will appear on the storefront, allowing customers to toggle sound on or off as needed.

• Add alternative text for the video for accessibility purposes.

Layout group section:

• 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’s size.
• Enter the content to accompany the media, such as a description or caption.
• Adjust the alignment of the content within the block (Left, Center, Right).

3. How to modify the height and width of each media block?

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

a) Adjust the layout settings in the section settings for desktop and mobile:

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.

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

b) Customize the individual media block settings:

• Choose the number of columns wide to adjust the width of the media block. 
• Please note that: The number of columns here cannot exceed the number of columns configured in the section settings above.
• 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.

4. How to show content outside of the media?

To display content outside of the media, you can use the Overlay feature in the media block settings. 

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.

If you prefer the content to be outside the image, simply disable the “Enable the content overlay” settings.