# 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 shows a Rich text section in Theme editor. In the video, a Background pattern block is added into the section. Then, inside the block settings menu:

  • The Types dropdown is used to change the block’s background pattern type.
  • To set a size for the block’s pattern, the Pattern size slider is adjusted.
  • The pattern’s color is set using the Color dropdown.
  • To apply a scroll animation to the pattern, the Enable parallax checkbox setting is enabled.

# 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 to most sections. These blocks cannot be added to 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 Background pattern (block).

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

Block setting name Description
Type Use the Type dropdown to set a pattern for the block to use. Refer to the previous image for a list of available pattern types.
Color Select the Color dropdown to set a color for the block (pattern). Set the block to use the section color scheme’s Text, Accent, Card, Background or Gradient color.
Pattern size Adjust the Pattern size slider to set the size of the pattern between 6 and 600.
Opacity Adjust the Opacity slider to set the visibility of the block. The slider ranges from 0 to 100 percent.
Animation > Enable parallax Select 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 speed Adjust the Parallax speed slider to set a speed for the parallax animation (if enabled).
Remove block Select Remove block to delete the block from the section.