Add custom shapes ​

This guide describes how to add custom shapes to your store.

Shapes theme includes over 70 different shapes and 20 blobs for setting a shape that's applied to the media item tiles displayed on your store's pages. Refer to Style images and videos with shapes. You can also add your own custom shapes!

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

Add a custom shape ​

1. Ensure your shape is inside a 200x200px (pixels) square.

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

   In this example we use Figma. The steps are similar for other graphics editors.

   

2. 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.

   

3. Export the SVG.

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

   

4. Open the SVG in a code editor, text editor, or notepad.

   The SVG code should be similar to the following code.

   html

   <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>

   <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>

5. Copy the data from inside the <path> element.

   The data starts after d=" and ends before " fill=".

   In the previous example, the following data is copied.

   html

   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

   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 your custom shape.

6. In the Shopify Code editor, navigate to the Snippets folder for your theme.

7. From the sidebar, select the snippet file shape-defs.liquid.

   Note how the file contains code that defines coordinates for every shape included in the Shapes theme. These coordinate definitions are similar to the code you copied previously.

   

8. Inside the shape-defs.liquid file, locate the line that contains case shape.

   

9. Add a new line below the case shape line.

10. On the new line, enter when 'custom_shape_name'.

    Replace custom_shape_name with a name to reference the coordinates for your custom shape. This name must be lowercase, and with underscores instead of spaces.

11. Create a second new line, below the line you added previously.

12. On this second new line, enter echo 'SHAPE COORDINATES COPIED FROM SVG FILE'.

    Replace SHAPE COORDINATES COPIED FROM SVG FILE with the coordinates you copied previously from your SVG file.

13. Verify that the updated line contents of the file shape-defs.liquid are similar to the following.

    html

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

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

    For example, the following code adds the custom shape named quatrefoil into the file shape-defs.liquid, with coordinates.

    html

    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'

    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'

    In the following image, the previous code example is added into the file shape-defs.liquid inside the Code editor.

    

14. Select Save to save your file changes.

Make your custom shape available for use ​

Many of the Shapes theme's page templates and files provide a setting for choosing the particular shape that's applied to the media item tiles displayed on your store's pages. For example, this setting is available as an Image shape dropdown in Theme Settings > Product tiles. To use this setting to apply your custom shape to media items, add your custom shape into the setting's list of options.

As an example, the following steps add a custom "quatrefoil" shape to the list of Image shape dropdown menu items in Theme Settings > Product tiles. To make your custom shape available for selection elsewhere, repeat these steps for every custom shape and for each Shapes theme file that contains a corresponding setting.

1. In the Shopify Code editor, navigate to the Config folder for your theme.

2. From the sidebar, select the settings_schema.json file.

   

3. Inside the file, locate the product_tile_media_shape setting definition.

   

4. Note how the shape's settings definition has the following key/value data:

   json

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

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

   Key name	Description
   value	This is the value that Liquid reads, in the code. Use this key/value to add the lowercase name that you used previously for the custom shape name.
   label	This key/value defines what's displayed in the Theme editor settings menu for selecting the shape.
   group	Use this key/value to create groups of custom shapes inside the Theme editor settings menu. This can also be left blank.

5. To add your custom shape into the list of setting options, after the "options: [ line, enter key/value data for your custom shape.

   For example, the following key/value data adds a custom shape named quatrefoil to the setting options.

   json

   {
     "value": "quatrefoil",
     "label": "Quatrefoil",
     "group": "Custom"
   },

   {
     "value": "quatrefoil",
     "label": "Quatrefoil",
     "group": "Custom"
   },

   In the following image, the previous key/value data is added into the settings_schema.json file, in the Code editor, for the custom quatrefoil shape.

   

6. Select Save to save your file changes.

7. Return to the Theme editor, and verify that your custom shape can now be selected from the appropriate settings menu.

   For example, in the following image, the custom Quatrefoil shape is listed as a selectable dropdown option in Theme Settings > Product tiles > Image shape.

   

8. Repeat Steps 1 - 8 to add your custom shape as a selectable option to other files. Restart from the beginning of this guide to add a new custom shape.