# Add and edit elements

Elements are the pieces that make up your page, like text, images, buttons, and product grids. Find the one you need below, drag it onto your page, and customize it in the Inspector.

## Add an element

1. In FoxStudio, select **Add elements** in the left sidebar, or press **`E`**.
2. Search for an element, or browse the categories.
3. Drag the element into a section on your page.

<Hint type="info" title="Some elements only work on certain page types">
  For example, the **Main collection** section only works on collection templates, and the **Password form** only works on password pages. If you can't drop an element on your page, check that it fits the page type you're editing.
</Hint>

## Find an element for your job

<Cards>
  <Card title="Quick add" description="Shortcut grid of the most-used elements. Use when you know what you need and want to add it fast." />

  <Card title="Save assets" description="Your saved elements and sections. Drag directly onto the canvas to reuse them across pages." />

  <Card title="App blocks" description="Elements from installed Shopify apps and Foxify extensions. Install from Apps market first, then find them here." />
</Cards>

### Basic elements

General-purpose building blocks for page content and layout.

<Cards>
  <Card title="Text" description="Headings, paragraphs, display text" />

  <Card title="Buttons" description="CTAs, links, icon buttons" />

  <Card title="Media" description="Images, videos, QR code, Before/After image" />

  <Card title="Decorative" description="Shapes, Dividers" />

  <Card title="Promotions" description="Countdown timer, Marquee text" />

  <Card title="Forms" description="Subcribe form, Contact form" />

  <Card title="Lists" description="List items, Social links" />
</Cards>

### Advanced elements

More complex structural and interactive elements for richer page designs.

<Cards>
  <Card title="Layout" description="Grids and cells to organize elements" />

  <Card title="Navigation" description="Menu and nav bar elements" />

  <Card title="Slideshow" description="Pre-made slide layouts" />

  <Card title="Tabs & Collapsible" description="Display content in tabbed or accordion layouts" />

  <Card title="Testimonials & Press" description="Social proof elements — reviews, quotes, press logos" />
</Cards>

### Shopify elements

<Cards>
  <Card title="Product" description="Individual product page elements, such as: Product details, media, price, variants, Add to cart, and so on." />

  <Card title="Blog Post" description="Individual blog post page elements, such as: Post title, Post meta, Post image, and so on." />

  <Card title="Product list" description="Product list, Favorite products, Related products" />

  <Card title="Collections & Blog" description="Collection and blog listing displays" />

  <Card title="Buy buttons" description="Add to card and Dynamic checkout buttons" />
</Cards>

## Delete an element

<Stepper>
  <Step title="Select the element">
    Click the element on the canvas to select it.
  </Step>

  <Step title="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/editor-tools/inspector-panel">
  Edit settings with the Inspector panel
</PageLink>

<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/integrations/foxify-extensions">App extensions</PageLink>