Theme Section - Image & Text - simple

The Image & Text Theme Section (simple) provides a clean and visually appealing way to showcase specific product content alongside striking images. This section includes a Call-to-Action (CTA) button that can direct customers to a product page or any other location in your store.

Installing the Image & Text theme section to your Shopify theme

Before going to the Shopify Theme Editor to insert this theme section, you would first need to install it first from the Vitals app.

For a complete list of instructions, you may refer to this article: How to Add a Theme Section to Your Shopify Store


Once you have successfully installed the theme section, you can now go to the Shopify Theme Editor and insert it by clicking Add section > Vitals: Image & Text - Simple:

💡 Pro Tip: Use high-quality images and compelling CTAs to maximize engagement and drive conversions!

Customizing the Image & Text Theme Section

Customization is simple and intuitive through Shopify’s Theme Editor:

  1. Select the Section

    • In the left sidebar, click on the newly added Image & Text section.

      Adjust Settings

    • The customizable settings for the section will appear in the right sidebar.

    • You can modify the text, image, and Call-to-Action button to suit your store's branding and needs.

      Preview Your Changes

    • Use the live preview to ensure the section fits perfectly on your storefront.

Here are some of the settings that can be changed:

Image & Text - Simple - Main Element

  • Image Desktop
    • Image - You can upload your image here.
    • Aspect Ratio - Lets you choose the aspect ratio of your uploaded image:
      • Square
      • Portrait
      • Landscape
      • Original
    • Position - Where you would like the image to be positioned in the main element:
      • Left
      • Right
  • Image Mobile (Optional) - If you did not customize any settings here, the settings in the Image Desktop above will be used
    • Image - You can upload your image here, and it will only show for mobile.
    • Position - As mobile devices have a limited screen size, the positions that you can choose from are different:
      • Above the content
      • Below the content
  • Text Appearance
    • Text alignment - The alignment of the text content inside the Image & Text's main element
      • Left
      • Center
      • Right
    • Text box width - The width of the text box, in percent
  • Layout
    • Section width - The width of the whole section, in percent
    • Custom max width - If you want to increase the maximum width above 100%, you can do so here. Warning: This can make this section's width go beyond common screen sizes, so be careful.
    • Top - bottom padding (desktop) - in px
    • Top - bottom margin (desktop) - in px
    • Top - bottom padding (mobile) - in px
    • Top - bottom margin (mobile) - in px
  • Design
    • Text box background - You can choose the background color of the text box through a color picker
    • Section background - You can choose the background color of the whole theme section through a color picker
    • Show background image - You can enable this if you would like the background to be an image instead of a color
    • Background Image - If you have enabled the "Show background image" above, you can upload your desired background image here

Caption - The text above the main text of the Image & Text theme section.

  • Caption - The actual text content to be used as a caption
    • Size - Size of the caption's text:
      • Small
      • Medium
      • Large
    • Caption Style
      • Regular
      • Bold
    • Text color - via a Color Picker
  • Alternative Font
    • Apply alternative font - if this is enabled, this font will be used if the used font does not exist on the visitor's computer.
    • Font - You can choose your desired alternative font here.

Image & Text - Simple - The middle area of this theme section where the main content is.

  • Heading - The main title text that appears in the section
    • Size - Size of the heading's text:
      • Small
      • Medium
      • Large
    • Text color - via a Color Picker
  • Alternative Font
    • Apply alternative font - if this is enabled, this font will be used if the used font does not exist on the visitor's computer.
    • Font - You can choose your desired alternative font here.

Description - The description area of the Image & Text section.

    • Size - Size of the heading's text:
      • Small
      • Medium
      • Large
    • Text color - via a Color Picker
  • Alternative Font
    • Apply alternative font - if this is enabled, this font will be used if the used font does not exist on the visitor's computer.
    • Font - You can choose your desired alternative font here.

Buttons - It only has one button by default, but you can add a secondary button.

  • Primary Button
    • Label - The text inside the main button
    • URL - The URL where the button will go to when clicked
    • Button Style
      • Filled
      • Outline
      • Link
    • Open Link in New Tab - When this is enabled, the button will open a new tab when clicked
    • Corner Radius - in px
    • Background Color - via a color picker
    • Text Color - via a color picker
    • Border Color - via a color picker (note: applicable only if Button Style selected is Outline)
  • Secondary Button
    • Label - The text inside the main button
    • URL - The URL where the button will go to when clicked
    • Button Style
      • Filled
      • Outline
      • Link
    • Open Link in New Tab - When this is enabled, the button will open a new tab when clicked
    • Corner Radius - in px
    • Background Color - via a color picker
    • Text Color - via a color picker
    • Border Color - via a color picker (note: applicable only if Button Style selected is Outline)


That's it! With the Image & Text Theme Section, you can effortlessly highlight key products or content with stunning visuals and a clear call-to-action. Start customizing today and make your store stand out! 🚀

Is this resource helpful? Thanks for the feedback There was a problem submitting your feedback. Please try again later.