Product Browser

Last updated

This is the most important Ecwid widget. It shows and includes a full-featured shopping cart with products, categories, catalog, checkout pages, etc.

Product Browser

Ecwid 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 Ecwid 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.ecwid.com/script.js?" charset="utf-8"></script><script type="text/javascript"> xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list","id=my-store-");</script></div>

​Advanced Settings

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

​Products/categories listing layout

Find the following code in the widget code:

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

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

  • "categoriesPerRow=3" -- defines number of categories per row
  • "views=grid(3,3) list(10) table(20)" - defines the available views and their settings. If you want to remove any view, just remove the "grid(3,3)" or "list(10)" or "table(20)" 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.

Custom CSS styles for product browser

The 'style=' setting in the product browser widget code allows adding custom CSS to the layer that enclose all product browser code. Usually it isn't used. If you want to change some Ecwid elements, use custom CSS themes instead. More details: CSS FAQ.

Default category for product browser

By default, the Product Browser widget opens with a list of root categories. But you can configure it to show a different category when user opens it for the first time. You can do it by adding the 'defaultCategoryId' option to the widget integration code. Please refer to this article for the details: Default category for product browser.

Product browser URL

If your product browser is installed on one page, but you have minicart/vertical categories/search box on all other pages of your site and you want them all to be linked to your main store page, the ecwid_ProductBrowserURL option can be used. Please find the details in this article: ecwid_ProductBrowserURL.

Settings wizard (product browser code generator)

​You can use the Settings Wizard to create the necessary settings string quickly: http://www.ecwid.com/playground/pb-settings-wizard/

Examples

  • If we want to hide the "table" view and use the "list" / "grid" views only; set the 'grid' view as a default one for the products and the 'list' on for the search results, we should use the following code: 
xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10)","categoryView=grid","searchView=list","style=");
  • Hide all views except for the 'list' one. The 'list' view is a default one for the products and the search results:
xProductBrowser("categoriesPerRow=3","views=list(10)","categoryView=list","searchView=list","style=");  
  • Set 4 categories per row, 'grid' will have 4 products in a row and a column, the 'list' view will have 5 products per page, the 'table' view will have 50 products per page. The default view for the products is a table, for the search results -- a grid:
xProductBrowser("categoriesPerRow=4","views=grid(4,4) views=list(5) table(50)","categoryView=table","searchView=grid","style=");  

If you make changes, but don't see the product browser after that, make sure you don't have any kind of syntax errors.

Responsive design

Ecwid 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 Ecwid will calculate the most suitable number of products or categories in row automatically. 

If you have noticed that responsive design works incorrectly in your store, please, inform us about it on our forums.

Enjoy!

Troubleshooting

I don't see new view modes("List" and "Table") in my store. How to fix this?

You cannot see them, because your store uses the old integration code. Since the view modes add some new CSS classes, they may not fit your site's CSS styles. That's why they're not enabled for all existing Ecwid users by default. In order to add them, follow these steps:

  • go to the Ecwid control panel
  • grab a new integration code of the product browser
  • update the existing code with a new one

If you use the WordPress Ecwid plugin, you don't need to update the code. Just update this plugin to the 0.3 version.

Related Articles

Screenshots






 

 

Was this article helpful?
0 out of 0 found this helpful
Questions?
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