Appearance
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.
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.
Fit-to-image shapes
Shapes theme includes Fit-to-image shape-types.
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.
Other shapes
In addition to Fit-to-image shapes, Shapes theme provides the "other" shapes shown in the following image.
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.
Blob shape
Shapes theme includes Blob shape-types.
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.
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.
