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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.magecomp.com/magento-2-custom-product-designer-extension/frontend-customize-product-design.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
