The Text columns with images section combines illustrations and concise text content in an engaging multi-column layout. Easily showcase product features, benefits, or brand stories in a visual and memorable way.
Step 01: From Shopify Admin, click on Online Store > Select Theme > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click the Sections button > Click the Add Section button or hover below another section until the (➕) icon appears > In the Sections tab, scroll through the list or use the search bar to find and select Text columns with images
To add Column block to the Text columns with images section, click the Add item button (plus icon ➕) under the Text columns with images
Once the Column block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Image: Select the image you want to display in each column.
Subheading: Enter the text content for the element, conveying information or messages to users
Heading: Enter the title text for the section, providing a clear and attention-grabbing title for viewers.
Description: This is the body text that provides additional information or promotional details. You can enter and format the text using bold, italic, link, list, text alignment,...
Button label (Leave the label blank to make the slide fully clickable): Enter the text displayed on the button.
Button link: Enter the URL or select a page/product to link the button to. When clicked, users will be directed to the specified destination.
Once you add the Text columns with images section, you can customize its settings in the left or right sidebar (depending on your screen size)
General
Enable swipe on mobile: Enabling this feature improves the mobile browsing experience by allowing intuitive navigation.
Color scheme: Selects the color palette for the section, ensuring harmony with the overall website design and creating a unified visual experience.
Caption: Enter a brief caption, often used to provide additional information or context for an image or content.
Heading: Enter the main title for the section, helping readers quickly grasp the main topic.
Heading size: Adjust the font size of the heading, creating visual hierarchy and emphasizing content.
Heading style: Select the style for the heading (e.g., normal, uppercase), customizing the interface and creating emphasis.
Heading tag (Will affect SEO): Select the HTML tag for the heading (H1-H6), affecting SEO structure and content hierarchy.
Description: This is the body text that provides additional information or promotional details. You can enter and format the text using bold, italic, link, list, text alignment,...
Number of columns on desktop (Automatically optimized for mobile): This determines how many images will be arranged horizontally on larger, desktop screens
Column alignment: This setting controls the horizontal alignment of the content within each individual column of a multi-column section
Image width: This settings determines the width of the images displayed within the columns.
Unit (Unit for image width): This specifies the unit of measurement for the Image width setting (% or px)
Image ratio: This setting controls how the images within the section are cropped or sized to fit their containers (square, portrait, apdapt to image)
Image spacing: This setting controls the amount of space or spacing between the image and the content in the column
Subheading font: Select the font style for the text, choose between font for body content and font for heading.
Subheading size: Adjust the font size of the text (small, medium,large), controlling the displayed text size.
Heading size: Adjust the font size of the heading, creating emphasis and visual hierarchy for the content
Heading style is a common text formatting option you'd find in a theme customizer (normal, uppercase)
Heading tag (Will affect SEO): Select the HTML tag for the heading (eg: H1, H2, H3), affecting SEO structure and content hierarchy.
Description size: Choose the visual size of the description text: Small, Medium, Large or Extra large
Button size: This setting controls the visual size of the button. Common options you might see in a dropdown or as radio buttons include: Extra Small, Small, Medium
Button style: This setting determines the visual appearance and styling of the button. Common options include: Outline, Solid, Link, Solid 3D
Top padding (Desktop/Mobile): Creates space above the content within an element, separating it from elements above and improving visual layout.
Bottom padding (Desktop/Mobile): Creates space below the content within an element, separating it from elements below and improving visual layout.
Theme Settings
In the Text columns with images > click open Theme Settings tab
Page width: Defines the maximum width of the page content, controlling layout and ensuring optimal display across devices.
Custom CSS
Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.
Add custom styles to this section only.
To add custom styles to your entire online store, go to Theme Settings