Customizing the Image with Text Section

Customizing the Image with Text Section

Image with Text Section Overview

In Shopify stores, image with text sections are commonly used to create visually appealing content blocks that combine persuasive copy with compelling imagery. Tapita's Image with Text Section elevates this concept, providing a versatile tool to convey your message and engage visitors through a harmonious balance of visuals and tailored text.

With Tapita's Image with Text Section, you can:
  1. Show Media Customization: Choose image type and source, set width, position, and aspect ratio. Customize borders including thickness, color, and radius.
  2. Show Content Styling: Tailor padding both vertically and horizontally, and refine font styles for headings, subheadings, and text.
  3. Show Text Elements: Configure headings, subheadings, and rich text including size, alignment, line height, and position.
  4. Show Button Customization: Fine-tune button text, URL, size, and styling details like padding, border properties, and color schemes for different states.

Image with Text Section Customization

For instructions on how to add an image with text section to your store, please refer to the Getting Started guide for Tapita Theme Sections Builder.
After adding your desired Image with Text Section to your store, you can customize its content as follows within the Shopify Theme Editor:

Step 1: Within the Image with Text section, click "Add block."


Step 2: You can add 3 types of blocks:
  1. Heading block:
    1. Heading: Insert the heading text for the section.
    2. Heading Size: Choose the heading size ("Small," "Medium," or "Large").

  1. Text block:
    1. Content: Insert the description text.
    2. Text Style: Choose the text style ("Subtitle" or "Caption with letter-spacing").

  1. Button block:
    1. Button Label: Enter the text for the button.
    2. Button Link: Enter the URL for the button.
You can configure the image with text section as follows:
  1. Click on the image with text section
  2. Image: Choose an image to display.
  3. Title Color: Enter the hexadecimal color code for the heading text.
  4. Paragraph Color: Enter the hexadecimal color code for the paragraph text.
  5. Button Background: Enter the hexadecimal color code for the button background.
  6. Button Text: Enter the hexadecimal color code for the button text.
  7. Outline Button: Enter the hexadecimal color code for the button outline.
  8. Section Border Radius: Set the border radius for the entire section.
  9. Image Border Radius: Set the border radius for the image.
  10. Button Border Radius: Set the border radius for the button.
  11. Image Height: Choose the image height ("Adapt to image," "Small," "Medium," or "Large").
  12. Desktop Image Width: Choose the width of the image on desktop devices ("Small," "Medium," or "Large"). Images are automatically optimized for mobile.
  13. Desktop Image Placement: Choose the position of the image (on desktop devices, "Image First" places the image on the left; "Image Second" places it on the right).
  14. Desktop Content Position: The content of image on desktop devices ("Top", "Middle" or "Bottom").

  1. Configure the section layout
    1. Content Alignment: Choose the alignment of the content on desktop and mobile devices (Left, Center, Right).
    2. Background image: Choose a background image for the section (if desired).
    3. Section Full Width: Toggle this setting to make the section span the full width of the screen. If disabled, customize the size at "Section max width."
    4. Content Full Width: Toggle this setting to make the content within the section span its full width. If disabled, customize the size at "Content max width."
    5. Padding and Margin: Adjust the padding and margin for the section on mobile, desktop, and tablet screens to control spacing.
    6. Section lazyload: The section will only load when it is scrolled to on the page, improving initial page load times.
  1. Configure the theme settings:
    1. Page Width: Setting the page width.

Now you know how to customize the Tapita's Image with Text Section to create visually appealing content blocks, showcase your products or services effectively, and engage visitors with a compelling combination of imagery and text! If you have any questions or need assistance, please don't hesitate to contact Tapita support.