# Add and edit elements

Elements are images, text, buttons, shapes, and other details that make up your page design.

## Add elements to your page 

{% hint style="success" %}
**Steps:**

1. Click **Add elements** on the left side of the Editor, or press **E**.
2. You can scroll up and down, and browse the library to view elements
3. Select an element and drag it onto the canvas to add it to your page design.
   {% endhint %}

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

{% hint style="success" %}
**What's next?**&#x20;

Once you have added an element, use the options and Inspector panel to edit and perfect it.
{% endhint %}

{% hint style="info" %}
To add an app block, check out [App extensions](/foxify-app/page-management/app-extensions.md)&#x20;
{% endhint %}

## Types of elements

* **Quick add**: Quickly find and add common elements like Heading, Text, Button, Image, etc.
* **Saved assets**: View and use your saved design (both elements and sections). See [how to save a design as an asset here](/foxify-app/foxstudio/page-customization/save-and-re-use-assets.md).

### **Basic elements**

<figure><img src="/files/eu94uB0y4t6dYHztTBH4" alt="" width="509"><figcaption></figcaption></figure>

<details>

<summary>Text</summary>

&#x20;Add different text elements, including:&#x20;

* Heading
* Paragraph
* Display text
* Text with shadow

:writing\_hand: *Learn more:*[Text](/foxify-app/foxstudio/add-and-edit-elements/text.md)

</details>

<details>

<summary>Buttons</summary>

Add buttons to let visitors interact with your page, including

* Solid button
* Button with border
* Rounded button
* Button with icon
* Button with underlined text

<figure><img src="/files/7pZPpL4utpiNCEutheYH" alt=""><figcaption></figcaption></figure>

:writing\_hand: *Learn more:* [Button](/foxify-app/foxstudio/add-and-edit-elements/button.md)

</details>

<details>

<summary>Media</summary>

Add 3 types of visuals:

* [Image](/foxify-app/foxstudio/add-and-edit-elements/image.md)
* [Video](/foxify-app/foxstudio/add-and-edit-elements/video.md)
* Before/After image

<figure><img src="/files/05fug5BOBsZraS7Zs5RG" alt="" width="461"><figcaption></figcaption></figure>

</details>

<details>

<summary>Decorative</summary>

Decorate your page with ***Shapes*** and ***Dividers***.&#x20;

<figure><img src="/files/BX9NqthCcVb1KKrnKWI2" alt="" width="462"><figcaption></figcaption></figure>

</details>

<details>

<summary>Promotions</summary>

Create and promote deals using a ***Countdown Timer*** and ***Marquee Text***.

<figure><img src="/files/xNPjzUgJcwzE7ACMZlPA" alt="" width="461"><figcaption></figcaption></figure>

:writing\_hand: *Learn more:*&#x20;

[Countdown timer](/foxify-app/foxstudio/add-and-edit-elements/countdown-timer.md)

[Marquee text](/foxify-app/foxstudio/add-and-edit-elements/marquee-text.md)

</details>

<details>

<summary>Forms</summary>

Embed a ***Newsletter Subscribe Form*** or a ***Contact Form*** to collect subscriptions.

<figure><img src="/files/SPm4KRWd2tM4P3x2UGMo" alt="" width="459"><figcaption></figcaption></figure>

:writing\_hand: *Learn more:*

[Subscribe form](/foxify-app/foxstudio/add-and-edit-elements/subscribe-form.md)

[Contact form](/foxify-app/foxstudio/add-and-edit-elements/contact-form.md)

</details>

<details>

<summary>List</summary>

Add ***List Items***, ***List Items with Icons***, or ***Social Links***.

<figure><img src="/files/zGVRIJCfPxlXqw0K33uH" alt="" width="465"><figcaption></figcaption></figure>

:writing\_hand: *Learn more:* [List items](/foxify-app/foxstudio/add-and-edit-elements/list-items.md)

</details>

### Advanced elements

<figure><img src="/files/F2aZuf4dFyF9g4buFn06" alt="" width="509"><figcaption></figcaption></figure>

