Adding store blocks in Elementor page builder

Elementor is a free drag-and-drop page builder for WordPress that allows you to create beautifully designed pages in no time, no coding needed. If you want to add your Ecwid store to your WordPress site built with Elementor, you can do it directly in the Elementor editor. You can add a whole store, a store category, or individual products in the form of Buy Buttons.

Before you start building an e-commerce website in WordPress with Elementor, make sure you:

• install Elementor page builder plugin
• install Ecwid E-commerce plugin for WordPress

Adding a whole storefront or a store category

You can add your whole Ecwid store or a chosen store category to any page of your WordPress website. After that, customers will be able to browse the store for all the products that you have created and enabled in your Ecwid admin.

To add a store or store category:

1. Go to your WordPress Dashboard → Pages and open the page where you want to add a store or store category. You can add them to a new or existing page.
2. Click Edit with Elementor to open the Elementor editor and find Ecwid Store in the toolbar on the left.
3. Drag and drop the “Online store” widget:
   

   

4. Click on the widget in the right part of the screen and find Edit Online store on the left. On the Content tab, choose what you want to add: a whole store or a store category.
   

   

   If you want to add a whole store, select “Store root category”. If you want to add a specific category, choose this category from the list.
   The Advanced tab allows you to apply different effects, change background type, change positioning, and other advanced characteristics. As for the look of your store, you can adjust it on the Design page in your Ecwid admin.
5. Click Preview changes to see how your storefront or category looks. Click Publish or Update to save the changes.

That’s it! You’ve added a whole storefront or a chosen store category to your WordPress site page in Elementor page builder.

Adding single products

You can add individual products in the form of Buy Buttons to any page of your WordPress website. Buy Buttons are special purchase buttons with a checkout option. You can add them on landing pages, your blog, the sidebar, or even to the error 404 page.

To add an individual product:

1. Go to your WordPress Dashboard → Pages and open the page where you want to add a product. You can add it to a new or existing page.
2. Click Edit with Elementor to open the Elementor editor and find Ecwid Store in the toolbar on the left.
3. Drag and drop the “Buy Now Button” widget:
   

   

4. Click on the widget in the right part of the screen and find Edit Buy Now Button on the left. On the Content tab, choose the product you want to add to the page from the “Choose product” dropdown:
   

   

   The Style tab allows you to change the appearance of your Buy Now button. As for the Advanced tab, it allows you to apply different effects, change background type, change positioning, and other advanced characteristics.
5. Click Preview changes to see how your Buy Now button looks. Click Publish or Update to save the changes.

That’s it! You’ve added a single product in the form of a Buy Button to your WordPress site page in Elementor page builder.

Related articles:

Adding your Ecwid store to WordPress site
Introducing Ecwid for Elementor (Ecwid blog)