The 'Image with text' section is a flexible tool to combine images and text in a visually appealing and engaging manner. You can use this section to introduce products, services, or convey messages effectively. With its high customization capabilities, you can adjust the layout, images, text, and other elements to suit your website design and communication goals.
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 Image with text
Once you add the Image with text section, you can customize its settings in the left or right sidebar (depending on your screen size)
2.1.1. General
Make section full width: Expands section width to the full page width, optimizing display on large screens and creating an impactful layout.
Image height (Desktop/Mobile): Adjust the aspect ratio of image, ensuring images display beautifully and propotionally (Adapt to image - Choose " Adapt to image" to not cut images, Fixed height)
Fixed height (Desktop/Mobile): Sets a fixed height for the image
Desktop image: Upload an image for the desktop version, recommending 1400 x 1400px .jpg for optimal quality.
Mobile image: Upload a separate image for the mobile version. If none is uploaded, the desktop image will be used.
Desktop image width (Content will fill the remaining space. Image width is automatically optimized for mobile.): Set the image width on desktop.
Desktop image placement: Select the image display position on desktop (Image first or second)
Mobile image placement: Select the image display position on mobile (Image first or second)
Color scheme: Selects the color palette for the section, ensuring harmony with the overall website design and creating a unified visual experience.
Desktop content position: Select the content display position on desktop screens (e.g., top left, top middle, top right,...), adjusting the content layout relative to the image.
Mobile content position: Select the content display position on mobile phone screens (left, center, right), adjusting the content layout relative to the image on mobile devices.
Image behavior: Select the movement effect for the image (none, ambient movement, parallax), creating visual effects and depth for the image.
Reveal on scroll (Show animation when section becomes visible): Enable animations for the section content when it becomes visible while scrolling, enhancing interactivity and attracting attention.
Image visible animation: Select the animation effect for the image when it appears (none, top to bottom, bottom to top, right to left, left to right), creating visual motion effects.
Content visible animation: Select the animation effect for the content when it appears, enhancing interactivity and capturing viewer attention
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.
2.1.2. Theme Settings
In the Image with text > click open Theme Settings tab
Reveal sections on scroll is a modern web design technique that animates sections of content as the user scrolls the page.
2.1.3. Custom CSS
In the Image with text > click open Custom CSS tab
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
To add Heading block to the Image with text section, click the Add item button (plus icon ➕) under the Image with text
Once the Heading block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Heading: Enter the title text for the section, providing a clear and attention-grabbing title for viewers.
Heading size: Adjust the font size of the heading, creating emphasis and visual hierarchy for the content
Heading tag (Will affect SEO): Select the HTML tag for the heading (eg: H1, H2, H3), affecting SEO structure and content hierarchy.
Uppercase: Convert the heading text to uppercase, creating emphasis and prominence.
To add Sub heading block to the Image with text section, click the Add item button (plus icon ➕) under the Image with text
Once the Sub heading block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Text: Enter the text content for the element, conveying information or messages to users
Font: Select the font style for the text, choose between font for body content and font for heading.
Size: Adjust the font size of the text (small, medium), controlling the displayed text size.
Color: Select the color for the text, distinguishing between primary and secondary colors to match the design.
Uppercase: Convert the text to uppercase, creating emphasis and highlighting the content.
To add Text block to the Image with text section, click the Add item button (plus icon ➕) under the Image with text
Once the Text block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Text: Enter the text content you want to display, allowing customization of the message and information conveyed.
Color: Select the color for the text, distinguishing between primary and secondary colors to match the design
Size: Adjust the font size of the text, ensuring readability and compatibility with the website layout (eg: Small, Medium, Large,...)
Hide on mobile: Hides or shows the text on mobile devices, optimizing the user experience on different screen sizes
To add Caption block to the Image with text section, click the Add item button (plus icon ➕) under the Image with text
Once the Caption block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Text: Enter the text content for the element, conveying information or messages to users.
Font: Select the font style for the text, choose between font for body content and font for heading.
Size: Adjust the font size of the text (small, medium), controlling the displayed text size.
Color: Select the color for the text, distinguishing between primary and secondary colors to match the design.
Uppercase: Convert the text to uppercase, creating emphasis and highlighting the content.
To add Spacer block to the Image with text section, click the Add item button (plus icon ➕) under the Image with text
Once the Spacer block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Space: Setting space between elements creates clear separation.
Tablet space: Optimizes the spacing between elements on tablet screens, ensuring content is displayed balanced and easy to interact with on medium-sized screen devices.
Mobile space: Adjusts the spacing between elements on mobile phone screens, optimizing the user experience on small screens
To add Button Group block to the Image with text section, click the Add item button (plus icon ➕) under the Image with text
Once the Button Group block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Stack buttons is a user interface (UI) design technique that allows you to display multiple action buttons in a neat and organized manner.
To add Button block to the Image with text section, click the Add item button (plus icon ➕) under the Button Group
Once the Button block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Label: Enter the text displayed on the button, providing clear information about the button's action.
Link: Enter the URL linked when a user clicks the button, defining the destination of the action.
Open this link in a new window: Opens the link in a new browser window, keeping the user's current website open.
Button size: Select the display size of the button (small, medium, large), adjusting the button size to fit the layout.
Button style: Select the display style of the button (outline, solid, link), customizing the button's appearance to match the website design.
Uppercase: Converts the button label text to uppercase, creating emphasis and highlighting the button.
Minumum width: Defines the minimum width of the button (0 for auto). Does not apply to link style. Minimum width is automatically optimized for mobile.
