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 and blocks that display image and video media include the option to apply shapes. Shapes theme provides more than 70 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 a section or block with an Image shape or Video shape option, select a shape to apply to the image or video. Shapes theme provides the option to specify a shape in most sections and blocks 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. Some of these other 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 Theme editor.
The additional "other" 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
"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 and blocks, 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 an image or video.
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, different blob types are applied to each item in the product grid.
