Modular documentation
Support
Modular latest
Modular latest
  • Modular theme documentation
  • Sections
    • How to use sections
      • Section settings
      • Adding sections
      • Hiding sections
      • Reordering sections
      • Theme Settings
    • Modular sections
      • Announcement bar
      • Background video
      • Blog posts
      • Collections list
      • Contact form
      • Custom code
      • FAQ
      • Featured collection
      • Featured product
      • Icons row
      • Image with text
      • Image with text overlay
      • Logo list
      • Mosaic
      • Newsletter
      • Product features
      • Recently viewed products
      • Rich text
      • Slideshow
      • Split content
      • Split hero
      • Testimonials
      • Video
    • Recommended Image Sizes
      • Product Images
      • Blog Images
      • Slideshow Section Images
      • Catalog Banner Images
      • Product Feature Images
  • Theme Settings
    • Theme settings
      • How to make changes
      • Colors
      • Typography
      • Buttons
      • Appearance
      • Search
      • Product grid
      • Product form
      • Cart
      • Breadcrumbs
      • Favicon
      • Social media
      • Checkout
      • Custom CSS
  • Header
    • Announcement bar section
    • Header
      • Transparent header
      • Logo
      • Mega menu
  • Footer
    • Footer
      • Blocks and settings
      • Logo
      • Menu
      • Text
      • Newsletter
  • Products
    • Product pages
      • Pre-order
      • Product ratings
      • Creating new product page templates
    • Blocks
      • Price and title
      • Form
      • Product description
      • Social share
      • Store availability
  • Collections
    • Collection pages
      • Creating more collection page templates
      • Customizing the collection list page
    • Badges
  • Pages
    • Page templates
  • Blogs
    • Blog pages
      • Creating new blog page templates
  • Popups
    • Popup section
  • License
    • Theme license
  • Custom
    • Custom
      • How to add custom color swatches
      • How to make CSS customizations
      • How to set up custom filtering options
      • How to add custom fonts
  • Online Store 2.0
    • The new experience
  • FAQ
    • Frequently asked questions
      • Checking your theme version
      • Downloading the latest version
      • How to use sections
      • Section settings
      • Theme settings
      • Reordering sections
      • Hiding sections
      • Adding sections
      • Recommended image sizes
        • Product images
        • Blog images
        • Slideshow section images
        • Catalog banner images
        • Product feature images
      • Updating your theme
      • Sharing a preview link
      • How to remove the Shopify credit
  • Support
    • Contacting support
Powered by GitBook
On this page
  • Key components
  • Configuring your section: Settings overview
  • Example Use Cases:
Export as PDF
  1. Sections
  2. Modular sections

Mosaic

PreviousLogo listNextNewsletter

The Mosaic section is one of the signature features of the Modular theme. It creates a visually impactful grid layout that is perfect for storytelling through imagery, allowing users to showcase products, collections, or brand visuals in a collage-style presentation. This section can be customized to include various image sizes and shapes, giving your online store a unique and dynamic look.

Key components

  • Grid Layout: The Mosaic section displays images in a grid or collage format, making it ideal for visually engaging storytelling.

  • Flexible Customization: Users can easily control the layout by adding or removing images and configuring the size and placement of each image within the grid  .

  • Image positioning: Control the position of the image within the mosaic layout, enhancing visual appeal and composition.

Recommended image sizes: The blocks of the section will change based on your device. With that in mind, there are no set sizes for the section or its blocks.

The best practice is to use images with the focal point in the center to avoid cropping. This ensures that the images look balanced across various screen sizes.

For retina displays, images should be created at twice the size of their block to ensure sharpness.

Configuring your section: Settings overview

  • Overlay color: Add an overlay color to the image for a stylish and cohesive look, matching your brand's aesthetics.

  • Text content: Add descriptive text to accompany the image, providing context or highlighting key features.

  • Image block: Showcase additional images with associated buttons for seamless navigation or product promotion.

  • Video block: Embed videos with customizable overlays, creating interactive and immersive experiences for your audience.

  • Product and collection blocks: Highlight specific products or collections directly within the mosaic layout, facilitating product discovery and sales.

Example Use Cases:

  • Product Collages: Feature multiple product shots in one grid for an overview of new arrivals or bestsellers.

  • Lookbooks: Create a lifestyle grid by showcasing collections or brand stories.

  • Brand Storytelling: Use a mix of images and text to tell your brand’s story visually, guiding users through your offerings.