# Add and edit elements

Elements are the building blocks of your Foxify pages — text, images, buttons, product grids, and more. Add them from the elements panel and customize each one in the Inspector panel.

## Add an element to your page

<Stepper>

<Step>

**Open Add elements**

Click **Add elements** in the left sidebar — or press **E**.

</Step>

<Step>

**Browse or search**

Scroll through the categories or use the search bar to find the element you need.

</Step>

<Step>

**Drag onto the canvas**

Drag the element onto your page. Once placed, click it to select it and edit its settings in the **Inspector panel** on the right.

</Step>

</Stepper>

Once added, use the Inspector panel's General, Design, and Animations tabs to configure and style the element.

*Learn more about the Inspactor panel:* [Inspector panel](https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/inspector-panel)

## Types of elements

<Cards>
<Card title="Quick add">

Shortcut grid of the most-used elements. Use when you know what you need and want to add it fast.

</Card>
<Card title="Save assets" subtitle="Your saved elements and sections. Drag directly onto the canvas to reuse them across pages." href="https://docs.foxecom.com/foxify-app/foxstudio/page-customization/save-and-re-use-assets" />
<Card title="App blocks" subtitle="Elements from installed Shopify apps and Foxify extensions. Install from Apps market first, then find them here." href="https://docs.foxecom.com/foxify-app/pages/app-extensions" />
</Cards>

### Basic elements

General-purpose building blocks for page content and layout.

<Cards>
<Card title="Text">

Headings, paragraphs, display text

</Card>
<Card title="Buttons">

CTAs, links, icon buttons

</Card>
<Card title="Media">

Images, videos, QR code, Before/After image

</Card>
<Card title="Decorative">

Shapes, Dividers

</Card>
<Card title="Promotions">

Countdown timer, Marquee text

</Card>
<Card title="Forms">

Subcribe form, Contact form

</Card>
<Card title="Lists">

List items, Social links

</Card>
</Cards>

### Advanced elements

More complex structural and interactive elements for richer page designs.

<Cards>
<Card title="Layout">

Grids and cells to organize elements

</Card>
<Card title="Navigation">

Menu and nav bar elements

</Card>
<Card title="Slideshow">

Pre-made slide layouts

</Card>
<Card title="Tabs &amp; Collapsible">

Display content in tabbed or accordion layouts

</Card>
<Card title="Testimonials &amp; Press">

Social proof elements — reviews, quotes, press logos

</Card>
</Cards>

### Shopify elements

<Cards>
<Card title="Product">

Individual product page elements, such as: Product details, media, price, variants, Add to cart, and so on.

</Card>
<Card title="Blog post">

Individual blog post page elements, such as: Post title, Post meta, Post image, and so on.

</Card>
<Card title="Product list">

Product list, Favorite products, Related products

</Card>
<Card title="Collections &amp; Blog">

Collection and blog listing displays

</Card>
<Card title="Buy buttons">

Add to card and Dynamic checkout buttons

</Card>
</Cards>

## Delete an element

<Stepper>

<Step>

Select the element

Click the element on the canvas to select it.

</Step>

<Step>

Delete it

In the actions bar above the element, click **Delete** — or press **Backspace / Delete** on your keyboard.

</Step>

</Stepper>

<Hint type="info">

**Deleted by mistake?**

Click the **Undo** icon in the top bar — or press **Ctrl + Z** (Windows) / **Cmd + Z** (Mac) to restore it instantly.

*Learn more:* [Undo & Redo](https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/undo-and-redo)

</Hint>

## Related articles

<PageLink href="https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/layer-slider">Layer slider</PageLink>

<PageLink href="https://docs.foxecom.com/foxify-app/pages/app-extensions">App extensions</PageLink>