Adding your store to the website manually

Last updated

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

In this article:

Product Browser

The store can display products in three modes:

  • grid (default mode for the products in categories)
  • list (default mode for search. It shows the list of products with an abstract from the product description)
  • table (useful if your products don't have thumbnails. In this mode Online store shows all products in the list without product images)

You can always change the default modes by altering the product browser's settings.

Generate your code


Where to get your store ID?

<div id="my-store-"></div><div> <script type="text/javascript" src="https://app.shopsettings.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>

Products/categories listing layout

Find the following code in the widget code:

"categoriesPerRow=3","views=grid(20,3) list(60) table(60)","categoryView=grid","searchView=list"

The code defines products and categories listing styles. Let's see its parts:

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

The number in braces is number of products in the particular view. I.e.:

  • grid(K,L) - K is a number of products in a column, L -- number of products in a row.
  • list(M) - M is number of products on one page
  • table(N) - N is number of products on one page

Default view mode:

  • "categoryView=grid" - defines the default view for products in categories. Possible values: list, grid, table
  • "searchView=list" - defines the default view for search results. Possible values: list, grid, table.

Responsive design

Online store supports responsive layout. It means that the store pages can adapt to the visitor's screen width on the fly and keep the layout clean and nice. Your products and categories lists will be fit for any window's size, as Online store will calculate the most suitable number of products or categories in row automatically.

Enjoy!