Image with text
Last updated
Last updated
Customize Theme → Sections → Template → Image with text
The image with text section of a Shopify store provides a versatile platform to combine visual imagery with descriptive text, enabling merchants to convey messages, promotions, or storytelling elements effectively. Whether showcasing product features, sharing customer testimonials, or highlighting special offers, this section offers flexibility in presenting content that resonates with the audience. In this section, we'll explore the various settings and customization options available for the image with text section, empowering merchants to create engaging visual experiences that captivate visitors and drive conversions.
The Settings Overview provides a comprehensive look at all the customization options available within the 'Image with Text' section, offering the merchant tools to create visually compelling displays that effectively communicate with the brand message and engage your audience.
Layout: One of two options is to be selected.
Fluid: Option that makes the image a background, so the text and button appear in front.
Columns: Option that divides the section into two parts: one for the image and the other for the text.
Make section full width: Allows the user to use the full width of the screen (small gaps are left at both ends that cannot be absorbed).
Swap columns: With that setting, the user can swap the image and the text positions. By default, the image is on the left, and accordingly, the text is on the right. It would take effect if ONLY the Column Layout option is selected.
Image width: Setting that gives the user control over what percentage of the section the image occupies. It would take effect ONLY on the desktop version. It can vary from 30% to 70%.
Image position on mobile: On the mobile version, when Columns Layout option is selected, the image and the text are positioned one above the other. Thus, the image position is to be selected. There are two options: Top and Bottom.
Media ratio on desktop: Gives control over the media ratio for the desktop version.
Media ratio on mobile: Gives control over the media ratio for the mobile version.
Image on desktop: Select an image for the desktop version.
Image on mobile: Select an image for the mobile version.
Color scheme: With that setting, the user can choose the color scheme of the Image with text section. For more information on setting up the color schemes, refer to Theme settings → Colors → Schemes.
Caption: Enter a caption for the section.
Heading: Enter a heading for the section.
Description: Enter a description for the section.
Heading size: Gives control over the heading font size. One of three possibilities is to be chosen: Small, Medium or Large.
Horizontal content alignment: Gives control over the horizontal positioning of all the content. One of three possibilities is to be chosen: Left, Center or Right.
Button label: Choose a label for the button.
Button link: With that setting, the user can choose one of the store links or enter an external link for the button.
Use outline button style: An additional setting to control the button presentation. The button becomes transparent, and a border in label color appears.
Image overlay color: With that setting, the user can overlay the image with a color or colors, giving the image an additional effect using the gradients. Via the control panel, the user can control the gradients with an input method or manually, as shown on the snip below.
