Skip to content

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.

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

Add a background pattern

You can add Background pattern blocks inside any appropriate 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 Theme editor, select an appropriate section from the side menu.


    Background pattern blocks can be added into most sections. But Background pattern blocks cannot be added into all sections.

  2. Select Add block, and then choose Background pattern (block).

    For example, in the following image, a Background pattern block is added to a Rich text section.

    A Background pattern block added to a Rich text section in Theme editor.

Configure a background pattern

Shapes provides more than 25 patterns to use with a Background pattern block. Some of the available pattern types are displayed in the following image.

Examples of the pattern types available to a Background pattern block.

To configure a Background pattern block:

  1. In Theme editor, from the side menu, 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 dropdown to set a pattern for the block to use. Refer to the previous image for a list of available pattern types.
ColorSelect the Color dropdown to set a color for the block (pattern). 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 6 and 600.
OpacityAdjust the Opacity slider to set the visibility of the block. The slider ranges from 0 to 100 percent.
Animation > Enable parallaxSelect the checkbox Enable parallax to turn on/ 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 a speed for the parallax animation (if enabled). The slider ranges from 1 to 10.
Remove blockSelect Remove block to delete the block from the section.