Skip to content
RockStarUI Docs

Image With Text

What this section does

Section titled “What this section does”

The Image with text section pairs one visual panel with supporting copy and a single CTA. It is typically used for material story, craftsmanship messaging, or category-level promotion.

Shopify Theme Editor with the Image with text section selected on the Home page template, showing the split layout preview and section settings including image, fallback asset filename, image position, heading, rich text, CTA, and background controls.

How to set it up

Section titled “How to set it up”
  1. Go to Online Store -> Themes.
  2. Click Customize.
  3. Open the Home page template.
  4. In the left sidebar, select Image with text.
  5. Configure media, copy, CTA, and background settings, then save.

Editor areas overview

Section titled “Editor areas overview”
  1. Left sidebar:
    • Shows the selected Image with text section.
  2. Center preview:
    • Shows two-column layout with image and content panel.
    • Reflects side switching, copy updates, and button state in real time.
  3. Right settings panel:
    • Section controls: Image, Fallback image asset filename, Image position, Heading, Text, CTA label, CTA link, Background.

Key settings explained

Section titled “Key settings explained”
  1. Image: primary visual for the section.
  2. Fallback image asset filename: theme-asset fallback used when no image picker value is set.
  3. Image position: places media on left or right side.
  4. Heading: main text headline.
  5. Text: rich text body content.
  6. CTA label: button text.
  7. CTA link: target URL for CTA.
  8. Background: section background color.

Important behavior

Section titled “Important behavior”
  1. If Image is set, it is always used first.
  2. If Image is empty and fallback filename is valid, that asset is used.
  3. If neither media source is available, a placeholder panel appears.
  4. If CTA label is empty, no button is rendered.
  5. If CTA label exists but CTA link is empty, CTA falls back to the all-products collection URL.

Common tasks

Section titled “Common tasks”

Switch layout side

Section titled “Switch layout side”
  1. Change Image position to Left or Right.
  2. Confirm balance of media and text in preview.
  3. Save.

Use a theme asset as backup image

Section titled “Use a theme asset as backup image”
  1. Set Fallback image asset filename to an asset file in your theme.
  2. Leave Image empty to test fallback behavior.
  3. Save.

Disable CTA without removing copy

Section titled “Disable CTA without removing copy”
  1. Clear CTA label.
  2. Keep heading/text content unchanged.
  3. Save.

Tips

Section titled “Tips”
  1. Keep heading short to avoid multi-line crowding on narrower desktop widths.
  2. Use body copy length that fits in 2-4 lines on desktop when possible.
  3. Recheck mobile stacking after switching image side.
  4. Keep image subject clear near center to avoid awkward crops.

FAQs

Section titled “FAQs”

Why is my fallback image not showing?

Section titled “Why is my fallback image not showing?”

Verify the filename matches an existing file in your theme assets and includes correct extension.

Why does the CTA still open a page when CTA link is blank?

Section titled “Why does the CTA still open a page when CTA link is blank?”

When label is present and link is empty, the theme uses the all-products URL as default.

Why did the button disappear?

Section titled “Why did the button disappear?”

The button only renders when CTA label contains text.

Section titled “Related guides”

Publish checklist

Section titled “Publish checklist”
  1. Confirm image source and fallback behavior.
  2. Confirm image side alignment with adjacent sections.
  3. Verify heading/text readability and spacing.
  4. Validate CTA label/link behavior.
  5. Save and publish.

Need help?

Section titled “Need help?”

If you still need help, contact support via the Contact page.