Adding your store to the website manually

Last updated

You can add your Ecwid store to any site that supports adding HTML codes. You add a few lines of Ecwid integration code to your site source code and you have a full-featured shopping cart with products, categories, catalog and checkout pages.

If you have a site built on Wordpress, Wix, AdobeMuse or Joomla, we recommend to add your store to your site with the help of our plugins. See the corresponding section for details and instructions.

In this article:

Generate your code


Where to get your store ID?

<div id="my-store-"></div><div> <script type="text/javascript" data-cfasync="false" src="https://app.ecwid.com/script.js?" charset="utf-8"></script><script type="text/javascript"> xProductBrowser("categoriesPerRow=3","views=grid(20,3) list(60) table(60)","categoryView=grid","searchView=list","id=my-store-");</script></div>

You can adjust the layout and behavior of your store according to your needs. For that, you will need to slightly modify the widget integration code as described below.

​Products and categories layout

Ecwid can display products in three modes:

  • Grid is the default and recommended mode for showing your products and categories in the storefront.
  • List is the default mode for showing the search results in your store.
  • Table works well for products that do not have images.

The widget code has parameters that define products and categories listing styles:

  • "categoriesPerRow=3" defines the number of categories per row.
  • "views=grid(20,3) list(60) table(60)" defines available views and their settings. If you want to remove any view, just remove "grid(20,3)" or "list(60)" or "table(60)" from the widget code.

The numbers in brackets stand for the number of products:

  • grid(C,R)C is the number of products in a column, R – the number of products in a row.
  • list(M)M is the number of products on one page in the list view.
  • table(N)N is the number of products on one page in the table view.

Default view mode:

  • "categoryView=grid" defines the default view for products in categories.
  • "searchView=list" defines the default view for search results.

Default category for product browser

By default, the Ecwid widget opens the Store Front page category along with your root categories. If you wish, you can configure it to show a different category when a user opens your store for the first time. You can do it by adding the defaultCategoryId option to the widget integration code. The code will look like this:


<div> <script type='text/javascript' src='https://app.ecwid.com/script.js?1003'></script> 
<script type='text/javascript'> 
xProductBrowser("categoriesPerRow=3","views=grid(20,3) list(60) table(60)",
"categoryView=grid","searchView=list","style=",
"defaultCategoryId=3003");</script>
</div>
The category is defined by its ID. In our example it’s 3003. The category ID is included in the category page URL. If you can’t find it, check the guide on how to get the ID of your product or category.
Back to top
Was this article helpful? 32 out of 72 found this helpful