Text with images

The Text with images section offers a unique and visually engaging design by integrating inline images and product into your promotional content.

With modern, creative layouts, this section is ideal for highlighting specific products or services while enhancing the visual appeal of your promotions.

1, How to add section in theme editor:

1

In your theme editor (Customize), scroll to the bottom of the template and select Add section.

2

In the list, locate and select Text with images section. The section will now be added to your page, ready for customization.

2, Section settings

• General settings:

  • Desktop content alignment: Align the section’s text content horizontally on the desktop: Left, Center or Right.

  • Desktop content width: Control the width of the text block. Content width automatically adjusts for mobile screens.

• Text settings:

  • Subheading: Add a subheading to introduce the section.

  • Heading: Enter the main title for the section.

  • Heading size: Customize the font size of the heading.

• Image size: Adjust the relative size of the image within the section from 50px to 150px.

• Image style: Define the shape of the image.

Square

Standard rectangular image.

Slightly rounded

Circle

• Image hover effect: Choose an interaction effect when users hover over the image:

  • None: No hover effect.

  • Zoom in: Enlarges the image slightly on hover.

  • Show tooltip: Adds a circular hover effect and displays a tooltip beside the image.

• Mobile layout:

  • Mobile content alignment: Align the section’s content horizontally on mobile screens: Left, Center or Right.

3, Block settings:

The Text with images section includes settings that are consistent across its Image block and Product block, allowing for a cohesive design while offering flexibility to customize each block. Below is a detailed explanation of these shared settings, along with their functionalities:

• Common settings across blocks

  • Image position: Adjust where the image or product appears inline within the Heading content (1 ➝ 30). Use the slider to define the exact word placement where the image will appear. For instance, if set to 3, the image will appear after the third word in the text block.➝ Use this setting to break up lengthy text or emphasize specific parts of your message. Ensure the positioning feels natural and enhances readability.

  • Tooltip settings: Tooltips provide additional context or information to images when users hover over them. This feature is available when the Image hover effect is set to "Show tooltip". Tooltip settings include:

    • Label: Enter the text that will appear in the tooltip. Example: For a product image, the tooltip could display "Click to learn more" or "See full details." If the label field is left blank, the tooltip will not display.

    • Tooltip background: Select the background color for the tooltip. Choose a contrasting color to ensure the tooltip text is legible against the background.

    • Tooltip label: Pick the color of the text within the tooltip. You can use brand colors for consistency or neutral tones for readability.

• Unique settings for the image block:

  • Upload an image to display within the text block.

  • Assign a clickable link to the image to redirect users to a specific page.

• Unique settings for the product block

  • Select a product from your store to feature within the text block. The product image is automatically used as the inline image.

  • Upload a custom image to override the product’s default image.

  • Activate a Quick view feature, allowing users to see product details in a popup without leaving the current page.