Foxify App
Foxify App
Foxstudio

Add and edit elements

2 min read

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

Open Add elements

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

Browse or search

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

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.

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

Types of elements

Basic elements

General-purpose building blocks for page content and layout.

Text

Headings, paragraphs, display text

Buttons

CTAs, links, icon buttons

Media

Images, videos, QR code, Before/After image

Decorative

Shapes, Dividers

Promotions

Countdown timer, Marquee text

Forms

Subcribe form, Contact form

Lists

List items, Social links

Advanced elements

More complex structural and interactive elements for richer page designs.

Layout

Grids and cells to organize elements

Navigation

Menu and nav bar elements

Slideshow

Pre-made slide layouts

Tabs & Collapsible

Display content in tabbed or accordion layouts

Testimonials & Press

Social proof elements — reviews, quotes, press logos

Shopify elements

Product

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

Blog post

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

Product list

Product list, Favorite products, Related products

Collections & Blog

Collection and blog listing displays

Buy buttons

Add to card and Dynamic checkout buttons

Delete an element

Select the element

Click the element on the canvas to select it.

Delete it

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

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
Layer slider
App extensions
Last updated