# Add custom shapes

Note

This is an advanced customization guide that requires editing theme code. These actions are not supported by Switch Themes or Shopify. We recommend hiring an expert if you’re not comfortable editing Liquid, HTML, CSS, and Javascript.

Before you customize a theme, make a backup. Refer to Shopify help: Duplicating themes (opens new window).

This guide describes how to add custom shapes.

For setting a shape for images, Shapes theme includes 40 different shapes and 20 blobs. Not enough? No worries, you can always add your own!

To add custom shapes, you must be comfortable with SVGs and editing code. Otherwise, contact a Shopify expert.

# Add a custom shape

Ensure your shape is inside a 200x200px square.

The 200x200px square provides the custom shape’s boundaries, and it must be this size.

In this example we use Figma (opens new window), but the steps should be similar for any graphics editor.
Make sure the shape object itself is no greater than 195px wide or 195px high.

This ensures that any borders applied to the shape are not cropped.
Export the SVG.

Ensure you export the 200x200px square artboard, and not just the shape object directly.

Open the SVG in any Code editor, Text editor, or Notepad.

It should be similar to the following:

<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M198 60.5217C198 29.4348 172.565 4 141.478 4C125.37 4 110.674 10.7828 100.5 21.8048C90.3263 10.7828 75.6304 4 59.5217 4C28.4348 4 3 29.4348 3 60.5217C3 76.0652 9.21692 89.913 19.1082 100.087C9.21692 110.261 3 124.109 3 139.652C3 170.739 28.4348 196.174 59.5217 196.174C75.63 196.174 90.3261 189.391 100.5 178.369C110.674 189.391 125.37 196.174 141.478 196.174C172.565 196.174 198 170.739 198 139.652C198 124.109 191.783 110.261 181.892 100.087C191.783 89.9133 198 76.0652 198 60.5217Z" fill="black"/>
</svg>

Copy the data inside the <path> element, that starts after d=" and ends before fill".

In the previous example, the following is copied:

M198 60.5217C198 29.4348 172.565 4 141.478 4C125.37 4 110.674 10.7828 100.5 21.8048C90.3263 10.7828 75.6304 4 59.5217 4C28.4348 4 3 29.4348 3 60.5217C3 76.0652 9.21692 89.913 19.1082 100.087C9.21692 110.261 3 124.109 3 139.652C3 170.739 28.4348 196.174 59.5217 196.174C75.63 196.174 90.3261 189.391 100.5 178.369C110.674 189.391 125.37 196.174 141.478 196.174C172.565 196.174 198 170.739 198 139.652C198 124.109 191.783 110.261 181.892 100.087C191.783 89.9133 198 76.0652 198 60.5217Z

Note

The copied data might seem like random numbers - but these are the coordinates that tell the theme how to make the shape.

In the Shopify Code editor, navigate to the Snippets folder for your theme.
From the sidebar, select the shape-defs snippet.

Note how the file includes all the coordinates for every shape - similar to the code you copied previously.
On the first line, enter a name to reference the coordinates.

This name should be in all lowercase with underscores instead of spaces.

On the second line, paste the coordinates you copied.

when 'shape_name'
echo 'SHAPE COORDINATES FROM SVG FILE'

Using the previous example, the following is added into the file:

when 'quatrefoil'
echo 'M198 60.5217C198 29.4348 172.565 4 141.478 4C125.37 4 110.674 10.7828 100.5 21.8048C90.3263 10.7828 75.6304 4 59.5217 4C28.4348 4 3 29.4348 3 60.5217C3 76.0652 9.21692 89.913 19.1082 100.087C9.21692 110.261 3 124.109 3 139.652C3 170.739 28.4348 196.174 59.5217 196.174C75.63 196.174 90.3261 189.391 100.5 178.369C110.674 189.391 125.37 196.174 141.478 196.174C172.565 196.174 198 170.739 198 139.652C198 124.109 191.783 110.261 181.892 100.087C191.783 89.9133 198 76.0652 198 60.5217Z'

Add the code to the shape-defs.liquid file, after case shape.
Save the file.
The media shape setting is available in many templates and files.

If you want your custom shape to be available everywhere, repeat the following steps for every file that contains the shape setting.

In this example, we’ll only edit the image shape setting in Theme Settings > Product Tiles.
In the Shopify Code editor, navigate to the Config folder for your theme.
From the sidebar, select the settings_schema.json file.
Scroll down to the product_tile_media_shape setting.

Note how each shape has the following data:

Key	Data
value	This is the value liquid reads in the code. Use this to add the lowercase name that you used previously.
label	This is what’s shown in the Theme editor for selecting the shape.
group	Use this if you want to group the item in the dropdown. This can be left blank.

The following is an example of a shape option:

{
  "value": "shape_name",
  "label": "Shape name",
  "group": "Group name"
},

To add your new custom shape to the setting options, add the following code after the "options: [ line.
```
{
  "value": "quatrefoil",
  "label": "Quatrefoil",
  "group": "Custom"
},
```
Select Save.
Return to the Theme editor. Your custom shape can now be selected from the shape setting.
Repeat Steps 12 - 19 to add the shape option to other files. Start from Step 1 to add a another shape.

← Gift card Add custom icons →