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.
✅ Steps
-
Open the Theme Editor.
Navigate to your Shopify dashboard and open the Theme Editor for your store. -
Add the Image with Text Section.
Click on 'Add section' and select 'Image with Text' to integrate this section into your page layout. -
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 Blocks:
Image (or Video) Block:
Image picker: Choose an imageAspect Ratio: Set the aspect ratio for the displayed media to ensure it fits well within the section layout.
Media Toggle: Switch between displaying an image or a video based on the content strategy.
Image Link: Add an additional URL for the image, enabling it to act as a link if pressed. This can be a direct URL or sourced from metafields.
Text Block:
Text: Add further descriptive or supplementary text.Size Modifier and Margin Top: Adjust for optimal readability and spacing.
Button Block:
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.