Ascent(English)
Contact usFAQsFree to install
English
English
  • Introduction
  • Support Policy
  • Refund Policy
  • Template Installation
  • FAQs
  • Global Settings
    • Layout
    • Colors
    • Typography
    • Breadcrumb
    • Animations
    • Section header
    • Product cards
    • Badges
    • Social media
    • Search behavior
    • Currency format
    • Cart settings
    • Favicon
    • Custom CSS
  • Header
    • Custom Mega Menu
    • Mobile Menu Obstruction by Third-Party Plugins
  • Side Drawer
    • Search Drawer
    • Shopping Cart Drawer
  • Sections
    • Seamless scroll
    • Announcement bar
    • Countdown
    • Collection thumbnails
    • Narrow banner image
    • Image banner
    • Video banner
    • Slideshow
    • Image with text
    • Image-text list
    • Rich text
    • Newsletter
    • Text with icons
    • Logo list
    • Contact form
    • FAQs
    • Multicolumn
    • Image comparison banner
    • Image hotspots banner
    • Map
    • Featured collection
    • Featured product
    • Collection list
    • Custom liquid
    • Composite display
    • Confetti trigger
    • Custom section header
    • Quote
    • Testimonials
    • Shop the feed
    • Image gallery
    • Product compare table
    • Text lens zoom
    • Scroll image expand
    • Milestones
    • Team
    • Highlight features
    • Steps
    • Media wall
  • Popups
    • Event popup
    • Age verification popup
  • Footer
    • Custom Payment Icons
  • Tool bar
  • Pages
    • Product Collection Page
      • Create Subcategory
    • Main product
      • Gifts (Freebies)
      • Product Pre-order
      • Size Chart
      • Variant Images Group
      • Variant Samples
      • Complementary Products
      • Related Products
      • Sibling Products
      • In Box Products
      • Product A+ Page
      • Performance Indicator Bar
      • Delivery ETA
  • Others
    • Version Upgrade Notes
      • v2.2.1 (Current version)
      • v2.1.8
      • v2.1.7
Powered by GitBook
On this page
  • Key Features
  • Image size recommendations
  • Mobile
  • Usage Suggestions

Was this helpful?

  1. Sections

Image gallery

PreviousShop the feedNextProduct compare table

Last updated 4 months ago

Was this helpful?

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

  1. 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.

  2. Responsive Design: The image layout automatically adjusts based on the device (desktop or mobile), ensuring consistent display quality across all screen sizes.

  3. Multiple Image Display: Upload multiple images to showcase products, brand stories, or other visual elements, creating a rich and engaging media wall.

  4. 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

  1. Use High-Quality, Cohesive Images: To maintain visual consistency and enhance the overall aesthetic, upload high-quality images with a unified style.

  2. 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.

  3. 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.

  4. 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 Media Wall Block 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.