Customizing design of your Ecwid store on a Wordpress site

Last updated

When the Ecwid Shopping Cart is installed to your WordPress backend, it automatically creates a Store page and adds the store to it with the default settings. You can easily change the store layout and display settings, if needed.

In this article:

Store elements and appearance

  1. Open Pages in the side menu.
  2. Clicking the Edit link below the Store page.
  3. Click the Edit store button.
  4. Under Store elements you can select which widgets you want to display on the page: search bar, minicart and categories. The main product browser widget is displayed by default. You can also select the category that you want to show when the store loads on the page:

Store appearance

  1. You can change the look of your storefront on the Design tab in your Ecwid Control Panel. In WordPress Dashboard go to EcwidDashboard. Click the brush iconDESIGN:

design.png

  1. Here you can select the size of your product images and the layout of your product and catalog pages.
Check out the guide on changing store design for more details about altering the look of your store.

Shopping cart widget

You can add the Shopping cart widget to your site pages that will show the number of items added to it and let your customers checkout from any page of your store or website.

When enabled, the Shopping cart icon will always float in the page corner. Thus, customers can click the Shopping cart icon to view what items they have already added, continue browsing your catalog or go straight to checkout and place their order.

You can customize the appearance of the Shopping cart widget in a native WordPress interface: change the icon, its layout and border, set its position on the page and all these – with no coding required.

Adding the Shopping cart widget

To enable the Shopping cart widget:

  1. Go to your WordPress Dashboard → Appearance → Customize.

Customize appearance Menu

  1. Click Ecwid in the sidebar menu.

Customize Ecwid widgets

  1. Click Shopping Cart Widget.
  2. Select where you want to display the Shopping cart from the drop-down: Show on store pages or Show on all pages.

Shopping Cart display options

  1. Check the option Show when empty, if you want to display the cart icon, when no items have been added to it yet.

Display empty Shopping cart option

Now the Shopping cart widget will be pinned to the corner of the page and will follow you as you scroll.

If you want to add the Shopping cart widget to the sidebar area of your website, follow the steps listed in the article Sidebar widgets.

Customizing the Shopping cart design

When you have enabled the Shopping cart, you can customize its appearance with the help of several options.

The Shopping cart design settings will be available in your WordPress Dashboard under Appearance → Customize → Ecwid → Shopping Cart Widget.

The changes that you make to the Shopping cart appearance will be displayed in the preview to make it easier for you to customize it.

Layout

This setting allows you to change the Shopping cart layout. You can see the layouts you can choose from in the table below:

Layout Appearance
Small icon Small icon
Small icon and item count Small icon and item count
Item count only Item count only
Label and item count Label and item count
Icon and item count Icon and item count
Icon, label and item count Icon, label and item count
Icon, label, item count and subtotal Icon, label, item count and subtotal
Icon, label, item count, subtotal and link Icon, label, item count, subtotal and link

Border

You can change the shape of the Shopping cart widget by selecting one of the border options:

  • Rectangle
  • Pill
  • No border.

Icon

This setting allows you to change the widget icon. You can see the icons you can choose from in the table below:

Icon Appearance
Bag Bag
Cart Cart
Basket Basket

Position

With this option you can choose in what page corner you’d like to display the Shopping cart widget. The possible variants are:

  • Bottom right
  • Top right
  • Top left
  • Bottom left.

You can also increase or decrease the spaces between the widget and the page edges with the help of the Horizontal and Vertical indent options.

Sidebar widgets

The Ecwid Shopping Cart plugin allows you to add the store elements to the sidebar area of your WordPress website to make the store more visible and easy to access.

To manage the sidebar widgets, navigate to AppearanceWidgets in your WordPress Dashboard. There you can activate the following widgets:

  • Shopping cart
  • Product search
  • Store root categories
  • Store page link
  • Recently viewed products
  • Latest added products
  • Random product
To learn how you can alter the appearance of the Shopping cart widget, please refer to the article Customizing the Shopping cart design.

Store menu

With the Ecwid Shopping Cart plugin you can add links to the store elements to the main menu of your WordPress website, so that your customers can easily navigate to the store and category pages, access their store profile and open the shopping bag.

To add the store menu go to AppearanceMenus in your WordPress Dashboard. Click Store to expand the drop-down list. There you can select:

  • Cart: adds a link to the Shopping bag,
  • Product Search: adds a link to the page with the search results,
  • My Account: adds a link to customer profile page,
  • Store: adds a link to the main store page,
  • Store with Categories Menu: adds a drop-down with the store root categories.

Menus___1_.png 

Back to top
Has the article answered your question?

Awesome! Thanks for your feedback!

Please send us that question. We will be happy to help by email.

Send a message