Fluorescent
Ira
Ira
  • Ira Help Center
    • ⚠️Theme retirement
    • FAQs
    • Theme updates
      • Upgrade to OS2
    • Changelog
  • General
    • Editing themes
      • Adding sections
      • Using templates
      • Accessibility
      • Customizing your site
      • Online store speed
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • Adapting theme content
      • Edit default theme content
      • Multiple languages
      • Dynamic content with metafields
      • Unique content for markets
  • Theme styles
    • Theme settings
    • Style presets
    • Fonts
    • Colors
    • Animation
    • Layout
    • Quick shop
  • Pages
    • Templates
      • About page
      • Blogs page
      • Blog posts template
      • Collections list page
      • Contact page
      • Password page
      • Search page
      • 404 page
      • Home page
    • Announcement bar
    • Header
      • Logo
      • Layout and style
      • Mega navigation
      • Transparent header
      • Quick search
      • Customer account link
    • Footer
      • Links block
      • Newsletter block
      • Text block
      • Language selector
      • Country selector
      • Payment icons
      • Social media icons
      • Footer text
  • Sections
    • Theme sections
      • Blog posts
      • Collection list
      • Featured collection
      • Featured product
      • Featured products
      • Gallery
      • Image with text
      • Map
      • Mosaic grid (2 columns)
      • Mosaic grid (3 columns)
      • Newsletter
      • Rich text
      • Slideshow
      • Testimonials
      • Text columns with images
      • Video
    • Popups
  • Products
    • Product listings
  • Product pages
    • Product template
      • Pre-order template
      • Gift recipient form
    • Layout and style
    • Product page blocks
      • Default blocks
        • Title
        • Price
        • Description
        • Variant selector
        • Quantity selector
        • Buy buttons
        • Local pickup banner
        • Share icons
      • Accordion block
      • Information popup
      • Stock level indicator
      • Text block
      • App blocks
    • Product page sections
      • Product reviews
      • Recommended products
      • Complementary products
    • Variant chips
    • Variant swatches
      • Enable swatches
      • Use default colors
      • Use custom images
      • Show on product listings
  • Collection pages
    • Collection template
    • Banner
    • Product grid
    • Filters and sorting
  • Cart
    • Cart page
    • Fly-out cart
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • For developers
    • Custom CSS
    • Custom fonts
    • Custom Liquid
    • Custom JavaScript events
    • Edit Theme JavaScript
Powered by GitBook
On this page
  • Set up section
  • Add feature image
  • Add section headings
  • Add call-to-action button
  • Change section style
  • Settings reference

Was this helpful?

  1. Sections
  2. Theme sections

Image with text

Theme section

Last updated 1 year ago

Was this helpful?

Theme retirement Ira is no longer available on the Shopify theme store. Theme support and updates for current users will end after May 18, 2024. .

The Image with text section combines a feature image with a marketing call to action block. With a flexible layout and optional button, it's a great way to introduce a product collection or something new and exciting.

Set up section

Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

Editing a template changes all pages that use that template. To edit specific pages, you can or .d

STEPS

In your theme editor (Customize):

  1. Click (+) Add block and select Button, then click the new button block.

  2. Select or paste a URL for the Link.

  3. Change the Link text to display on the button.

    The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more,

  4. Click Save.

Add feature image

Upload a feature image to display on the left or right of the marketing text block. You can adjust the width and shape of your image.

STEPS

In your theme editor (Customize):

  1. Click the Image with text section to open the settings.

  2. Click Select image to upload and select an image file.

    There are no required images dimensions. We simply recommend uploaded images have a minimum width of 2050px for optimal quality across all devices.

  3. Choose to set the Image width to either Standard or Larger.

    Standard is 1/2 the width of the section and Larger is 2/3 of the section.

  4. Select the Image position to display the image on the Left or Right side of the section.

    The text content will display on the opposite side of the image.

  5. Click Save.

Add section headings

This section has blocks for three text headings. You can customize the alignment, color, and overall look of your text.

STEPS

In your theme editor (Customize):

  1. Click on the Text blocks to change the Heading and Subheading.

  2. (Optional.) Open the section settings to adjust the Text max width of your headings using the slider.

    Experiment with this setting to find a clean visual shape for your text.

  3. Click Save.

Add call-to-action button

You can link to you collections or products or any other page with a custom call-to-action button.

STEPS

In your theme editor (Customize):

  1. Click (+) Add block and select Button.

  2. Click the new Button block to open the settings.

  3. Select or paste a URL for the Link.

  4. Change the Link text to display on the button.

  5. Click Save.

Change section style

The section image displays on the left or right half of the section. Change the headings that display above the featured products.

STEPS

In your theme editor (Customize):

  1. Click the Featured products section to open the settings.

  2. Choose to Enable contrast colors.

    The Contrast style uses the Contrast colors in your Theme Settings.

    Sections with contrast colors can improve the variety and flow of your page.

  3. Choose to Enable full width to remove any borders around the section, letting it fill the entire width of the screen.

  4. Click Save.

Settings reference

Click the Image with text section to find the following settings.

Setting
Description

Image

Select or upload one image. There are no required image dimensions but we recommend an image that is square or landscape (wider than it is tall). We recommend uploading an image with a minimum width of 2050px for optimal quality.

Image position

Display the image on the Left or Right side of the section.

Image width

Change the width of image in this section. Either Standard (50% of the page width) or Larger (66% of the page width).

Heading

Enter heading text to display as a section title.

Text

Enter text to display below the heading.

Text max width

Use the slider to adjust the maximum width of the heading and subheading text. Experiment with this setting to find a clean visual shape for your text.

Link

Select or paste a URL for a button. You can add up to three buttons below the section heading.

Link text

Add text to display as the button label.

Enable contrast

Apply your store's Contrast colors to this section.

Enable full width

Remove the outer margins from this section to span the entire width of the screen.


The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more,

Related links

read "What is a Call to Action?"
Slideshow
Mosaic grid (2 columns)
Learn more here
insert dynamic content with metafields
read "What is a Call to Action?"
create new templates