Appearance

Background pattern ​

This guide describes the Background pattern block that's included in some of the Shapes theme sections.

Use the block to add a stylistic pattern as a background to a section. Shapes provides more than 40 patterns to use with a Background pattern block. For a list of available pattern types, refer to Background patterns.

The previous video demonstrates adding a Background pattern to a section.

Add a background pattern ​

You can add Background pattern blocks to any supported section. For example, in the following image, a Rich text section contains a Background pattern block.

An example of a Background pattern block inside a Rich text section on a store page.

To add a Background pattern block to a section:

  1. In the Theme editor, select a supported section from the side menu.

    Note

    Background pattern blocks can be added to most sections, but not all sections.

  2. Select Add block, and then choose the Background pattern block.

Configure a background pattern ​

To configure a Background pattern block:

  1. In the Theme editor, select a section that contains a Background pattern block.

  2. Expand the section menu, and then select a Background pattern block.

  3. Apply a block setting described in the following table.

Block setting nameDescription
TypeUse the Type option to select a pattern for the block to use.
ColorUse the Color option to set a color for the block. Set the block to use the section color scheme's Text, Accent 1, Accent 2, Card, Background, or Gradient color.
Pattern sizeAdjust the Pattern size slider to set the size of the pattern between 8 and 600 pixels.
OpacityAdjust the Opacity slider to set the visibility of the block between 0 and 100 percent.
Animation > Enable parallaxUse the Enable parallax option to turn on or off a parallax animation effect. If enabled, the block's pattern scrolls slower than the rest of the page.
Animation > Parallax speedAdjust the Parallax speed slider to set the speed for the parallax animation between 1 and 10. To use this option, turn on the Enable parallax option.
Remove blockSelect Remove block to delete the block from the section.