eCommerce, Shortcodes, Upgrades

Ecwid

WordPress.com Business allows you to integrate your Ecwid store into your site’s dashboard, and to promote and sell Ecwid 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.

Connecting Ecwid

In your Dashboard, go to eCommerce Plugins and click on Activate under Ecwid.

Next, 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.

You can find your store ID in your Ecwid dashboard, under Account Summary

You can find your store ID in your Ecwid dashboard, under Account Summary

Enter the store ID you got from the Ecwid Dashboard to connect Ecwid to your site

Enter the store ID you got from the Ecwid Dashboard to connect Ecwid to your site

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 SettingsEcwid Store. Copy the code found under Your Ecwid Shortcode, and paste it into any page or post. 

Ecwid - Get Shortcode

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.

Ecwid - Embedded store

↑ Table of Contents ↑

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: 1003.
  • 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 productbrowser will 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 attachToCategories, floating, Mini, MiniAttachToProductBrowser.
  • 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 10.
  • 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 20.
  • 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 grid, list, table. The default value is grid.
  • 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 grid, list, table. The default value is grid.
  • 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 yes or no. The default value is yes.

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.

↑ Table of Contents ↑

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.

Example of an embedded Ecwid product

↑ Table of Contents ↑

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: picture, title, price, options, qty, addtobag. With the display parameter, 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.

↑ Table of Contents ↑

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.

Not quite what you're looking for?

Get Help