Pin slider settings
This guide describes the Pin Slider section. The banner can use either an image or a video as the background.
Within the Pin Slider, you can add Content Container and Countdown Container blocks positioned on top of the media. The Countdown Container block is used to display countdown elements, while the Content Container block can include a subheading, heading, text, button, and a product horizontal card.
The background image or video scales smoothly as the user scrolls, creating a dynamic visual effect. Behind the background media, scrolling text moves continuously and remains visible while the image or video is scaled. As the section reaches its full width during scrolling, the text gradually disappears, creating a seamless transition to the next section. When the user scrolls back, the animation plays in reverse.
Demo example:
How to access the Pin slider section
Access this section through the theme customizer:
- Navigate to Online Store > Themes
- Select “Customize” on your active theme
- On any theme template, click “Add section”
- Search and select “Pin slider”
Note: Section cannot be added to the Password page.
To insert a new section between existing ones, follow the steps in the article "Sections and blocks" and locate the section titled “How to add a section”.
How to configure the Pin slider section
Basic Components
The “Pin slider” section consists of two primary components:
- General settings – These control the overall settings of the section.
- Block – Each block has its own individual settings.
Available block types include:
- Content container include its own blocks: Subheading, heading, text, button, spacer, divider and product card horizontal
- Countdown container
- Spacer
General settings
Scrolling text
| Setting | Description |
| Scrolling text | Enter scrolling text that appears behind the image. At first, the image is small and the text is visible. As the user scrolls, the image scales up until it reaches the full screen width, causing the scrolling text to disappear. When the user moves to the next section, the text is no longer visible. When scrolling back to this section, the animation works in reverse. |
Heading, subheading, caption, and paragraph style
| Setting | Description |
| Preset |
In Theme Settings → Typography → Fonts, you can set font settings for Heading, Caption, and Paragraph. Choose which style to apply in this block.
|
| Font |
In Theme Settings → Typography → Fonts, you can select a font family from the list and choose the font weight at the end of the list separately for Heading, Body, and Accent text. Based on these settings, each block allows you to choose which font style is applied.
|
| Color |
Each color scheme includes Heading, Text, and Accent color settings. Use this dropdown to select which color to apply. The available options may vary depending on the selected block color scheme.
|
| Text style |
Choose text style for preset:
|
| Marquee speed | Set how many seconds it takes for the scrolling text to complete one loop. |
| Item spacing | Adjust the space between each repeated scrolling text item. |
Media
| Setting | Description |
| Image | Upload an image that appears small at first. As the user scrolls with the mouse, the image gradually becomes larger until it expands to the full width of the section. |
| Video | Upload a video that displays in this section. The video automatically plays and scales as the user scrolls, creating an interactive visual effect. |
Layout
| Setting | Description |
| Color scheme |
Apply color scheme for the pin slider section from the available color schemes list. Read 'Color scheme' article to learn more about color schemes. |
| Content position |
Choose the position of the content within the section: Top: Left, Center, Right Middle: Left, Center, Right Bottom: Left, Center, Right |
| Content position mobile |
Select the content position on mobile devices:
|
| Content alignment |
Choose how the content is aligned:
|