1. What is Highlight Text with Image?
The Highlight Text with Image section lets you put pictures right inside your words. It's a way to make important messages or stories more interesting by mixing text and images together. Ideal for marketing campaigns, product highlights, or brand storytelling, this section enhances readability and engagement, ensuring your content stands out.
When you scroll over the section, the text is shown with the interactive black highlighting effect.
2. Section Components
| Section | Highlight text with images | Highlight text with effects and images when scrolling. |
|---|---|---|
| Available block | Image | Add an image in between the texts. |
3. Location & Setup
To add and set up the Highlight text with image section:
- Open the Shopify Theme Editor (Online store > Themes > Customize)
- Decide where you want to place the new section.
- Click "Add section".
- Select "Highlight text with image".
4. Highlight Features
- Interactive highlighting effect: Text is revealed with a dynamic highlight as users scroll, creating an eye-catching browsing experience.
- Inline image integration: Embed images directly within your text.
- Flexible text styling: Customize heading elements, line spacing, and options to emphasize keywords using [[ ]].
5. Common Use Cases
🤔 How to set up the Highlight Text with Image section?
STEP 1: Add the section
Add the Highlight text with image section.
STEP 2: Add Image blocks
Under the section, add Image blocks to integrate them into the text.
At each Image block:
- Select an Image and paste a link to redirect customers if you prefer.
- Choose Image style, ratio and width.
STEP 3: Add text
Click on the Highlight text with image section.
At the Text setting group, enter your heading text and insert images within the text using placeholders like [img1], [img2], etc.
For example: Be your [img1] own eurus. Feeling confident [img2] in the skin [img3] you are in.
STEP 4: Click "Save" when done
🤔 How to highlight some words in the Highlight Text with Image section?
To highlight some text in the section, like the word 'Feeling' in the image below, follow these steps:
STEP 1: Click on Highlight text with image to open its setting panel
STEP 2: Wrap the text to highlight
Under Text setting group, at Heading: Wrap some words between [[ ]] to highlight them, like this: Be your [img1] own eurus. [[Feeling]] confident [img2] in the skin [img3] you are in.
STEP 3: Choose the highlight style
There are 2 types of highlight Marker to choose:
| Underline | Font highlight |
 |
 |
STEP 4: Click "Save" when done.
🤔 How to customize Highlight Text with Image section's look and effect?
This use case shows you how to transform the section into a dynamic, eye-catching layout with customizable height, smooth animations, balanced spacing, and branded text styling.
STEP 1: Click on Highlight text with image to open its setting panel
STEP 2: Customize the overall display and animation
- Choose the Section height to fit the content or display in fullscreen.
- Adjust the Animation speed (Slow, Medium, Fast). Note that the animation speed only applies to fullscreen height.
- Turn on Enable equal line height to keep line spacing consistent.
STEP 3: Customize the Text look
At Text setting group:
- Adjust the Heading size with the slider, choose the Heading tag (H1-H6), and add a Subheading if needed.
- Choose the Text alignment (Left, Center, or Right).
- Optionally, you can display a button and edit Button text, Button link, and Button style.
STEP 5: Adjust the Color & Layout
- Set color for section elements.
- Enable or disable the section divider for better visual separation.
- Adjust other Desktop layout and Mobile layout settings if needed.
STEP 6: Click "Save" to apply changes
6. Support Information
Need help? Contact our support team at Omni Themes Support.
