Appearance
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 the images and videos displayed throughout your store. Most sections that display image and video media include the option to apply shapes. Shapes theme provides more than 40 different shapes that you can apply to your store's media!
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 Theme editor, inside any section with an Image shape or Video shape dropdown, select a shape to apply to the section's images or videos. Shapes theme provides the dropdown in most sections that display media.
Fit-to-image shapes
Shapes theme includes Fit-to-image shape-types.
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 shape name | Description |
|---|---|
| Default | Displays media according to the defaults set in Theme Settings. |
| 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 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 "other" shapes crops 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
"Other" shapes use a square as their base. For minimal cropping, these shape types are recommended for displaying square images and videos.
Blob shape
Shapes theme includes Blob shape-types.
Blob shapes crop an image or video into a blob shape. Certain sections, like 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 the section's images or videos.
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.
