Designing with image sections
Image sections allow you to create custom elements and build unique layouts for a wide variety of uses.
Section settings and individual block settings allow you style and position elements to suit various types of imagery.
Slideshow
Use the Slideshow section when you want to rotate multiple messages, products, or promotions in a single section.
It is mobile-friendly by default, so shoppers can swipe through slides on touch devices, while desktop visitors can use drag controls or autoplay.
Each slide can display a single image or video, or two media items side by side. To display multiple media items, set Media 2 type to image or video. To display a single media item, set Media 2 type to none.
Legacy Slideshow
Please see the legacy slideshow features below for the following versions:
- Beyond - versions below 7.1.0
- Blockshop - versions below 13.1.0
- Maker - versions below 12.1.0
- Emerge - versions below 10.1.0
Use Blocks per slide for desktop to control how many slides appear at once (1 to 4). A value of 1 creates a standard full-width slider, while higher values create a multi-card layout for collections, promotions, or featured content.
For saving images for your slides, read more about image sizes in our What image sizes should I use?.
Slideshow examples:
1 block per slide, spacing between blocks enabled.
2 blocks per slide, spacing between blocks disable.
3 blocks per slide, spacing between blocks enabled.
Image with text overlay
Use the Image with text overlay section when you want to place text and calls to action directly on top of a single image.
This section works well for hero banners, campaign announcements, and brand storytelling where one strong image needs supporting copy. The image can be configured with different widths and aspect ratios to suit your layout:
You build the text and calls to action with blocks (headings, descriptions, buttons, and more). For a general overview of blocks and what to expect in the theme editor, see Blocks in image sections.
Use this section when your goal is to combine one image and one message in a single, high-impact banner that can be reused across key storefront pages.
Version availability
Image with text overlay is available in the following theme versions:
- Beyond - versions 6.1.0 and up
- Blockshop - versions 12.1.0 and up
- Maker - versions 11.1.0 and up
- Emerge - versions 9.1.0 and up
Image with text
Use the Image with text section when you want to pair an image with supporting content in a split layout.
This section works well for featured collections, product storytelling, and campaign moments where the visual and copy should sit side by side instead of stacking in a single banner.
The image can be configured to control presentation across desktop and mobile, and the layout can be reversed to place the image on either side. You can also use the overlap setting to adjust how text sits against the image:
The copy beside the image is built with blocks, which you add and reorder in the section (for example headings, descriptions, and buttons). See Blocks in image sections for a general overview. Use the block list in the theme editor to see what this section includes.
Use this section when your goal is to combine one image and one message in a balanced, side-by-side layout that can be reused across key storefront pages.
Legacy Image with text
Please see the legacy image with text features below for the following versions:
- Beyond - versions below 6.1.0
- Blockshop - versions below 12.1.0
- Maker - versions below 11.1.0
- Emerge - versions below 9.1.0
The Image with text section allows you to display images in various ratios — full width, three quarter or half width - to establish balance and visual rhythm in your page design.
Parallax scrolling can be enabled for images in this section to add action and depth. Parallax scrolling effects create movement and the illusion of depth by scrolling background elements at a slower pace than foreground elements. For best results, set the text position setting to center.
Featured images
Use the Featured images section when you want to present two visuals together with one shared message and call to action.
This section works well for campaign storytelling, category spotlights, or any moment where two complementary images create stronger impact than one alone.
Each image can be configured for desktop and mobile display, and mobile layout can be adjusted to show one image, stack both, or place them side by side.
The shared message and call to action are built with blocks for text and related content. See Blocks in image sections for a general overview. Add blocks in the theme editor to see what this section offers.
Use this section when your goal is to tell one clear story across two images in a single, high-impact layout that can be reused across key storefront pages.
Version compatibility
Featured images is available in the following theme versions:
- Beyond - versions 5.1.0 and up
- Blockshop - versions 11.1.0 and up
- Maker - versions 10.1.0 and up
- Emerge - versions 8.1.0 and up
Image with text examples
Collection heros:
Full width banners:
Promotions:
Information sections:
Grid with overlay
This section allows you to display content in simple fixed-aspect ratio grids, justified grids, or more freeform offset grids.
Configure individual block settings to specify how blocks fall within the grid and section settings to style text overlays to optimize readability.
Configuring section settings:
The preserve image aspect ratio block setting will display images at the ratio they're uploaded at, rather than justifying them into the grid. This will allow you to create more free-form, off-set grids with varying image heights.
Grid with overlay examples
Collection grids
Custom product grids
Product edits and promotions
Text columns with images
This flexible sections allows you to display a combination of image an text elements for a wide variety of uses.
Default configuration:
Configuring section settings:
Text columns with images examples
Logo lists (No text):
Customer service call-outs (image and text combination):
Breakdowns (image and textcombination):
Row of icons
If you want a horizontal row of icons (for example trust marks, shipping icons, or simple pictograms with optional short text), add the Icons row section instead of building that layout in Text columns with images. Icons row is available in these theme versions:
- Beyond - versions 4.2.0 and up
- Blockshop - versions 10.2.0 and up
- Maker - versions 9.2.0 and up
- Emerge - versions 7.2.0 and up
Profiles (image and text combination):
Plain text columns (images disabled):
Image comparison
Use the Image comparison section when you want shoppers to interactively compare two visuals in the same frame (for example before/after edits, product variants, material finishes, or renovation stages).
This section is ideal when one image alone cannot communicate the difference clearly. Shoppers can drag the comparison handle to reveal more or less of each image, which makes visual changes easier to understand at a glance.
Add one Before block and one After block, then upload an image for each. You can optionally add mobile-specific images per block to improve cropping and composition on smaller screens.
Use this section when your goal is to show change, contrast, or improvement in a way that invites interaction instead of relying on static side-by-side images.
Version availability
Image comparison is available in the following theme versions:
- Beyond - versions 3.2.0 and up
- Blockshop - versions 9.2.0 and up
- Maker - versions 8.2.0 and up
- Emerge - versions 6.2.0 and up
Shop the banner
Use the Shop the banner section when you want to place clickable product dots on a single image and let shoppers jump straight from inspiration to product discovery.
This section works well for hero-style campaign visuals where one scene contains multiple products (for example a styled room, outfit, or collection shot). Add product dots to highlight items in context without breaking the visual flow.
Set your main banner image, then add Product dot blocks and assign a product to each one. You can control dot placement separately for desktop and mobile, so hotspots stay accurate across screen sizes.
Use this section when your goal is to turn one strong branded image into an interactive shopping surface with minimal on-image text.
Version availability
Shop the banner is available in the following theme versions:
- Beyond - versions 5.0.0 and up
- Blockshop - versions 11.0.0 and up
- Maker - versions 10.0.0 and up
- Emerge - versions 8.0.0 and up
Shop the look
Use the Shop the look section when you want a guided, editorial shopping experience built around one curated image plus an optional call to action.
Like Shop the banner, this section supports product hotspots, but it also includes heading and button settings so you can frame the visual with a stronger campaign message.
Add your image, create Product dot blocks, and position each hotspot for desktop and mobile. Use the heading alignment, container width, and hotspot style settings to match the section to the rest of your page design.
Use this section when your goal is to combine storytelling and conversion in one curated “look” module.
Version availability
Shop the look is available in the following theme versions:
- Beyond - versions 3.2.0 and up
- Blockshop - versions 9.2.0 and up
- Maker - versions 8.2.0 and up
- Emerge - versions 6.2.0 and up
Scrolling text on image
Use the Scrolling text on image section when you want animated headline-style text moving across an image background.
This section is ideal for brand statements, promotional phrases, or directional messaging that should feel dynamic and high-energy. You can add multiple text blocks, control scroll direction and speed, set spacing between phrases, and pause movement on hover.
You can also choose whether text should span the full width and configure mobile-specific media to keep composition readable on smaller screens.
Use this section when your goal is to create motion-driven campaign messaging without building a full slideshow.
Version availability
Scrolling text on image is available in the following theme versions:
- Beyond - versions 4.4.0 and up
- Blockshop - versions 10.4.0 and up
- Maker - versions 9.4.0 and up
- Emerge - versions 7.4.0 and up
Media with highlight
Use the Media with highlight section when you want one primary feature area paired with a grid of supporting media items.
This section works well for launch pages, collection storytelling, and content-first merchandising where you need a lead narrative plus multiple secondary visuals. The main highlight area supports heading and rich text, while blocks can include images or video with optional titles.
Control layout with blocks-per-row, vertical alignment, reverse layout, and display/aspect settings for both desktop and mobile. Overlay style and text options help maintain readability over busy imagery.
Use this section when your goal is to blend editorial storytelling and media-rich browsing in a single modular section.
Version availability
Media with highlight is available in the following theme versions:
- Beyond - versions 5.0.0 and up
- Blockshop - versions 11.0.0 and up
- Maker - versions 10.0.0 and up
- Emerge - versions 8.0.0 and up
Media overlay columns
Use the Media overlay columns section when you want a clean column layout where each media tile can carry overlaid text and optional links.
This section is useful for category callouts, campaign modules, or mixed media presentations where each column acts like a mini story card. Blocks can be image or video, with per-block overline, heading, and description content.
You can adjust spacing, aspect ratio, and text styling to control visual rhythm and readability across the grid.
Use this section when your goal is to present multiple media-driven messages side by side in a structured, scannable layout.
Version availability
Media overlay columns is available in the following theme versions:
- Beyond - versions 7.1.0 and up
- Blockshop - versions 13.1.0 and up
- Maker - versions 12.1.0 and up
- Emerge - versions 10.1.0 and up
Overlapping media
Use the Overlapping media section when you want to layer two media items to create depth and a more art-directed visual composition.
This section works well for brand storytelling, product detail narratives, and campaign moments where a standard side-by-side layout feels too flat. Each media block can be image or video, and you can control overlap amount, animation behavior, and layout direction.
Text settings (heading style, alignment, description, and column width) let you pair the layered media with supporting copy while keeping balance between content and visuals.
Use this section when your goal is to create a premium, editorial look with intentional layering and motion.
Version availability
Overlapping media is available in the following theme versions:
- Beyond - versions 5.0.0 and up
- Blockshop - versions 11.0.0 and up
- Maker - versions 10.0.0 and up
- Emerge - versions 8.0.0 and up
Blocks in image sections
A section is one area of a page template (for example a hero or image band). Blocks are the pieces inside that section. In other parts of a theme, blocks can be all sorts of things—this guide focuses on image sections, where blocks are mostly for copy: overlines, headings, descriptions, buttons, and similar, paired with the image. The image itself is set in the section (or slide) settings, not as “body text.”
Reorder blocks in the left-hand section list to change the order of that copy on the page. Drag a block up or down to match the story you want (for example, overline, then heading, then button).
Shopify explains the overall model in sections and blocks in the theme editor. For a given section, only the block types in Add block apply; that list changes by section and theme version, so use another image section (or a newer version) if something is missing.
Common copy-related block types in Troop themes often include:
- Overline
- Heading
- Description
- Button
- Icons
- Custom Liquid