Documentation Index Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
Use this file to discover all available pages before exploring further.
The Dual Content Tiles section displays two side-by-side content tiles. Each tile can contain text, buttons, media, and optionally a product card. This section is ideal for highlighting two related stories, campaigns, or product-focused content areas.
Dual content tiles help create balanced, visually engaging layouts that can showcase complementary products, seasonal campaigns, or editorial content in a structured format.
What this section controls This section controls dual-tile layouts with the following capabilities:
Two side-by-side content areas with independent configuration
Flexible tile sizing and spacing options
Desktop and mobile-specific media and positioning
Optional product card integration within tiles
Rich text content with buttons and media support
How the Dual Content Tiles section works The Dual Content Tiles section uses a block-based system:
The section supports a maximum of 2 tiles
Each tile is added as a block
Tile sizes and alignment are controlled at the section level
Content, media, and product behavior are controlled at the block level
Getting started
Open Theme Customizer
From Shopify admin, access the Theme Customizer.
Add Dual Content Tiles section
Add the Dual Content Tiles section to your page or template.
Add tiles
Click Add Tile to create content blocks (maximum 2 tiles).
Configure settings
Adjust section and tile settings according to your needs.
Section settings Section settings control the overall layout and behavior of both tiles.
Section layout Controls the spacing between the two tiles. Available options:
Normal: Tiles are visually separatedCompact: Tiles are displayed without spacing and appear attached First block size Controls the width and height of the first tile . The second tile is automatically adjusted based on this selection. Available options: Full, Half, Large, SmallSwap order for mobile Reverses the tile order on mobile devices. Options: True / FalseHeading Section-level heading displayed above the tiles.
Supports rich text
Allows bold, italic, underline, and links
Heading size Controls the size of the section heading. Available options: XS, S, M, L, XLHeading alignment Controls horizontal alignment of the section heading. Available options: Start, Center, EndBlock settings Block settings configure each tile independently. Each tile represents a unique content area with its own media, text, and optional product.
Visibility
Background
Content
Product
Desktop media
Mobile media
Show on Controls which devices the tile is visible on. Available options: Desktop, Mobile, BothColor scheme Controls background and text colors using Shopify’s color scheme system. Custom background color Allows selecting a custom background using a gradient color picker. Heading Tile heading text.
Supports rich text
Allows bold, italic, underline, and links
Heading size Controls the size of the tile heading. Available options: XS, S, M, L, XLText Main text content of the tile.
Supports multiple text elements (paragraphs, H1–H4)
Allows bold, italic, and links
Defines the button label. Leave empty to hide the button.
Destination URL for the button. Controls the visual style of the button. Available options: Filled, Outlined, TextTiles can optionally display a product card. Product Select a Shopify product. When a product is selected, a product card is displayed inside the tile. When using a product, it is recommended to also include an image or video for better visual balance.
Product width Controls the width of the product card inside the tile. Range: 16rem – 60remIncreasing product width may increase tile height to preserve the product’s aspect ratio.
Show other elements with product on mobile Controls whether non-product content is displayed on mobile.
Enabled: Heading, text, and buttons are hidden on mobileDisabled: All content remains visible Options: True / FalseTile aspect ratio Controls the aspect ratio of images and videos. Auto is recommended when tiles contain long text.
Available options: Auto, Square, Portrait, LandscapeEach group includes multiple ratio presets. Vertical position Controls how the tile stretches vertically. Available options: Stretch, Start, Center, EndContent position Controls vertical positioning of content within the tile. Options: Top, Center, BottomContent alignment Controls horizontal alignment of content. Options: Start, Center, EndProduct position Controls where the product appears relative to other tile content. Available options: Before, Between, AfterImage Select an image for the tile. Video Select a Shopify-hosted video. External video Overrides both image and video. External videos may negatively impact performance. Shopify-hosted videos are recommended.
Show video controls Shows or hides video playback controls. If mobile media is set, it will be used on mobile devices instead of the main media.
Tile aspect ratio Controls the aspect ratio of mobile images and videos. Available options: Auto, Square, Portrait, LandscapeContent position Controls vertical positioning on mobile. Options: Top, Center, BottomContent alignment Controls horizontal alignment on mobile. Options: Start, Center, EndProduct position Controls product placement on mobile. Options: Before, Between, AfterMobile image Select an image used only on mobile devices. Mobile video Select a video used only on mobile devices. Mobile external video Overrides both mobile image and video. External videos may negatively impact performance.
Show video controls on mobile Shows or hides video playback controls on mobile. Padding Controls internal spacing of the tile on mobile. Available options: No, S, M, L, XLBest practices
Use Compact layout for visually continuous designs and seamless transitions
Limit content length when using fixed aspect ratios to prevent layout issues
Be cautious when increasing product width as it may affect tile height
Prefer Shopify-hosted videos over external videos for better performance
Test mobile layouts when using product-only mobile views to ensure content visibility
Ensure tiles have similar content lengths for visual balance
Use high-quality images that maintain clarity at various aspect ratios
Consider color scheme contrast when placing products within tiles
Product cards Learn about product card configuration and styling options
Theme settings Understand global theme configuration options
