Appearance

Background shape ​

This guide describes the Background shape block that's included in some of the Shapes theme sections. Use the block to add a stylistic shape to a section.

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

Add a background shape ​

You can add Background shape blocks to any supported section.

For example, in the following image, a Rich text section contains a Background shape block.

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

To add a Background shape block to a section:

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

    Note

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

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

Types of background shapes and blobs ​

Shapes theme provides the following for use with a Background shape block:

  • 70 types of background shape
  • 10 blob types. Select a blob type by adjusting the block setting's Blob type slider.

For a list of available background shapes and blob types, refer to Background shapes.

Configure a background shape ​

To configure a Background shape block:

  1. In the Theme editor, from the side menu, select a section that contains a Background shape block.

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

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

Block setting nameDescription
ShapeUse the Shape option to select a shape for the block to use.
Blob typeAdjust the Blob type slider to select the type of blob for the block to use. To use this option, set the Shape option to Blob.
SizeAdjust the Size slider to set a size for the shape between 25 and 300. Background shapes that overflow the size of the section are cropped, which is a fun way to create interesting effects!
OpacityAdjust the Opacity slider to set the visibility of the block between 0 and 100 percent.
BlurAdjust the Blur slider to set the intensity of the blur effect applied to the block between 0 and 500 pixels. A higher value applies more blur to the shape, and creates a gradient-type effect.
Position > Horizontal positionAdjust the Horizontal position slider to position the block along the x-axis in the section. The slider ranges from 0 to 100 percent.
Position > Vertical positionAdjust the Vertical position slider to position the block along the y-axis in the section. The slider ranges from 0 to 100 percent.
Position > RotateAdjust the Rotate slider to rotate the block in the section between -90 and 90 degrees.
Animation > Enable parallaxUse the Enable parallax option to turn on or off a parallax animation effect. If enabled, the block's shape 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.
Color > Color schemeUse the Color scheme picker to select a color scheme for the block. Refer to Colors.
Color > Background colorUse the Background color option to set a color for the block's background. Set the block's background to use the section color scheme's Text, Accent 1, Accent 2, Card, Background, or Gradient color.
Remove blockSelect Remove block to delete the block from the section.