Adding Ecwid blocks in the Gutenberg editor

After you install Ecwid E-Commerce plugin for WordPress, you get access to a number of store content blocks. They are available right in the default code-free page editor and publishing tool that’s also known as the Gutenberg editor. You can use these blocks to add online store functionalities to any page on your WordPress site in minutes.

Adding store blocks

You can add one or several E-commerce blocks to any WordPress site page and then adjust them to your site design.

To add a store block:

1. Go to your WordPress Dashboard → Pages and open the page where you want to add online store elements. You can add them to a new or existing page.
2. Click the + button in the upper left. In the Ecwid section, you will see a list of available store content blocks:
   

   

3. Click the block to add it to your page.
4. To modify the appearance of the block, click on it on the site page and use the block settings menu on the right:
   

   

5. Click Publish or Update to save the changes.

That’s it! You’ve added an E-commerce block to your WordPress site page.

Store blocks overview

A full list of Ecwid’s store content blocks for the default WordPress editor includes:

• Your entire storefront
• Individual category pages
• Individual product cards in the form of Buy Buttons (three layout options)
• Product search (with or without filters)
• Cart and checkout page
• Categories menu
• Shopping cart icon

You can add one or several blocks per page according to your needs.

Store Home Page

The Store Home Page block allows you to add your entire storefront to any WordPress page:

You can manage storefront appearance right in the WordPress editor: choose size and aspect ratio for product and category thumbnails, set the look of the product pages, choose products view on the store front page, add navigation elements, and more.

Product Card Small

The Product Card Small block is perfect for adding one or more products to a blog post or your homepage. You can also use it if you have only a few products to sell and you don’t want to add a whole store to your site.

You can select a product for the block by clicking Choose product after you add the block to a site page.

Also, after you add the product card, you can manage its appearance right in the WordPress editor: choose which elements to display and modify the look of the button.

Buy Now Button

You can use the minimalistic Buy Now Button block to add purchase buttons with a checkout option for specific products. For example, if you want to have a CTA on the product description page that you’ve designed yourself on your WordPress site.

You can select a product for the Buy Now Button by clicking Choose product after you add the block to a site page. Also, after you add the button, you can additionally edit its appearance in the WordPress editor and choose not to show the price inside the «Buy now» button.

Product Search Box

The Product Search Box block allows you to add a compact search input block to any page:

Store Categories Menu

The Store Categories Menu block allows you to add a categories menu at the top (or bottom) of your page. This menu will help customers navigate your store and can serve as an attention grabber.

Store categories menu will contain all the enabled categories that you have in your store.

Shopping Cart Icon

With the Shopping Cart Icon block, you can make your shopping cart even more visible. It can help reduce the number of abandoned carts and improve overall store navigation. When a customer clicks on the icon, they are redirected to the checkout page.

You can manage your cart icon appearance right in the WordPress editor: choose where to align the shopping cart icon (left, center, or right) and choose how it will look (bag, cart, or basket, size, item count, etc).

Store Category Page

The Store Category Page block allows you to add a specific store category to any page of your WordPress site. It can be any category that exists in your store.

You can select a category that you want to be added in the Select category dropdown in the block settings menu on the right. To access it, click on the block after you add the block to the site page.

After you add the category, you can manage its appearance right in the WordPress editor: choose size and aspect ratio for product and category thumbnails, set the look of the product pages, add navigation elements, and more.

Product Card Large

The Product Card Large block is perfect for building individual product pages on your WordPress site. For example, if you want to feature a specific product — like a bestseller or a limited item — and you don’t want to spend time on designing the site page yourself.

Large product cards have all the information that a regular product details page has: product title, pictures, description, options (if any), price, etc.

You can select a product for the block by clicking Choose product after you add the block to a site page.

Also, after you add the product card, you can manage its appearance right in the WordPress editor: choose product page and image gallery layout, set the product sidebar content, and more.

Product Search and Filters

The Product Search and Filters block allows you to add advanced search. Your WordPress site page will contain not only a search box but also all your products, along with a list of product filters. This way, customers can find what they need faster.

Learn how to add product filters in your store →

After you add the block for product search and filters, you can manage its appearance right in the WordPress editor: choose filters panel position, set the product list appearance and store navigation, and more.

Cart and Checkout

With the Cart and Checkout block you can add the checkout page to any page of your WordPress site. For example, to link it to your main site menu so that customers who want to finalize the purchase can find it faster.