.png){kind=logo}
Scrolling image with text
What is the scrolling image with text section?
The Scrolling Image with Text section combines images with text in a horizontally scrolling format. This section is great for showcasing product features, brand storytelling, or key information in an engaging and interactive way.
How to add scrolling image with text section
.svg){kind=icon}
- Access the Theme Editor: Navigate to `
Online Store > Themes > Customize`. - Add a Section: Click on `
Add section`and select the desired section from the list of available sections. - Customize Your Section: Adjust the settings such as display type, alignment, and visibility according to your preferences.
If you need a more detailed, step-by-step guide on accessing the theme editor, adding sections and blocks, refer to our Setting up theme sections and blocks article.
General section settings
Within this section, you'll find common settings like visibility options and color settings that are consistent across all sections. For more detailed information on these shared settings, please refer to the Common settings between all sections article.
Unlike the other sections that contain a section header, this particular section does not include one. Instead, the content is presented as blocks within the section.
Section Settings:
- Image Height (Desktop & Mobile): Choose predefined sizes or set a custom height.
- Custom Image Height (Desktop & Mobile): Manually define image height in pixels (300px to 1000px for desktop, 300px to 600px for mobile).
- Image Position (Desktop & Mobile):
- Desktop: Align the image to the left or right.
- Mobile: Display the image above or below the text.
- Image Width on Desktop: Set image width to small, medium, or large.
- Content Position on Desktop: Align text content (start, center, or end).
Carousel Settings:
- Show Carousel on Mobile: Enable automatic scrolling for mobile users.
- Auto-Rotate Blocks: Enable/disable automatic switching of images.
- Auto-Rotate Speed: Adjust timing for block rotation (2s to 6s).
Color Settings:
- Color Scheme: Select a predefined color scheme for this section.
- Content Background Color: Choose a background color for the text area.
Block Settings:
Image with Text Block:
- Image Upload: Add images for desktop and mobile versions separately.
- Icon Selection: Choose from predefined icons or upload a custom icon.
- Icon Size (Desktop & Mobile): Adjust icon size (16px to 120px).
- Subheading & Size: Define an optional subheading with small, medium, or large size.
- Heading & Size: Set the main heading and adjust its size (small to extra-large).
- Text Content: Add detailed text or descriptions.
- Enlarge Text: Enable for larger typography emphasis.
- CTA Buttons:
- First Button: Customize label, link, and style (primary, outline, or link).
- Second Button: Option for an additional button with the same settings.
- Highlighting Options: Choose from multiple highlight styles (underline, blur, outline, sketch, etc.).
