Image with Text

The "Image with Text" section allows you to pair an image with text, creating an engaging visual and informational element on your pages.

Steps:

1. Access the Section

   • In your Shopify admin, go to Online Store > Customize to open the theme editor.

   • In the left sidebar, locate and select Image with Text under Template.

   • If this section is not already added, click Add section and add Image with Text.

2. Choose the Layout

   • In the Layout dropdown, select Standard, Short width, or Full width.

3. Add an Image

   • In the Image field, click Select Image to upload or choose an existing image for this section.

   • Adjust the Image height by selecting options like Adapt to image for automatic resizing.

   • Configure the Desktop image width to Small, Medium, or Large.

   • Set the Desktop image placement to either Image first (default for mobile) or Image second.

4. Text and Button Setup

   • Add a title in the Heading field.

   • Write a description in the Description box to provide more context.

   • To add a button, click Add Block > Button, and enter a Button label and Link to guide users to another page.

5. Positioning and Styling

   • Choose Desktop content position (Top, Middle, Bottom) to control the vertical placement of text.

   • Set Desktop content alignment (Left, Center, Right) for horizontal alignment.

   • Select Content layout as No overlap or Overlap to determine if the text overlaps the image.

6. Color and Animation Settings

   • In Color scheme, select a color that matches your theme's branding.

   • Adjust Container color scheme for the background container.

   • In Animations, choose Image behavior as None or Ambient movement for a subtle animated effect.

7. Mobile Layout

   • Customize the Mobile content alignment to Left, Center, or Right for optimal mobile display.

8. Save Changes

   • Once you’re satisfied with the settings, click Save in the top-right corner to apply changes to the section.

Section Blocks

To enhance the Image with Text section, you can add additional blocks to further customize your content. Available blocks include Caption and Countdown.

• Heading: Adds a title or heading above the main content to introduce the section or highlight key information.

• Caption: Provides a brief description or caption for the image, adding context or additional information.

• Text: Allows for more detailed text content, where you can elaborate on the section’s purpose or provide further details.

• Button: Adds a clickable button to direct users to another page, collection, or external link, encouraging interaction.

• Countdown: Displays a countdown timer, ideal for showcasing limited-time offers or upcoming events.

Steps to Add and Configure Blocks

Steps:

1. In the Image with Text section, click Add block.

2. Select one of the available block types: Heading, Caption, Text, Button, or Countdown.

3. Customize the content and settings for each block to align with your design and messaging.

4. After completing the setup, click Save to apply the changes.