Image with text

The "Image with Text" section is a flexible and visually engaging part of your website that allows you to effectively showcase your brand, products, or any important content. This section can include one image/video block, comprehensive text elements like a paragraph, heading, and subheading, and up to two button blocks for calls to action.

Adding the section

Steps

  1. Open the Theme Editor.
    Navigate to your Shopify dashboard and open the Theme Editor for your store.
  2. Add the Image with Text Section.
    Click on 'Add section' and select 'Image with Text' to integrate this section into your page layout.
  3. Save your changes.
    After customizing the Image with text Section section, click 'Save' to implement your adjustments.

Section Settings

Style and Layout

  • Color Scheme: Utilizes the primary color scheme set within the theme settings, ensuring consistency across your site.
  • Desktop Section Width: Choose between full width to span the entire screen or conform to the page width for a more contained look.
  • Desktop Image Position: Position the image on either the left or right side of the section. By default, the mobile layout displays the image first.
  • Text Content Width: Options include Wide, Default, or Narrow to suit the design and content needs.
  • Full Width Button Toggle: Enable or disable full width for buttons, allowing them to either span across the section or align with the text content.
  • Desktop/Mobile Text Alignment:Set basic text alignment settings (Left, Right, Center) to optimize readability and layout aesthetics on both desktop and mobile views.
  • Desktop/Mobile Margin: Adjust the section's top and bottom margins to ensure adequate spacing and visual balance for both mobile and desktop layouts.

Customize  with Blocks

Image or Video Block

  • Aspect ratio: Choose the aspect ratio that best fits your design (Natural, Portrait, Square, Landscape).
  • Media link: Optional link applied to the entire media area.
  • Media type: Choose what this slot shows: a still image, an uploaded (Shopify) video, a YouTube or Vimeo video, or mixed media (both an image and an uploaded video together).
  • Image: Select an image to show when media type is Image or Mixed media.
  • Video: Select or upload the video in the editor. Available when the media type is Video or Mixed media.
  • Video URL (external only): Enter a YouTube or Vimeo URL.
  • External video’s aspect ratio: For External video only. Set the video’s aspect ratio (default 16:9) to ensure it fits the layout correctly.
  • Show controls: Available for hosted video, external video, and mixed media. Enable standard play/pause controls. When disabled, the video behaves like a background video (autoplayed and muted).
  • Autoplay: Available when Show controls is enabled. When enabled, the video plays automatically, loops continuously, and is muted for consistent browser behavior.

Text Block

  • Text: Add further descriptive or supplementary text.
  • Size Modifier and Margin Top: Adjust for optimal readability and spacing.

Button Block

  • Button Label: Define the text that appears on the button.
  • Button Style: Select from Primary, Secondary, or Link styles to match the button with your site's theme

Desktop & Mobile Layout for Button:

  • Heading Size Modifier: Adjust the button's size for both desktop and mobile layouts, with the same range of size options.
  • Margin Top Slider: Set the top margin to position the button perfectly within the section.