Customizing the Scrolling Image Section
Enhance your store’s visual appeal by showcasing images and media in a dynamic, scrolling format with the Scrolling Image Section. Whether you're highlighting products, promotions, or brand stories, the Scrolling Image Section transforms static content into a visually compelling narrative that keeps customers coming back.
- Seamless Integration: Effortlessly integrates with all Shopify themes, ensuring smooth performance, fast load times, and compatibility with your store’s existing design.
- Fully Customizable: Tailor every aspect of the section to match your brand’s aesthetic. Adjust layouts, colors, image sizes, scroll speeds, and more to create a unique and polished look.
- Responsive Design: Optimized for all devices, providing a flawless experience whether customers are browsing on desktop, tablet, or mobile.
- Boost Engagement: Capture attention with dynamic scrolling effects that encourage visitors to explore your content and stay longer on your site.
- Easy Setup: User-friendly controls and intuitive setup options make it simple to add and manage your media, even with no coding experience.
This guide will walk you through everything you need to know to set up, customize, and optimize this feature for maximum impact.
1, Adding Tapita Scrolling Image Section
For instructions on how to add the scrolling image section to your store, please refer to the Getting Started guide for Tapita Theme Sections Builder.
2, Customizing Tapita Scrolling Image Section
After adding the Tapita Scrolling Image Section to your store, you can customize its content as follows within the Shopify Theme Editor.
2.1. Section header
Heading
Add the heading of this section.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Heading size
Select the size of the heading: Small, Medium, Large.
Subheading
Add the subheading of the section.
Assisting options and formats: AI Generated content, Bold format, Italic format, and Insert a link.
Description
Add the description of the section.
Assisting options and formats: AI Generated content, Heading types, Bold format, Italic format, Insert a link, Bulleted format, and Numbered format.
Alignment
Choose the alignment of the section header: Default (left) or Center.
Button label
Add text to the button label in the section header.
Button link
Enter the link destination for the button in the section header.
2.2. Scrolling settings
Image height
Adjust the height of the image display.
Enter a pixel number (e.g. 220 px).
Image spacing
Adjust the spacing between image items.
Enter a pixel number (e.g. 35 px).
Image border radius
Control the border corner rounding of the image display.
Enter a pixel number (e.g. 32 px or 0 px for no border).
Scroll speed
Control the speed of scrolling for the image items.
Enter a number. (e.g. 2)
Scroll sensitivity
Control the smoothness of the scrolling image.
Enter a number (e.g. 0.5)
2.3. Section color
Background
Control the color of the background.
Customize via color picker or enter a HEX code.
Background gradient
Control the gradient color of the background.
Choose a gradient color and customize it to your preference.
Foreground
Control the color of the subtitle.
Customize via color picker or enter a HEX code.
Title
Control the color of the title.
Customize via color picker or enter a HEX code.
Button background
Control the color of the button background.
Customize via color picker or enter a HEX code.
Button text
Control the color of the button text.
Customize via color picker or enter a HEX code.
Outline button
Control the color of the button’s outline.
Customize via color picker or enter a HEX code.
Outline output
Control the color of the title.
Customize via color picker or enter a HEX code.
Input, button radius
Control the border corner rounding of the input and button.
Enter a pixel number (e.g. 32 px or 0 px for no border).
2.4. Image item configuration
Image
Upload an image in the valid formats.
Link
Insert or search a link for the image (hyperlink).
Preload image
Toggle this ON to preload the image for the image to show instantly when visitors go to the page.
Now you know how to customize the Tapita Scrolling Image Section to effectively enhance your store’s visual appeal. If you have any questions or need assistance, don’t hesitate to reach out to Tapita support here support@tapita.io
Related Articles
Customizing the Scrolling Text Section
Scrolling Text Section Overview In Shopify stores, scrolling text sections are often used to draw attention to important announcements, promotions, or key messages by displaying text that continuously scrolls across the screen. Tapita's Scrolling ...Customizing the Image with Text Section
Image with Text Section Overview In Shopify stores, image with text sections are commonly used to create visually appealing content blocks that combine persuasive copy with compelling imagery. Tapita's Image with Text Section elevates this concept, ...Customizing the Testimonial Section
Testimonial Section Overview In Shopify stores, displaying customer testimonials is essential for building trust and social proof. Tapita's Testimonial Section provides a modern and visually appealing way to highlight these testimonials, enhancing ...Customizing the FAQ Section
FAQ Section Overview In Shopify stores, FAQ sections are commonly used to address customer inquiries, reduce support requests, and improve the overall customer experience by providing quick access to answers for frequently asked questions. Tapita's ...Customizing the Badges Section
Badges Section Overview In Shopify stores, badge sections are often used to highlight key product attributes, promotions, or trust signals to potential customers. These visual cues can draw attention to specific products and ultimately contribute to ...