Section: Flexible Image Text

Everything you'll need to know on how to set up your Image Text Flexible section.

The Image Text Flexible section pairs a single image with a heading, description, optional secondary description, and up to two action buttons. Perfect for editorial-style content blocks like about-us narratives, product story sections, mission statements, and feature highlights—with full control over typography, image styling, and an optional background image.

To activate this section, you first have to add it to your page. This can be done in a few small steps.

1) Click on Add section which can be found in your left sidebar.

2) Scroll down, or search for Image Text Flexible, then click on it.

3) Done — your Image Text Flexible section is added.

The general settings contain the layout, background, image, typography, and button setup of the Image Text Flexible section. Simply click on the section to open the settings.

Defines all colors for this section. Pick from any of the schemes set up in Theme Settings → Colors. Controls the foreground text, background, accent line, and button colors.

Choose where the image sits on desktop: Image on the left or Image on the right. On mobile the section always stacks with the image on top.

Set the maximum width of the inner content, between 1000 px and 1600 px. The default 1200 px works for most stores.

Percentage of the total width occupied by the image, between 30% and 70%. The default 50% gives equal columns. Use 55–65% for image-driven layouts; 35–45% for text-driven ones.

Horizontal space between the image and content columns on desktop, between 20 px and 120 px. The default 80 px is generous; reduce for tighter layouts.

Vertical alignment of the image and content within the section: Top, Center, or Bottom. Center works well when the image and text have similar heights.

Text alignment inside the content column: Left, Center, or Right. The accent line above the title follows this alignment.

Space above the section in pixels (0–120). The default 60 px works for most pages. Mobile padding is reduced automatically by ~33%.

Space below the section in pixels (0–120). The default 60 px works for most pages.

Optional. Overrides the scheme background color with an image behind the entire section. Use for editorial backdrops or branded visuals.

Tick this box to add a semi-transparent overlay over the background image. It uses the scheme background color as overlay. This comes in handy when you need text contrast over a busy image.

Strength of the overlay, between 0% and 100%. Only applies if there is a background image and overlay is enabled. The default 85% works well for most images.

Upload the main image for the image column. Recommended size: 1200 × 1200 px or wider. Lifestyle photos, product shots, and illustrations all work well.

Round the corners of the image, between 0 px and 30 px. Set to 0 for sharp edges; set to 16–24 px for a soft modern look.

Tick this box to add a soft drop shadow underneath the image. Uses the scheme shadow color. Best for photographic content where you want the image to lift off the page.

Tick this box to add a border around the image. Uses the scheme border color. Works well for flat illustrations or icons that need structure without depth.

Thickness of the image border in pixels (1–10). Only used when Show border is on. The default 2 px gives a subtle outline.

The main heading of the section, rendered as an H2 tag. For example: Discover our collection or Crafted for everyday use. Leave empty to hide.

Visual size of the title, from H1 down to H6. The default H1 makes it the largest text on the page; pick a smaller value when the section is one of many on the page.

Apply a text-transform to the title: Normal, UPPERCASE, lowercase, or Capitalize. Use UPPERCASE sparingly for editorial impact.

Line height of the title, between 1 and 2 (in 0.1 increments). The default 1.2 keeps lines tight; use 1.4–1.6 for more breathing room.

Space below the title and above the description, between 8 px and 48 px. The default 24 px works for most layouts.

Title color is taken from the selected scheme (text).

Primary paragraph below the title. Plain text — line breaks are preserved. Use it to expand on the headline with the main message.

Optional second paragraph below the main description. Useful for shorter callouts, trust statements, or shipping reminders. Leave empty to hide.

Font size of both descriptions in pixels (12–24). The default 16 px is comfortable to read. Reduced ~5% on mobile.

Line height of the body copy, between 1.2 and 2 (in 0.1 increments). The default 1.6 reads comfortably at most font sizes.

Space between the description and the next element (secondary description or buttons), between 8 px and 40 px. Default: 20 px.

For more subtle texts. Lower values fade the body text for a softer hierarchy. Range: 50%–100%. Default: 90%.

Text color is taken from the selected scheme (text).

Master toggle for the entire button row. Untick this box to hide both the primary and the secondary button at once.

Primary button

Primary button behavior: Simple link (navigates to a URL), Add to cart (adds a variant to the cart), Buy now (adds and redirects to checkout), or Generic button (styled button element).

The label shown on the primary button. For example: Shop now, Learn more, or Add to cart.

The destination URL of the primary button. Used when the button type is Simple link.

Only needed for Add to cart or Buy now. Paste the numeric variant ID from your Shopify admin (the long number in the URL of the variant).

Visual style of the primary button: Primary, Secondary, Outline, or Ghost (transparent). Colors are taken from the selected scheme.

Secondary button

Behavior of the secondary button: Simple link or Generic button. Add-to-cart and Buy-now actions are reserved for the primary slot.

The label shown on the secondary button. The button is hidden if this is empty.

The destination URL of the secondary button.

Visual style of the secondary button: Primary, Secondary, Outline, or Ghost. Outline pairs nicely with a Primary primary button.

Button configuration

Size applied to both buttons: Small, Medium, or Large. The default Medium suits most layouts.

Tick this box to make both buttons stretch the full width of their container on mobile. Useful for thumb-friendly tap targets on phones.

Image position swaps the image to the left or right side of the section on desktop. Text alignment aligns the text inside the content column. They're independent — for example, you can have the image on the right with center-aligned text.

You need to fill in the Variant ID field. Without it, the button has nothing to add to the cart. Copy the numeric variant ID from the variant URL in your Shopify admin.

This is intentional. On screens 768 px or narrower, content centers automatically and buttons stack vertically for thumb-friendly tap targets. Desktop alignment is preserved on tablets and larger.

Show shadow adds a soft drop shadow underneath the image — best for photos to lift them off the page. Show border adds an outline around the image — best for flat illustrations or icons. Use one or the other, rarely both.

Yes—the section works on any template. Combine it with Add to cart or Buy now button types to drive conversion directly from the section, without sending shoppers back to a product page.