Collage

The Collage Section is a versatile and visually appealing feature that allows you to create dynamic layouts by combining images, text, and links. Inspired by Shopify's Dawn theme, this section enables merchants to build engaging content blocks that showcase products, collections, or promotional content in an eye-catching grid or collage-style format.

Section Features

1. Flexible Layout Options

   1. Choose from various layout patterns, such as a combination of large and small images, stacked images, or side-by-side blocks.

   2. Add images, videos, or text to each block to suit your store's content needs.

2. Rich Media Support

   1. Upload high-resolution images or videos for desktop and mobile views.

   2. Add alt text to images for accessibility and SEO optimization.

3. Customizable Content Blocks

   1. Add headings, subheadings, and buttons within each collage block.

   2. Optionally link each block to a product, collection, or custom URL.

4. Color Options

   1. Set a background color for the entire section.

   2. Choose text and button color schemes to match your branding.

5. Responsive Design

   1. The collage adjusts automatically for mobile devices, ensuring a seamless browsing experience.

6. Flexible Content Order

   1. Drag and drop collage blocks to rearrange the layout.

Section Settings

Global Settings

• Section Background

  • Choose a background color for the entire collage section.

• Spacing

  • Adjust the padding and margins for better alignment with other sections.

• Grid Layout

  • Select a grid layout for the collage, such Large content image first or second.

    

Block Settings

Each block in the collage can be customized with the following options:

• Media

  • Upload an image or video.

  • Option to use mobile-specific images for better responsiveness.

• Text

  • Add a heading or subheading to the block.

  • Customize font size, style, and alignment.

• Button

  • Add a call-to-action button with a link to products, collections, or pages.

  • Customize the button style (text color, background color, border).

Steps to Add the Collage Section

1

Access the Theme Editor

1. Log in to your Shopify Admin.

2. Navigate to Online Store > Themes.

3. Click Customize on your active theme.

2

Add the Collage Section

1. In the Theme Editor, click Add Section from the left-hand menu.

2. Search for Collage and select it to add the section to your page.

3. Drag and drop the section to place it in your desired position.

3

Configure the Section Settings

1. Click on the Collage Section in the sidebar to open its settings.

2. Customize the global section settings:

   1. Background: Choose a background color or image for the section.

   2. Layout: Select the number of columns and layout pattern for the blocks.

      

4

Add and Customize Blocks

1. Inside the Collage Section, click Add Block to add an item to the collage.

2. For each block:

   1. Upload an image or video.

   2. Add a heading, subheading, or description.

   3. Insert a call-to-action button and link it to your desired page or product.

   4. Customize the text and button colors for better visibility.

   5. Configure hover effects or block styling as needed.

      
3. Rearrange the blocks by dragging them in the desired order.

5

Save Your Changes

1. Once the section and blocks are configured, click Save in the Theme Editor.

2. Preview the section on desktop and mobile to ensure the collage looks and functions as expected.

Best Practices

• Use high-quality images or videos for a professional look.

• Ensure text contrast and visibility by choosing suitable colors for backgrounds and text.

• Test responsiveness on mobile devices to ensure proper display.

• Keep the collage layout clean and not overcrowded to maintain focus on the content.