how to show WiserReview review widgets in Catalyst Bigcommerce store

Step 1: Create or Enable Catalyst Storefront

Open your BigCommerce Admin.

Go to:
Channels → Storefronts

You will see available storefronts.

• Click Create channel
• Choose Catalyst
• Activate the Catalyst storefront

After activation, you will see your Catalyst preview URL.

Step 2: Open Catalyst Development Setup

Click the three dots menu beside your Catalyst storefront.

Select:

Edit settings

This opens the Catalyst setup page.

You will see the Start development section.

Step 3: Create Local Catalyst Environment

Copy the CLI command shown in the Start development section.

Example command:

corepack enable pnpm && pnpm create @bigcommerce/catalyst@latest

Run this command in your terminal.

This will create a local Catalyst project.

Example project folder:

 my-catalyst-app 

Open this folder in VS Code.

Setup guide:- One-Click Catalyst

Step 4: Install WiserReview App

Go to BigCommerce Admin → Apps → App Marketplace.

Install WiserReview.

Open the app after installation.

Step 5: Get Widget Embed Code

First, disable the Built-in Reviews System

1. Log in to your BigCommerce Admin page.
2. Click on Settings.
3. Click on Comments.
4. Click the Built-in tab.

Inside the WiserReview dashboard:

Go to:

Widgets → Install

Choose BigCommerce.

You will see widget embed codes such as:

Star Rating Widget

Copy the star rating widget code for the product page then.

Open your Catalyst project.

Go to:

core/vibes/soul/sections/product-detail/index.tsx

Find the product title section.

Add the Star Rating Widget below the product title.

Copy the star rating widget code for the category page then.

Open:

core/vibes/soul/primitives/product-card/index.tsx

Add the Star Rating widget below the product title.

Product Review Widget

Copy the product review section widget code for the product page then.

Go to:

core/vibes/soul/sections/product-detail/index.tsx

Scroll to the product details section.

Add the Review Widget.

Step 6: Initialize WiserReview Script

Open:

core/app/layout.tsx

Add the script before closing the body tag.

Example:

import Script from 'next/script';

<Script id="wiserreview-init" strategy="lazyOnload">
{`setInterval(function(){ if(window.wiserreview) wiserreview.init(); },1000);`}
</Script>

This loads and initializes the widget.

Step 7: Run the Catalyst Store

Run the development server:

pnpm dev

Open your local storefront.

Check:

• Product page reviews
• Star ratings
• Category page ratings

Once checked, widgets are then deployed to your server.