Appearance
Scrolling pattern ​
This guide describes the Scrolling pattern section.
For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks.
Configure the Scrolling pattern section ​
To configure your Scrolling pattern section:
Go to Customize theme.
In Theme editor, at the top of the page, use the dropdown to select a page that contains a Scrolling pattern section.
Note
The section can be added into any page, except Giftcard and Customer pages. To add the section into the current page, select Add section > Scrolling pattern. Refer to Shopify help: Add a section.
From the side menu, select Scrolling pattern.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Type | Use the Type options to set a pattern to display inside the section. Shapes theme provides more than 20 patterns, including lines, waves, shapes, and stripes. |
| Color | Use the Color options to select Text, Accent 1, Accent 2, Card, Background or Background gradient. |
| Pattern size | Adjust the Pattern size slider to set the size of the pattern between 6px and 42px (pixels). |
| Speed | Adjust the Speed slider to set a speed for the section's animation between 50 and 200 (seconds). |
| Direction | Use the Direction options to select Right to left or Left to right. |
| Color > Color scheme | Use the Color scheme selector to select a color scheme. |
| Color > Theme settings (link) | Follow the Theme settings link to open Theme editor's Color theme settings. Use the settings to edit the theme colors for your entire store. |
| Color > Use gradient for background | Set the Use gradient for background checkbox to on or off. |
| Theme settings | If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu. |
| Custom CSS | Select Custom CSS. In the box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS. |
| Remove section | Select Remove section to delete the section from the current page. |