# 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

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

    This shows the 200px x 200px artboard.
  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.

    This shows the shape svg inside the artboard at a width or height no greater than 195px
  3. Export the SVG.

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

    This shows the export preview of the SVG.
  4. 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>
    
  5. 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.

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

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

    Shape defs snippet
  8. On the first line, enter a name to reference the coordinates.

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

  9. 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'
    
  10. Add the code to the shape-defs.liquid file, after case shape.

    Shape defs snippet
  11. Save the file.

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

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

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

    Schema file
  15. Scroll down to the product_tile_media_shape setting.

    Schema file
  16. 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"
    },
    
  17. To add your new custom shape to the setting options, add the following code after the "options: [ line.

    {
      "value": "quatrefoil",
      "label": "Quatrefoil",
      "group": "Custom"
    },
    
    Schema file
  18. Select Save.

  19. Return to the Theme editor. Your custom shape can now be selected from the shape setting.

    Schema file
  20. Repeat Steps 12 - 19 to add the shape option to other files. Start from Step 1 to add a another shape.