Appearance

Scrolling pattern ​

This guide describes setting up a Scrolling pattern section.

Use the section to display an area, on a page, with an animated moving/scrolling pattern.

The previous video shows a Scrolling pattern section on a store page. An animation is applied to the section's triangular pattern. Theme editor's section menu is displayed in the upper left. To increase the size of the pattern, the menu's Pattern size slider is adjusted from 12px to 24px (pixels).

For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks.

Set up a scrolling pattern section ​

To set up a Scrolling pattern section:

  1. Go to Customize theme.

    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 Checkout and Giftcard pages. To add the section to the current page, select Add section > Scrolling pattern. Refer to Shopify help: Add a section.

  2. From the side menu, select Scrolling pattern.

    The Scrolling pattern section selected in Theme editor.

  3. Select a setting described in the following table.

Setting nameDescription
TypeUse the Type dropdown to set a pattern to display inside the section. Shapes theme provides more than 20 patterns, including lines, waves, shapes, and stripes.
ColorUse the Color dropdown to set the pattern to use the section's Text, Accent 1, Accent 2, Card, Background, or Background gradient color.
Pattern sizeAdjust the Pattern size slider to set the size of the pattern between 6px and 42px (pixels).
SpeedAdjust the Speed slider to set a speed for the section's animation between 50 and 200 (seconds).
DirectionSelect the Direction radio buttons to set the section's animation to move from Right to left or Left to right.
Color > Color schemeUse the Color scheme dropdown to set the section's color scheme to Primary, Secondary, Tertiary, or Quaternary. Refer to Colors.
Color > Use gradient for backgroundSelect the checkbox Use gradient for background to turn on/off using a gradient as the section's background.
Custom CSSSelect 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 sectionSelect Remove section to delete the section from the current page.