> For the complete documentation index, see [llms.txt](https://docs.magecomp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.magecomp.com/magento-2-custom-product-designer-extension/frontend-customize-product-design.md).

# Frontend Customize Product Design

To customize a product, click the “Customize it” button on the product page at the front end.

<figure><img src="/files/xZ4MwxwJqlFOyqEeEjYh" alt=""><figcaption></figcaption></figure>

You can change the product image from here.

<figure><img src="/files/AGDXPaleg3wKgfFou0sC" alt=""><figcaption></figcaption></figure>

**Add Image**

To add images to the product, use the option shown in the below image.

<figure><img src="/files/LcCVeLDMQN1N0xcnvck6" alt=""><figcaption></figcaption></figure>

**Add Text**

To add text to the product, use the option shown in the below image.

<figure><img src="/files/wNqMEeghI2mDL7O8g9b1" alt=""><figcaption></figcaption></figure>

After you enter your text, you can change its position, edit it, delete it, and even add styling options.

<figure><img src="/files/Zg39BDULzxCBz0ZvAgDU" alt=""><figcaption></figcaption></figure>

You can change the text color, background color, and font style.

<figure><img src="/files/hSQkT8Jej3ofpExGbKpd" alt=""><figcaption></figcaption></figure>

**Add Image from Library**

To add ready-made images from the library, use the option shown in the below image. You can choose from a wide variety of categories.

<figure><img src="/files/O5aSUKdFIJiagvVzUd99" alt=""><figcaption></figcaption></figure>

**Layers**

You can manage the product editing with layers.

<figure><img src="/files/vEhS7UPWAYl9uTma9beR" alt=""><figcaption></figcaption></figure>

**Social Share**

To share the custom image, use the option shown in the below image.

<figure><img src="/files/8tYvuIoV6ZZcvA8VrwRc" alt=""><figcaption></figcaption></figure>

It provides options like Pinterest, Twitter, and Facebook.

<figure><img src="/files/dmveZ7wEtJm0mpl8XhhJ" alt=""><figcaption></figcaption></figure>

**Preview**

To preview your custom image design, use the option shown in the below image.

<figure><img src="/files/L17JDSGDkhAyesKmn6AS" alt=""><figcaption></figcaption></figure>

**Download**

To download your custom image, use the option shown in the below image.

<figure><img src="/files/DWxuZvyCZ6HaQWCrUR1u" alt=""><figcaption></figcaption></figure>

**Print**

To print your custom image, use the option shown in the below image.

<figure><img src="/files/ezp9wXKmgDtZHVn5XsGW" alt=""><figcaption></figcaption></figure>

**Clear All**

To clear the product editing altogether, use the option shown in the below image.

<figure><img src="/files/MenjyCtx1OIR5VIsz4Zk" alt=""><figcaption></figcaption></figure>

**Close**

Use the close button to exit the product editing without saving.

<figure><img src="/files/Im8zCbKIfAWrPhrYTmlo" alt=""><figcaption></figcaption></figure>

**Save**

Click the save button to apply changes and go back to the product page, as shown in the below image.

<figure><img src="/files/1R6nTv5M9ZhSstbzpXlu" alt=""><figcaption></figcaption></figure>
