Default category or product for product browser

Last updated

By default, the Product Browser widget opens with a list of root category. But you can configure it to show a different category or a particular product when user opens it for the first time.

You can do it by adding either option to the Product Browser integration code:

defaultCategoryId=%categoryId%

or

defaultProductId=%productId%

Example

This code will open Ecwid Demo shop with default view (list of categories):

<div> <script type='text/javascript' src='https://app.ecwid.com/script.js?1003'></script> <script type='text/javascript'> xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list","style="); </script> </div>

... but this code will open the iGoods category of Ecwid Demo:


<div> <script type='text/javascript' src='https://app.ecwid.com/script.js?1003'></script> <script type='text/javascript'>  xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list","style=","defaultCategoryId=3003"); </script> </div> 

3003 is the CategoryID of "iGoods" category. (How to get ID of your product or category)

And here is an example, this code will open Caffeine Molecule product page in our demo store:

<div> <script type='text/javascript' src='https://app.ecwid.com/script.js?1003'></script> <script type='text/javascript'>  xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list","style=","defaultProductId=4007"); </script> </div>
where PRODUCT_ID is an id of your product (you can get it from the address bar of your browser).
 
Check this article for additional information: Can I add only one product on my site?

Where exactly to apply the above changes?

The changes above are meant to be applied to the embed code that you use on your web page to display the Ecwid store. However, sometimes it may be difficult for the store owner to locate that code.

There are 2 principal ways to embed an Ecwid storefront into a webpage:

  1. By copying and pasting an embed code provided in the Dashboard page of Ecwid control panel. If you have embedded your store this way, then the changes need to be applied to that code in the source code of your store page
  2. By using a plugin to a CMS or the social network app. If you use WordpressJoomlaDrupal or other CMS and embed your Ecwid store by installing a plugin or if you have opened your Ecwid store on Facebook or other social networks using our official app, then you don't need to change the embed code. The settings page of those plugins allow you to set the default category easily, without any coding.

Now, to the tricks you can do with it.

Use #1:

Instead of showing the list of categories as big icons, you can have your store open a particular category by default, and resort to using the categories widget for navigating the categories. This is particularly useful if you don't have icons for categories.

Use #2:

You can design your own categories navigation instead of Ecwid Categories widget. You can even your existing CMS menu to navigate categories.

Here's how to do that:

  1. Do not add Categories widget to your site.
  2. In your CMS, create a separate page for each category you use.
  3. Add Product Browser widget for every page created in step 2. By specifying different defaultCategoryId for each of these browsers, you will make Ecwid switch category when your customers click your main menu.

You can also have different design for these pages by using the standard features of your CMS.

Use #3:

You can create a custom splash page that displays categories in a way alternative to Ecwid defaults.

Was this article helpful?
1 out of 2 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