Appearance

Add custom shapes ​

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

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

Shapes theme includes 40 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.

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

    Shape defs snippet in Code editor.

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

    The Case shape line inside the Shape defs snippet file in Code editor.

  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.

    Code for an example custom shape added into the Shape defs file in 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.

    The settings_schema.json file selected in the Code editor.

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

    The Product_tile_media_shape definition in the settings_schema.json file selected in the Code editor.

  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 nameDescription
    valueThis 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.
    labelThis key/value defines what's displayed in the Theme editor settings menu for selecting the shape.
    groupUse 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.

    An example custom shape definition added into the settings_schema.json file in the Code editor.

  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.

    An example custom shape in the Theme settings_menu in Theme editor.

  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.