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.

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.

    Note

    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 40 patterns to use with a Background pattern block. For a list of available pattern types, refer to Background patterns.

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.
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 8 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.