Mixed media grid
Overview:
The Mixed Grid section allows for a versatile layout of products, videos, and banners in a responsive grid. Perfect for homepages, promotional layouts, or editorial-style presentations.
This section adapts the number of columns based on screen size and includes flexible alignment and styling options per content block.
Section Configuration:
| Setting | Description |
|---|---|
| Caption | Optional text displayed above the main heading (e.g., a label or short note). |
| Caption Size | Controls caption text size. Options: Small, Medium, Large, X-Large. |
| Caption Weight | Font weight for the caption (e.g., Bold, Medium, Light, etc.). |
| Heading | Main section title. Displayed as an H1–H4 tag, based on selected size. |
| Heading Size | Choose heading level: H1, H2, H3, or H4. |
| Heading Weight | Controls font weight of the heading. |
| Description | A rich text paragraph to describe the section or guide users. |
| Description Text Size | Controls size of the description text (uses heading tag sizes). |
| Description Text Weight | Font weight for the description content. |
| Show Border | Adds a bottom border to the section heading. |
| Max Header Size (%) | Controls max width of the heading container (based on page width). |
| Show Title (Product Cards) | Toggle to show product title under product image. |
| Show Price (Product Cards) | Toggle to show product price under product image. |
| Caption Weight (Product Cards) | Font weight for caption elements in cards (used on banner blocks). |
| Block Text Weight (Cards) | Controls font weight for product and banner titles. |
| Full Width | Enable to stretch the section edge-to-edge. |
| Columns | Choose grid column count on desktop: 3 or 4. |
| Media Aspect Ratio | Choose image ratio: Adapt, Square, Portrait, Landscape. |
| Text Alignment (Desktop) | Aligns header and description text (Left, Center, Right). |
| Text Alignment (Mobile) | Aligns text for smaller screens. |
| Color Scheme | Choose the visual color scheme (background, text, etc.). |
| Top Padding | Add space above the section (0–50px). |
| Bottom Padding | Add space below the section (0–50px). |
Blocks Configuration:
Video Block
Used to embed YouTube/Vimeo or uploaded videos.
| Setting | Description |
|---|---|
| Alignment in Row | Align block vertically: Top, Middle, or Bottom. |
| Cover Image | Thumbnail for the video (used before playback). |
| Heading | Optional title under the video. |
| Heading Weight | Font weight for the heading. |
| Alt Text | Accessible description for the video. |
| Enable Looping | Repeat video automatically when finished. |
| Upload Video | Upload a custom MP4 file. |
| Video URL | Embed link from YouTube or Vimeo. |
Product Block
Displays a single Shopify product with image, title, and price.
| Setting | Description |
|---|---|
| Alignment in Row | Vertically align product card in its grid cell. |
| Product | Select a product from your catalog to feature. |
Banner Block
Displays a static image with optional heading and caption. Can be linked.
| Setting | Description |
|---|---|
| Alignment in Row | Vertical alignment within grid row. |
| Image | Upload banner image. |
| Caption | Small label shown above or near heading. |
| Heading | Main text/title shown with the banner. |
| Link | Add clickable link to the banner. |
| Open in New Window | Opens the banner link in a new tab. |