# Style images with shapes

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

For example, the following image shows different shapes applied to items in a store’s product grid. From left to right, the shapes are Quatrefoil, Triple pill, and Scalloped circle 4.

Example of different shapes applied to a store's product images.

Shapes theme includes customization options for applying a variety of shapes to images. Most sections that display media include the option to apply shapes to images. Shapes theme provides more than 40 different image shapes to use throughout your store!

Note

This guide describes displaying images as shapes. To apply styles to media, like borders and shadow effects, refer to Media.

# Select a shape

In Theme editor, inside any section with an Image shape dropdown, you can select a shape to apply to images. The dropdown is available to most sections in the Shapes theme.

The Image shape dropdown in Theme editor.

# Fit-to-image shapes

Shapes theme includes Fit-to-image shape-types.

Shapes that will fit-to-image

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

Fit-to-image shape name Description
Default Displays media according to the defaults set in Theme Settings.
Ellipse Rounds all the corners of an image to form an ellipse.
Pill Rounds corners on the left and right side of an image to form a pill shape.
Archway Rounds the top of an image 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 images.

The Ellipse, Pill, and Archway Fit-to-image shape-types applied to a square, portrait, and landscape image.

# Other shapes

In addition to Fit-to-image shapes, Shapes theme provides the “other” shapes shown in the following image.

All non-Fit-to-image shape-types.

Other shapes are categorized as Basic, Polygons, Circular, Square, and Miscellaneous. Applying any of these shapes crops the image into the selected shape. For example, in the following image, a Pentagon shape is applied to a square, portrait, and landscape image.

Note

These shapes use a square as their base. For minimal cropping, these shape types are recommended for square images.

A Pentagon shape is applied to a square, portrait, and landscape image.

# Blob shape

Shapes theme includes Blob shape-types.

Different types of blob shapes.

Blob shapes crop an image into a blob shape. Certain sections, like Image with text and Shape slideshow sections, provide a Blob type slider. Adjust the slider to select the type of blob (shape) to use inside the section.

blob type setting

If you use a Blob shape inside a section that contains a group of items, like 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, the Muted preset applies different blob types to each item in the product grid.

Blobs used in product grid.