* **Layout**: Embed a grid or a stack to organize elements more easily.

{% content-ref url="/pages/mertf5LuaItBTR8be3br" %}
[Cells and grids](/foxify-app/foxstudio/layout-and-styling/cells-and-grids.md)
{% endcontent-ref %}

<figure><img src="/files/vK5a9TgE3RFKujm2GIfU" alt="" width="464"><figcaption></figcaption></figure>

* **Slideshow**: Use pre-made slideshows for horizontal or vertical slides

<figure><img src="/files/4orccFxUjV2jWGwO3U7U" alt="" width="456"><figcaption></figcaption></figure>

* **Tabs and Collapsible**: Display content in an accordion layout.

{% content-ref url="/pages/zHUJCAEL7wXdIFHFEE6r" %}
[Tabs](/foxify-app/foxstudio/add-and-edit-elements/tabs.md)
{% endcontent-ref %}

{% content-ref url="/pages/ftMEdcwZi6N9BuYzv86p" %}
[Collapsible content](/foxify-app/foxstudio/add-and-edit-elements/collapsible-content.md)
{% endcontent-ref %}

<figure><img src="/files/xxboarZbAjSYTej0AybR" alt="" width="456"><figcaption></figcaption></figure>

* **Testimonials** and **Press**: Showcase social proof to build trust.

{% content-ref url="/pages/IcLAWo4lJBdNol7mtjXb" %}
[Testimonials](/foxify-app/foxstudio/add-and-edit-elements/testimonials.md)
{% endcontent-ref %}

<figure><img src="/files/Hunu1AdoZBymPjarrwmr" alt="" width="459"><figcaption></figcaption></figure>

### **Shopify elements**

<figure><img src="/files/UkGM8s1P2SeVvAWQ2lHO" alt="" width="479"><figcaption></figcaption></figure>

* **Single product**: Add product details and other product-related elements, including:
  * ***Product details*** - *Learn more:* [Product details](/foxify-app/foxstudio/add-and-edit-elements/product-details.md)
  * ***Product media***
  * ***Quantity input***
  * ***Pries***
  * ***Variants***
  * ***Description***
  * ***Add to cart***
  * ***Dynamic checkout***
  * ***Vendor***
  * ***Type***
  * ***Product meta***

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

* **Products**: Add a ***Product List***, ***Favourite Products***, or ***Related Products***.

<figure><img src="/files/l1LZYHGsvwxgpHkAgDpr" alt="" width="563"><figcaption></figcaption></figure>

* **Collections**: Add a collection display with featured images for ***Main Collection***, ***Collection List***, or ***Collection Tabs***.

<figure><img src="/files/NSNiOEYD2d3e2OTdVCO8" alt="" width="385"><figcaption></figcaption></figure>

* **Blog posts**: Create and add a stunning blog and attract traffic.

<figure><img src="/files/yoD7ZfFB63PlykLBgQg1" alt="" width="425"><figcaption></figcaption></figure>

* **Buy buttons**: Add Shopify functional buttons to your page - ***Add to cart button*** and [Dynamic checkout buttons](https://help.shopify.com/manual/online-store/dynamic-checkout).

<figure><img src="/files/6K84OpyFuGLE40oAO7XC" alt="" width="427"><figcaption></figcaption></figure>

## Delete an element from your page

You can delete an element you add to your site at any time.&#x20;

{% hint style="success" %}
**Steps:**

1. Click on the relevant element on the canvas.
2. In the Actions bar, click **Delete** or press **Delete** on your keyboard.
   {% endhint %}

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

{% hint style="info" %}
**Delete an element by mistake?**\
If you delete an element by mistake, you can easily undo this by clicking the **Undo** icon in the top bar of the Editor.

See more: [Undo & Redo](/foxify-app/foxstudio/editor-tools/undo-and-redo.md)
{% endhint %}


---

# 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.foxecom.com/foxify-app/foxstudio/add-and-edit-elements.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.