Gutenberg E-Commerce: Build Your Store in the New Code-Free WordPress Editor
Posted Jun 21, 2019 by Matt Kuritsyn, Ecwid Team

Ecwid Blocks for the New Code-Free WordPress Editor: Add E-commerce to Anywhere on Your Site

Thinking of joining 75 million WordPress users to build your new website, but don’t wanna dirty your hands with the coding?

WordPress version 5 brought the biggest change in the platform in recent years: a new default code-free page editor and publishing tool (formerly known as the Gutenberg editor). Now you can add anything to any webpage just by arranging a content block.

new block editor for wordpress

Ecwid E-commerce allows you to build your online store right in the Gutenberg editor. Add a “Buy Now” button, product catalog, cart page, or entire storefront anywhere on your webpage at a moment’s notice. No code can stand in your way.

Other ways to sell with Ecwid → 

Subscribe to the Ecwid E-commerce blog
Please enter a valid email address

10 E-commerce Blocks to Add to Your Site Pages

Now that you’ve got the power to easily create your own beautiful WordPress site, it’s time to think about monetizing. By installing the Ecwid E-commerce plugin for WordPress, you’ll get rich e-commerce blocks right in the block editor (Gutenberg) and be able to add online store functionalities to any site page in minutes.

Ecwid blocks for wordpress

1. Store homepage

Display your entire storefront on any page, including your homepage. For example, you could link your shop to the “Store” tab of the main site menu.

store homepage ecommerce block for wordpress

Manage your storefront appearance in the editor: choose thumbnail size, product info to display on your storefront, navigation elements, and more.

2. The store category page

Add products from a specific category to any site page. Use this block if you want to highlight categories in your site menu.

editing store appearance ecommerce block for wordpress

3. Store categories menu

Remind your customers that there’s more to see: display a store categories menu at the top or bottom of your page to let your customers quickly navigate between them.

Store categories menu ecwid blocks forк wordpress

4. The large product card

With this block, you can build a page featuring a specific product, like a best seller or a limited-run item, including title, picture, description, options, price, and the CTA to purchase.

large product card

5. The small product card

Add one or more products to blog posts, your homepage, and anywhere else your heart desires. This block is also perfect for merchants with just a few products to sell.

small product card ecommerce block for wordpress

6. The “Buy Now” button

Every web page is better with a call-to-action. Insert a CTA button to capture customers in the moment they want to buy.

buy now button ecommerce block for wordpress

7. The search and filters page

If you need a web page that can display all your products, stick to this block, where customers can filter products to shop faster.

Ecommerce block for wordpress editor

Learn how to set up product filters in Ecwid.

8. The search input block

Don’t make your visitors search for your search box — add it to all your important pages for better navigation.

search bar ecommerce block for wordpress

Tip: if you want your search box on all your pages, go to Appearance → Widgets and add the Product Search widget to the sidebar.

9. The shopping cart icon block

Given that 50% to 80% of online shopping carts are abandoned (a customer added products to their cart but left without a purchase), it’s important to make that cart bold and findable. Use this customizable block to add a shopping bag icon on the top of your page, the bottom, and anywhere in between.

shopping bag icon ecommerce block for wordpress

Tip: if you want a shopping bag icon on all your pages, go to Appearance → Widgets and add the Shopping Cart widget to the sidebar.

10. The cart and checkout block

Make your cart page even more accessible by linking to it in your main site menu. Create your page and add this block to it.

checkout page ecommerce block for wordpress

Start Selling on a WordPress Website — And Beyond — With Ecwid

Ecwid and the new WordPress visual editor are a power couple for growing your e-commerce sales on WordPress. Both tools are code-free — developers need not apply. And Ecwid integrates directly into the editor, so you can have a consistent experience, with no hassle.

Our free WordPress plugin is just one piece of the Ecwid omnichannel story. Wherever you want to sell, your Ecwid store goes with you: extend your online presence to Amazon, Instagram, Facebook, and Google, all from a single dashboard.

Happy selling!

About the author
Matt is a product manager at Ecwid. He works with the Ecwid dev team and helps them shipping the right features for Ecwid merchants. Outside of work, Matt likes travelling and climbing the mountains.
We use cookies and similar technologies to remember your preferences, measure effectiveness of our campaigns, and analyze depersonalized data to improve performance of our site. By choosing «Accept», you consent to the use of cookies.