feat(reviews): minor product reviews ux improvements

[matthewvolk]

Warning

This PR depends on #2754

What/Why?

Improves product reviews UX:

1. Display review count: Shows the number of reviews next to ratings on product cards and the product detail page.
2. Clickable rating: Makes the rating on the product detail page clickable to smoothly scroll to the reviews section.
3. Visual updates:
   • Updated rating display styling (removed border, adjusted typography)
   • Improved spacing in product cards
   • Review count shown with proper pluralization

Testing

reviews-ux-improvements.mp4

Updated Spacing for Product Cards:

Before

After

Migration

For developers with customized forks, merge conflicts may occur in:

1. New file: core/vibes/soul/sections/product-detail/rating-link.tsx - This is a new component, no conflicts expected.

2. GraphQL query changes: core/app/[locale]/(default)/product/[slug]/page-data.ts

   • Added numberOfReviews field to reviewSummary query
   • If you've customized the product query, ensure numberOfReviews is included in reviewSummary

3. Component interface changes:

   • ProductCard interface: Added optional numberOfReviews?: number to Product interface
   • Rating component: Added optional numberOfReviews?: number and showNumberOfReviews?: boolean props
   • ProductDetail component: Added optional numberOfReviews?: number to ProductDetailProduct interface

4. Data transformation updates: If you've customized product data transformations in:

   • core/app/[locale]/(default)/(faceted)/brand/[slug]/page.tsx
   • core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx
   • core/app/[locale]/(default)/(faceted)/search/page.tsx

   You'll need to add numberOfReviews: product.reviewSummary.numberOfReviews to your product mapping.

5. Product detail page: core/app/[locale]/(default)/product/[slug]/page.tsx

   • Added numberOfReviews to product data passed to ProductDetail
   • Wrapped Reviews component with <div id="reviews"> for scroll targeting
   • If you've customized the product page structure, ensure the reviews section has id="reviews" and the rating uses RatingLink instead of Rating

6. Styling changes: Minor spacing adjustments in ProductCard component (changed mb-2 to space-y-0.5 on container, removed mb-2 from subtitle). If you've customized these styles, review spacing adjustments.

Note: This pull request description was generated with the assistance of AI.

[changeset-bot]

🦋 Changeset detected

Latest commit: 5533caf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@bigcommerce/catalyst-core	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
catalyst-b2b	Ready	Preview, Comment	Dec 12, 2025 10:20pm
catalyst-canary	Ready	Preview, Comment	Dec 12, 2025 10:20pm

2 Skipped Deployments

Project	Deployment	Review	Updated (UTC)
catalyst	Ignored		Dec 12, 2025 10:20pm
catalyst-uplift-vertex	Ignored		Dec 12, 2025 10:20pm

[andrewreifman]

@matthewvolk Overall looks really good! Few notes:

• I actually would like to keep the spacing below the subtext below the product name. In Figma I'm using 6px (mb-1.5) below it. But if there is no subtext, then the price can be right under the product name like you show in the other examples.
• For the ratings within the product card, I'm using 4px top margin, 8px bottom margin.
• The compare checkbox looks too far to the left. It should visually be lined up with the left edge of the product card text.
• At some point, I thought all the compare checkboxes were at the bottom of the product cards (all cards stretched to match height) and horizontally aligned with each other. Did that change at some point?

[matthewvolk]

@andrewreifman Thank you for the quick review! Just pushed up changes that address all your feedback 🙂

[matthewvolk]

Forgot that disabled fields don't submit with native HTML forms 😅 This fixes that while still preventing modifications to the input.

[matthewvolk]

("this" being changing disabled → readOnly)