The Cascading image with text section offers a unique experience with engaging layered images and text. Easily tell your brand story, showcase featured products, or share important information in a dynamic way that captures your customers' attention.
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 Cascading image with text
Once you add the Cascading image with text section, you can customize its settings in the left or right sidebar (depending on your screen size)
2.1.1. General
Color scheme: Selects the color palette for the section, ensuring harmony with the overall website design and creating a unified visual experience.
Desktop images position: Adjust the image's position relative to the content (Left or Right)
Section padding
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 Cascading image with text > click open Theme Settings tab
Page width: Defines the maximum width of the page content, controlling layout and ensuring optimal display across devices.
2.1.3. 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
Clicking on the Cascading images title under Cascading image with text section, you can customize that section's settings in the left or right sidebar (depending on your screen size)
Cascading: Display images in a unique overlapping style for a visually engaging effect or present images side-by-side in a balanced two columns layout.
Vertical alignment: Align the image content vertically at the top, middle, bottom
Primary image
Image: This is where you upload the primary image you want to display. The recommendation of 1400 x 1400 pixels suggests a square image that is optimized for display in this particular block or section.
Rotate: This setting likely allows you to rotate the image. It might offer options to rotate the image clockwise or counter-clockwise by a certain degree
Secondary image
Image: This is where you upload the secondary image you want to display (the recommendation of 960 x 1400 pixels)
Rotate: This setting likely allows you to rotate the image. It might offer options to rotate the image clockwise or counter-clockwise by a certain degree
To add Heading block to the Cascading image with text section, click the Add item button (plus icon ➕) under the Cascading 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 Cascading image with text section, click the Add item button (plus icon ➕) under the Cascading 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 Cascading image with text section, click the Add item button (plus icon ➕) under the Cascading 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 Cascading image with text section, click the Add item button (plus icon ➕) under the Cascading 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 Cascading image with text section, click the Add item button (plus icon ➕) under the Cascading 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 Cascading image with text section, click the Add item button (plus icon ➕) under the Cascading 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 Cascading 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.
