> ## Documentation Index
> Fetch the complete documentation index at: https://pitchprint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Add a Placeholder image for Mask Shapes

> Upload a guide image that tells customers to click a clickable mask shape and drop their own picture inside it.

This doc is a guide on how to add a placeholder image for a mask shape (also known as a clickable mask.)
Have a look at the following doc for more on clickable mask: [How to create templates using SVG shapes](/docs/tutorial/how-to-create-templates-using-svg-shapes)
Demo store: [Photo prints demo product](https://wp.demo.pitchprint.io/product/photo-prints/)

Now that you have a better understanding, I can show you how to change the placeholder image.
So why would you want a placeholder image?
Placeholder images function as a guide for your clients to know to click on the shape to place an image inside.
Below is an example of our placeholder image:

<Frame>
  <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/5c5154782c7d3a66e32dc9d4/file-owH1muOFWC.png" alt="Default PitchPrint placeholder image shown inside a mask shape" />
</Frame>

Steps:

<Steps>
  <Step title="Source a placeholder image">
    You will have to source a image or design you'd like to use, I'd recommend PNG files.
    **(Attached are 2 sample placeholder images)**

    <Frame>
      <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/5c5abf8f042863543ccca18d/file-7jNzu8ksBh.png" alt="Sample placeholder image you can download and use" />
    </Frame>

    <Frame>
      <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/5c5abf0d042863543ccca187/file-ZBhHlGzplD.png" alt="Second sample placeholder image you can download and use" />
    </Frame>
  </Step>

  <Step title="Find the Mask upload indicator setting">
    Go to the PitchPrint Admin Settings: [Settings page](https://admin.pitchprint.io/settings)
    Scroll until you see the Mask upload indicator setting (it's in the editor section.)

    <Frame>
      <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/5c5157642c7d3a66e32dc9db/file-3lilJi7TWr.png" alt="Mask upload indicator setting in the editor section of the admin settings page" />
    </Frame>
  </Step>

  <Step title="Upload your image">
    Click the 'Change Picture' button it will open a browser window, find your image and upload it.
  </Step>

  <Step title="Save the settings">
    Lastly click the 'Save Settings' button (top right.)
  </Step>
</Steps>

Make sure to test it from your store front.

## Related articles

<CardGroup cols={2}>
  <Card title="How to create a clickable mask" icon="mask" href="/docs/tutorial/how-to-create-a-clickable-mask">
    Turn a shape into an image placeholder customers can click to insert images.
  </Card>

  <Card title="Custom Mask" icon="scissors" href="/docs/tutorial/custom-mask">
    Use any shape as a clipping area to trim content in the final PDF.
  </Card>

  <Card title="How to create an SVG for use as a Mask" icon="vector-square" href="/docs/tutorial/how-to-create-an-svg-for-use-as-mask">
    Prepare a single-path SVG that can be used as a photo mask.
  </Card>

  <Card title="How to create templates using SVG shapes" icon="shapes" href="/docs/tutorial/how-to-create-templates-using-svg-shapes">
    Build a design template from an SVG shape, such as a phone case.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.