Image gallery
The image gallery section allows merchants to display multiple images on the page with customizable layout options for each image. By setting the width and height columns of the images, you can create a visually impactful display. This section is suitable for promoting product images, showcasing brand stories, or enhancing the visual atmosphere of the page.
Key Features
Customizable Image Columns: Each image can have its own width and height column settings, providing flexible layouts. On desktop, up to 4 width columns and 2 height columns are supported, while on mobile, up to 2 width columns and 4 height columns are available.
Responsive Design: The image layout automatically adjusts based on the device (desktop or mobile), ensuring consistent display quality across all screen sizes.
Multiple Image Display: Upload multiple images to showcase products, brand stories, or other visual elements, creating a rich and engaging media wall.
Image Scaling and Ratio Control: Control the size and proportions of images by adjusting the column settings, allowing for regular or irregular grid effects.
Image size recommendations
PC
The minimum unit size for PC is recommended to be 400 x 300px .jpg (width 1/4, height 1/2). Other unit sizes can be calculated based on width and height ratios, such as a unit with a width of 2/4 and height of 2/2, which is recommended to be 800 x 600px .jpg.
Mobile
The minimum unit size for mobile is recommended to be 320 x 240px .jpg (width 1/2, height 1/4). Other unit sizes can be calculated proportionally, such as a unit with a width of 2/2 and height of 2/4, which is recommended to be 640 x 480px .jpg.
Usage Suggestions
Use High-Quality, Cohesive Images: To maintain visual consistency and enhance the overall aesthetic, upload high-quality images with a unified style.
Strategic Column Settings: By controlling the width and height columns of each image, you can allocate more space to important images or create a visually appealing contrast with varied image sizes.
Brand Storytelling: Beyond product images, use the media wall to tell your brand’s story, showcase event highlights, or promote new products, increasing brand awareness and engagement.
Optimize for Mobile: Test the media wall on mobile devices to ensure it looks great. Adjust the column settings for each image to provide the best user experience on all devices.
The Image gallery section provides a dynamic and customizable way to display a wide array of images, enhancing both the visual appeal and the storytelling potential of your site.
Section settings
Header
show_section_header
Checkbox
Show section header
true
heading
Text
Heading
Photo gallery
description
Rich text
Description
water_text
Text
Watermark text
decorative_icon
Select
Decorative icon
none
Margin
margin_top
Range
Top margin
0px
margin_bottom
Range
Bottom margin
80px
Blocks
The image gallery section uses Image blocks to display individual images. You can add up to 8 image blocks.
Image
The Image block allows you to add an image with customizable layout, link, and optional title, border, and button.
Desktop layout
columns
Select
Desktop width columns
1/4
rows
Select
Desktop height columns
1/2
Image
image
Image picker
Image
link
URL
Link
Border
show_border
Checkbox
Show border
false
border_color
Color background
Border color
linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 100%)
Title
heading
Text
Heading
heading_size
Select
Heading size
medium
heading_color
Color
Heading color
#FFFFFF
heading_position
Select
Heading position
top-left
show_button
Checkbox
Show button
true
Mobile layout
mobile_columns
Select
Mobile width columns
1/2
mobile_rows
Select
Mobile height columns
1/4
image_mobile
Image picker
Mobile image
heading_size_mobile
Select
Mobile heading size
medium
heading_color_mobile
Color
Mobile heading color
#FFFFFF
Last updated