WordPress.com Business allows you to integrate your Ecwid store into your site’s dashboard, and to promote and sell your products by adding them to posts, pages, and widgets directly from the dashboard.
This page will guide you through the process of setting up an Ecwid store on your site and customizing its appearance.
See the WordPress.com Business page for more information.
In your Dashboard, go to eCommerce Plugins and click on Activate under Ecwid.
Next, in WP Admin go to Settings → Ecwid Store and enter your store ID under Enter your Store ID. You can find your store ID in your Ecwid dashboard. If you do not have an Ecwid account, just click on the Create new Ecwid acccount and copy in your Store ID once you’ve set up your store. Click on Save and get a shortcode to continue.
After connecting your store, you’ll get a shortcode that you can use on any page or post on your site.
Embedding an Ecwid store
Once your site site is connected to Ecwid, you can find the code needed to embed a store under Settings → Ecwid Store. Copy the code found under Your Ecwid Shortcode, and paste it into any page or post.
The code won’t look like much when it’s in the editor, but once you publish the post or page you pasted it into, you’ll see your Ecwid store on your site. Below is an example of an embedded Ecwid store.
Customizing an embedded Ecwid store
The shortcode you get from Settings → Ecwid Store uses defaults that will show all your products, organized by category, in three columns and three rows. You can customize the shortcode using special parameters, to add a search field or a shopping cart, customize the display of products, and more.
The Ecwid shortcode supports the following parameters:
id="value": Set the Ecwid store ID. You can find your Ecwid store ID in your Ecwid dashboard, under Account Summary. Value can be any store ID, in the form of a whole number. If no value is specified, the store ID for the Ecwid demo store will be used:
widgets="value": Set the browsing and shopping features to display in the embedded store. To choose multiple items, separate them with a space. Values can be one or more of
productbrowser(show all products),
categories(show horizontal category menu),
vcategories(show vertical category menu),
minicart(show a shopping cart),
search(show a search field). The elements will be shown in the order they are entered here. If no value is specified, the default of
productbrowserwill be used.
layout="value": When using the “minicart” feature, the embedded Ecwid store will include a shopping cart that can contain multiple products. This parameter specified the layout for the shopping cart. Value can be
grid="value": When using the “productbrowser” feature, users can switch between three different product views: Grid, List, and Table. This parameter sets the number of items to show in the Grid view, by specifying the number of columns and rows. Values should be one number each for columns and rows, separated by a comma. For example, the default value is
3,3, for three columns and three rows.
list="value": When using the “productbrowser” feature, users can switch between three different product views: Grid, List, and Table. This parameter sets the number of items to show in the List view. Value should be a single number. For example, the default is
table="value": When using the “productbrowser” feature, users can switch between three different product views: Grid, List, and Table. This parameter sets the number of items to show in the Table view. Value should be a single number. For example, the default is
category_view="value": When using the “productbrowser” feature, users can switch between three different product views: Grid, List, and Table. This parameter specifies the default view to use. Values can be
table. The default value is
search_view="value": When using the “productbrowser” and “search” features together, users can switch between three different product views for the search results: Grid, List, and Table. This parameter specifies the default view to use for search results. Values can be
table. The default value is
default_category_id="value": When using the “productbrowser” feature, you can choose a specific category to load, instead of listing all available categories. Value should be the category ID for the desired category. You can find the category ID in the Ecwid control panel, by opening the category under Catalog and examining the browser’s address bar. The category ID can be found after the word “category”. It might look something like this:
products=list&category=8764954&catalog=Categories. In this case, the category ID is “8764954”.
responsive="value": The embedded Ecwid store supports a responsive design, which works better across multiple devices with different screen size, such as laptops, smart phones, and tablets. Use this parameter to enable or disable the responsive design. Values can be either
no. The default value is
Note that we do not support showing multiple Ecwid stores on the same page. While you can use multiple embed codes to embed the different parts of the store separately, only one embedded “productbrowser” can be shown on a single page.
For some ideas on building your site, check out Ecwid’s demo site.
Embedding Ecwid products
You can use the
[ecwid_product] shortcode to display Ecwid products on your WordPress.com site. Here’s what the shortcode looks like:
[ecwid_product store_id="1003" product_id="5002"]
store_id: Your Ecwid store ID. You can find it in your Ecwid dashboard, under Account Summary.
product_id: The ID of the product you want to display. You’ll find this ID in the URL of your product’s page in the Ecwid store. For example, in
example.com/#!/Apple-iPhone-5/p/5002/, 5002 is the product ID.
You can use the
[ecwid_product] shortcode in any post or page in your WordPress.com site. Below is an example of an embedded Ecwid product.
Customizing an embedded Ecwid product
You can use special parameters to customize how the
[ecwid_product] shortcode displays your product:
display="value": Defines which of these elements to show in the embed, and in what order:
addtobag. With the
displayparameter, you can list the elements you want displayed separated by commas, for example:
display="picture, price, addtobag".
link="value": Defines the URL the product image and title link to. This allows you to redirect users to any page of your site (such as the product details page inside your main store, for example).
Here’s an example of a customized Ecwid product shortcode:
[ecwid_product store_id="1003" product_id="5002" display="picture" link="http://www.example.com/#!/Apple-iPhone-5/p/5002/"]
Note that, unlike the Ecwid store, you can embed as many Ecwid products as you want on the same page.
Help from Ecwid
Ecwid is a full-featured and affordable e-commerce solution that includes web, mobile and social stores that are managed from one control panel. Ecwid incorporates responsive design and works on desktops, tablets, and phones allowing you to sell everywhere your customers want to shop.
For more help configuring your products, visit Ecwid’s knowledge base or contact them with questions.