This guide describes setting up a Pattern marquee section.
Use the section to display an area, on a page, with an animated moving/scrolling pattern.
The previous video shows a (default) Pattern marquee section on a store's Contact page. The section is displayed above the Footer section. An animation moves the section's triangular pattern from left to right. The section menu is displayed on the left. To increase the size of the pattern, the Pattern size slider is adjusted from
Set up a pattern marquee section
To set up a Pattern marquee section:
Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a Pattern marquee section.
The section can be added into any page, except Checkout and Giftcard pages. To the section into the current page, select Add section > Pattern marquee. Refer to Shopify help: Add a section
From the side menu, select Pattern marquee.
Select a setting described in the following table.
|Type||Use 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.|
|Color||Use the Color dropdown to set the pattern to use the section's Text, Accent 1, Accent 2, Card, Background, or Background gradient color.|
|Pattern size||Adjust the Pattern size slider to set the size of the pattern between |
|Speed||Adjust the Speed slider to set a speed for the section's animation between |
|Direction||Select the Direction radio buttons to set the section's animation to move from Right to left or Left to right.|
|Color > Color scheme||Use the Color scheme dropdown to set the section's color scheme to Primary, Secondary, Tertiary, or Quaternary. Refer to Colors.|
|Color > Use gradient for background||Select the checkbox Use gradient for background to turn on/off using a gradient as the section's background.|
|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.|