WordPress.com (hosted)

Last updated

WordPress.com is a hosted platform provided by WordPress company who is also offering a downloadable solution WordPress.org. If your site is built on WordPress.org, please refer to this article for Ecwid setup instructions: Wordpress (downloadable). If you're not certain what solution you have or which one to choose, check out some help tips here.

Visit WordPress.com site page to learn more and sign up: https://signup.wordpress.com/signup/

If you run a blog at WordPress.com, you can open an online store right inside your blog with a few clicks*. Here is our demo Ecwid installation you may find interesting to view: http://commercedemoecwid.wordpress.com/

Open Ecwid on your site

1. Activate your Ecwid plugin in your site:

  • Sign in to your Wordpress.com site and proceed to your Dashboard.
  • Select “eCommerce Plugins”in the left-hand menu and click “Activate” under Ecwid.

The first step is done. Now you can embed Ecwid in your site page. Please make sure that you have active subscription on your website: WordPress.com Business

Next you need a few lines of codes to your site page. No worries! These all are generated for you automatically and available in your WordPress admin area.

2. Connect your Ecwid store with your site:

  • Go to Settings → Ecwid Store and enter your store ID under Enter your Store ID. Where to find your store ID. If you do not have an Ecwid account, feel free to register at https://my.ecwid.com/cp/ (click on 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.

3. Embed an Ecwid store in your site.

Once your site is connected to Ecwid, you can find the code needed to embed Ecwid store under Settings → Ecwid Store. Copy the code found under Your Ecwid Shortcode, and paste it into any page or post.

That's it! Check your site page to view your newly created online store.  You can manage your store setup, products, categories, layout, etc in your Ecwid control panel Please check out our knowledge-base for more instructions on how to configure your Ecwid.

Advanced setup

If you’re experienced enough to work with shortcodes, you can create your own Ecwid widget code like this one:

[ecwid id="1234567" widgets="search categories productbrowser minicart" grid="5,5" list="5" table="10" category_view="grid" search_view="list" default_category_id="3002" layout="floating" ]

where parameters are as follows:

  • ID:  your Ecwid store ID
  • Widgets: list of Ecwid widgets to display: productbrowser would be product browser widget, categories (categories widget), vcategories (vertical categories), minicart (minicart widget to show shopping bag icon), search. You can also combine several widgets like this: “search categories productbrowser”. Default value for this part is  "product browser”. Product browser is the main widget which displays your catalog and all main store pages.
  • Layout: (for mini cart widget only) determines the layout of your shopping bag, as to shown attached to categories menu (value=attachToCategories), floating mode (value=floating), miniview (value=Mini), miniview attached to products (value=MiniAttachToProductBrowser).
  • Grid:  (for product browser only) indicates the number of columns and rows on products listing pages, in grid view. The default value is "3,3": 3 columns per row and 3 rows. You should insert the values separating them by comma.
  • List: (for product browser only) indicates the number of items in list view. The default value is 10.
  • Table: (for product browser only) indicates the number of rows in table view. The default value is 20.
  • Category_view: (for product browser only) defines the default view for products in categories. Possible values are: list, grid, table. The default value is grid.
  • Search_view: (for product browser only) indicates the default view for search results. Possible values are: list, grid, table. The default value is grid.
  • Default_category_id: (for product browser only) is the default category to be displayed. If none specified, the page will open the root category of the store. If you'd like to show specific category on the store home page, use this parameter in your code.
  • Responsive: (for product browser only) enables responsive layout for the storefront. Possible values are: yes, no. The default value is "yes". Ecwid supports responsive design which makes all storefronts adapt to any screen width automatically. You can also enable this option in your Ecwid control panel>System Settings>General>Migrations.  
The option to add Ecwid online store is available to Wordpress.com clients who're signed up to Wordpress Business subscription plan.  You can have free plan with Ecwid, it includes the necessary codes.

Embed a single product in your site

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. 

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 you can embed as many Ecwid products as you want on the same page.

Was this article helpful?
0 out of 0 found this helpful
Get help
  • Presales Chat

    Need help choosing the right Ecwid plan? Our Sales team has the answer you’re looking for.

  • Forums

    Join the Ecwid community. Discuss support topics and store ideas with other Ecwid users.

  • Contact us

    Still have questions about Ecwid? Let us know! We will be glad to help you with your Ecwid store.

  • Status Monitor

    Get real time status updates on Ecwid services here, 24/7