Add and Edit Elements

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

Add elements to your page

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.

What's next?

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

To add an app block, check out App extensions

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.

Basic elements

• Text: Add different text elements, including:

Heading

Paragraph

Display text

Text with shadow

• Buttons: Add buttons to let visitors interact with your page, including

  • Solid button

  • Button with border

  • Rounded button

  • Button with icon

  • Button with underlined text

• Media: Add 3 types of visuals (Image, Video, and Before/ After Image)

• Decorative: Decorate your page with Shapes and Dividers.

• Promotions: Create and promote deals using a Countdown Timer and Marquee Text.

• Forms: Embed a Newsletter Subscribe Form or a Contact Form to collect subscriptions.

• List: Add List Items, List Items with Icons, or Social Links.

Advanced elements

• Layout: Embed a grid or a stack to organize elements more easily, for example:

  • 2 equal columns

  • 3 equal columns

  • 4 equal columns

  • 3 unequal columns

  • 3 columns 2 rows

  • 2 columns 2 rows

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

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

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

Shopify elements

• Single product: Add product details and other product-related elements, including:

  • Product details

  • Product media

  • Quantity input

  • Pries

  • Variants

  • Description

  • Add to cart

  • Dynamic checkout

  • Vendor

  • Type

  • Product meta

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

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

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

• Buy buttons: Add Shopify functional buttons to your page - Add to cart button and Dynamic checkout buttons.

Delete an element from your page

You can delete an element you add to your site at any time.

Steps:

1. Click on the relevant element on the canvas.

2. In the Actions bar, click Delete () or press Delete on your keyboard.

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