Style images and videos with shapes

This guide describes how to apply a shape to an image or video.

Use Shapes theme to apply customizable shapes to images and videos throughout your store. More than 70 shapes are available, and most sections and blocks that display media include the option to apply them.

The previous video demonstrates adding a shape to an image.

Note

This guide describes applying shapes to media. To add styles to media, like borders and shadow effects, refer to Media.

Select a shape

In the Theme editor, inside a section or block with an image or video Shape option, select a shape to apply to the image or video. Shapes theme provides the option to specify a shape on most sections and blocks that display media.

Fit to image shapes

Shapes theme includes Fit to image shapes.

Fit to image shapes do not crop image or video media items. To avoid cropping portrait or landscape media, apply a Fit to image shape described in the following table.

Fit to image shapes	Description
Default	Displays media according to the default media style for images and video you set in the Theme editor's Theme settings > Media menu.
Ellipse	Rounds all the corners of a media item to form an ellipse.
Pill	Rounds corners on the left and right side of a media item to form a pill shape.
Archway	Rounds the top of a media item to form an archway shape.

In the following image, the Ellipse, Pill, and Archway Fit to image shapes are applied to a square, portrait, and landscape image. The results show how each Fit to image shape applies to your store's media items.

Other shapes

In addition to the Fit to image shapes, Shapes theme provides other shape options. Some of these additional shape options are shown in the following image. For a comprehensive list of all shape options, open a section or block that supports the Shape option in the Theme editor.

Additional shape options are categorized as Basic, Polygons, Stars, Scalloped circles, Square, and Miscellaneous. Applying any of these additional shapes will crop a media item into the selected shape. For example, in the following image, a Pentagon shape is applied to a square, portrait, and landscape image.

Note

Shapes that are not Fit to image shapes use a square as their base. For minimal cropping, these shapes are recommended for displaying square images and videos.

Blob shape

Shapes theme includes Blob shapes.

Blob shapes crop an image or video. Certain sections and blocks, such as the Image with text, Shape carousel, and Video with text sections, provide a Blob type slider. Adjust the slider to select the type of Blob shape to apply to an image or video.

If you use a Blob shape inside a section that contains a group of items, such as a Product grid or Text columns with images section, Shapes theme applies different Blob types to each item automatically. For example, in the following image, different Blob types are applied to each item in a product grid section.