feat(promotions): PROMO-1507 add featured promotions callout to pdp and plp by bc-vivekaggarwal · Pull Request #3057 · bigcommerce/catalyst

bc-vivekaggarwal · 2026-06-22T01:19:47Z

What/Why?

Wire promotion callouts into PDP and PLP pages using live data from the Storefront GraphQL API (featuredPromotions on the Product type).

PDP: stacked callout boxes render inline below the price, one per active promotion.
PLP (category, brand, search): each product card shows its first promotion inline below the price; if there are multiple, a "+N more" label appears within the same callout.

Rollout/Rollback

Revert.

Testing

pnpm build passes
pnpm lint passes
PDP and PLP pages load for guest and authenticated users

testing notes / screenshots:

Homepage(no callouts):

PDP Page(Product related promotions):

PLP Page / Category:

Mobile view:

Migration

None.

changeset-bot · 2026-06-22T01:19:51Z

🦋 Changeset detected

Latest commit: 5f33ad6

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 · 2026-06-22T01:19:53Z

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

Project	Deployment	Actions	Updated (UTC)
catalyst	Ready	Preview, Comment	Jul 3, 2026 5:17am

github-actions · 2026-06-22T01:22:35Z

Bundle Size Report

Comparing against baseline from 61413d3 (2026-07-03).

Metric	Baseline	Current	Delta
Total JS	435.4 kB	444.6 kB	+9.2 kB (+2.1%)

Per-Route First Load JS

Route	Baseline	Current	Delta
/(default)/(auth)/change-password/page	318.8 kB	327.9 kB	+9.1 kB (+2.9%)
/(default)/(auth)/login/forgot-password/page	318 kB	327.1 kB	+9.1 kB (+2.9%)
/(default)/(auth)/login/page	318.4 kB	327.5 kB	+9.1 kB (+2.9%)
/(default)/(auth)/register/page	354.6 kB	363.7 kB	+9.1 kB (+2.6%)
/(default)/(faceted)/brand/[slug]/page	330.5 kB	339.6 kB	+9.1 kB (+2.8%)
/(default)/(faceted)/category/[slug]/page	339 kB	348.1 kB	+9.1 kB (+2.7%)
/(default)/(faceted)/search/page	330.5 kB	339.6 kB	+9.1 kB (+2.8%)
/(default)/[...rest]/page	313.5 kB	322.7 kB	+9.2 kB (+2.9%)
/(default)/account/addresses/page	358 kB	367.1 kB	+9.1 kB (+2.5%)
/(default)/account/orders/[id]/page	321.6 kB	330.8 kB	+9.2 kB (+2.9%)
/(default)/account/orders/page	322.6 kB	331.7 kB	+9.1 kB (+2.8%)
/(default)/account/settings/page	329.2 kB	338.3 kB	+9.1 kB (+2.8%)
/(default)/account/wishlists/[id]/page	336.4 kB	345.5 kB	+9.1 kB (+2.7%)
/(default)/account/wishlists/page	331.5 kB	340.6 kB	+9.1 kB (+2.7%)
/(default)/blog/[blogId]/page	313.5 kB	322.7 kB	+9.2 kB (+2.9%)
/(default)/blog/page	314.5 kB	323.6 kB	+9.1 kB (+2.9%)
/(default)/cart/page	334.3 kB	343.5 kB	+9.2 kB (+2.8%)
/(default)/compare/page	325.7 kB	334.8 kB	+9.1 kB (+2.8%)
/(default)/gift-certificates/balance/page	317.5 kB	326.6 kB	+9.1 kB (+2.9%)
/(default)/gift-certificates/page	313.5 kB	322.7 kB	+9.2 kB (+2.9%)
/(default)/gift-certificates/purchase/page	357.1 kB	366.2 kB	+9.1 kB (+2.5%)
/(default)/page	330.7 kB	339.8 kB	+9.1 kB (+2.8%)
/(default)/product/[slug]/page	385.4 kB	394.6 kB	+9.2 kB (+2.4%)
/(default)/webpages/[id]/contact/page	355.5 kB	364.6 kB	+9.1 kB (+2.6%)
/(default)/webpages/[id]/normal/page	321.6 kB	330.8 kB	+9.2 kB (+2.9%)
/(default)/wishlist/[token]/page	326.3 kB	335.5 kB	+9.2 kB (+2.8%)
/maintenance/page	307.1 kB	316.3 kB	+9.2 kB (+3%)

Threshold: 5% increase. Routes with ⚠️ exceed the threshold.

github-actions · 2026-06-22T02:23:36Z

Unlighthouse Performance Comparison — Vercel

Comparing PR preview deployment Unlighthouse scores vs production Unlighthouse scores.

Summary Score

Aggregate score across all categories as reported by Unlighthouse.

	Prod Desktop	Prod Mobile	Preview Desktop	Preview Mobile
Score	90	93	91	95

Category Scores

Category	Prod Desktop	Prod Mobile	Preview Desktop	Preview Mobile
Performance	76	88	74	76
Accessibility	95	98	95	98
Best Practices	100	100	100	100
SEO	88	88	100	100

Core Web Vitals

Metric	Prod Desktop	Prod Mobile	Preview Desktop	Preview Mobile
LCP	3.6 s	3.8 s	3.6 s	6.5 s
CLS	0.001	0.055	0.04	0.011
FCP	1.2 s	1.2 s	1.2 s	1.2 s
TBT	0 ms	10 ms	10 ms	0 ms
Max Potential FID	50 ms	60 ms	70 ms	40 ms
Time to Interactive	3.6 s	3.9 s	4.5 s	6.5 s

Full Unlighthouse report →

jorgemoya · 2026-06-25T20:54:38Z

Code looks good but design seems off. @andrewreifman do you have input on this?

andrewreifman · 2026-06-25T22:48:28Z

So @hunterbecton just released a Callout component into Storefrontkit to be used within PLP and PDP that was requested by others on the TRAC team, but this appears to be a different type of component and use case. Based on the screenshots above, this look more like the Banner, but supporting multiple items/text instead of just one.

bc-vivekaggarwal · 2026-06-29T11:04:44Z

@jorgemoya and @andrewreifman Thanks for pointing out about the callout component and outdated designs.
I have implemented the changes as suggested in the thread and incorporated the new designs.
Waiting on callout prop to be included in the ProductCard. Meanwhile, would really appreciate your feedback on the changes.

…nd plp using mock data

…n PDP and PLP pages

…t on PDP and PLP pages

bc-vivekaggarwal · 2026-07-05T23:09:18Z

[E2E Tests / E2E Functional Tests (default) (pull_request)] tests are failing after merge from canary. Same with other PRs: #3062

parthshahp

Approved, non-blocking question.

parthshahp · 2026-07-07T13:37:33Z

+            {promotions != null && promotions.length > 0 && (
+              <div className="mt-1.5">
+                <CalloutRoot
+                  className="items-start rounded-md border border-yellow-300 bg-yellow-50 px-2.5 py-1.5"
+                  size="small"
+                  variant="warning"
+                >
+                  <CalloutContent>
+                    <CalloutHeader>
+                      <CalloutTitle className="text-xs font-semibold leading-snug text-yellow-900">
+                        {promotions[0]?.text ?? ''}
+                      </CalloutTitle>
+                      {promotions.length > 1 && (
+                        <CalloutDescription className="text-xs text-yellow-900/70">
+                          +{promotions.length - 1} {moreOffersLabel}
+                        </CalloutDescription>
+                      )}
+                    </CalloutHeader>
+                  </CalloutContent>
+                </CalloutRoot>
+              </div>
+            )}


🍹 I wonder if this is better as a separate component?

It's intentionally inline — the block is small and directly composes storefront-kit's Callout primitives without custom logic. Extracting it to a separate component would only make sense if it were reused, but promotion callout styling varies per context (card vs. PDP), so a shared component would need its own props and variants anyway. Not worth the indirection at this size.

bc-vivekaggarwal requested a review from a team as a code owner June 22, 2026 01:19

vercel Bot deployed to Preview June 22, 2026 01:22 View deployment

bc-vivekaggarwal force-pushed the PROMO-1507-promotion-callout-plp-pdp branch from 587f0a7 to a1c841d Compare June 22, 2026 01:49

vercel Bot deployed to Preview June 22, 2026 01:50 View deployment

bc-vivekaggarwal marked this pull request as draft June 22, 2026 03:05

bc-vivekaggarwal force-pushed the PROMO-1507-promotion-callout-plp-pdp branch from a1c841d to 7d235d4 Compare June 22, 2026 06:07

vercel Bot deployed to Preview June 22, 2026 06:08 View deployment

bc-vivekaggarwal force-pushed the PROMO-1507-promotion-callout-plp-pdp branch from 7d235d4 to 773bae3 Compare June 22, 2026 07:00

vercel Bot deployed to Preview June 22, 2026 07:01 View deployment

bc-vivekaggarwal force-pushed the PROMO-1507-promotion-callout-plp-pdp branch from 773bae3 to 3c11f1f Compare June 25, 2026 00:35

vercel Bot deployed to Preview June 25, 2026 00:36 View deployment

bc-vivekaggarwal requested review from bc-chaozhang and donald-nguyen-bc June 25, 2026 00:46

bc-vivekaggarwal marked this pull request as ready for review June 25, 2026 00:48

bc-vivekaggarwal force-pushed the PROMO-1507-promotion-callout-plp-pdp branch from 3c11f1f to 76736d1 Compare June 25, 2026 00:53

vercel Bot deployed to Preview June 25, 2026 00:54 View deployment

bc-vivekaggarwal marked this pull request as draft June 26, 2026 04:10

vercel Bot deployed to Preview June 26, 2026 07:03 View deployment

bc-vivekaggarwal force-pushed the PROMO-1507-promotion-callout-plp-pdp branch from 6f99f72 to 2e968cb Compare June 26, 2026 07:08

vercel Bot deployed to Preview June 26, 2026 07:09 View deployment

bc-vivekaggarwal force-pushed the PROMO-1507-promotion-callout-plp-pdp branch from 2e968cb to e117655 Compare June 26, 2026 07:13

vercel Bot deployed to Preview June 26, 2026 07:14 View deployment

bc-vivekaggarwal force-pushed the PROMO-1507-promotion-callout-plp-pdp branch from e117655 to f6d4bfa Compare June 26, 2026 07:20

vercel Bot deployed to Preview June 26, 2026 07:21 View deployment

bc-vivekaggarwal marked this pull request as ready for review June 26, 2026 08:57

bc-vivekaggarwal force-pushed the PROMO-1507-promotion-callout-plp-pdp branch from f6d4bfa to 4a7216e Compare June 26, 2026 11:28

vercel Bot deployed to Preview June 26, 2026 11:29 View deployment

bc-vivekaggarwal requested a review from hunterbecton July 2, 2026 01:04

bc-vivekaggarwal added 3 commits July 3, 2026 15:14

feat(promotions): PROMO-1507 add featured promotions callout to pdp a…

bf5f371

…nd plp using mock data

feat(promotions): PROMO-1507 wire GQL query for featured promotions o…

a731faa

…n PDP and PLP pages

feat(promotions): PROMO-1507 use callout component from storefront-ki…

5f33ad6

…t on PDP and PLP pages

bc-vivekaggarwal force-pushed the PROMO-1507-promotion-callout-plp-pdp branch from 4a7216e to 5f33ad6 Compare July 3, 2026 05:16

vercel Bot deployed to Preview July 3, 2026 05:17 View deployment

parthshahp approved these changes Jul 7, 2026

View reviewed changes

bc-vivekaggarwal added this pull request to the merge queue Jul 7, 2026

Merged via the queue into canary with commit a763acc Jul 7, 2026
27 of 29 checks passed

bc-vivekaggarwal deleted the PROMO-1507-promotion-callout-plp-pdp branch July 7, 2026 23:18

github-actions Bot mentioned this pull request Jul 7, 2026

Version Packages (canary) #3082

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(promotions): PROMO-1507 add featured promotions callout to pdp and plp #3057

feat(promotions): PROMO-1507 add featured promotions callout to pdp and plp #3057
bc-vivekaggarwal merged 3 commits into
canaryfrom
PROMO-1507-promotion-callout-plp-pdp

bc-vivekaggarwal commented Jun 22, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jun 22, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jun 22, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 22, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 22, 2026 •

edited

Loading

Uh oh!

jorgemoya commented Jun 25, 2026

Uh oh!

andrewreifman commented Jun 25, 2026

Uh oh!

bc-vivekaggarwal commented Jun 29, 2026

Uh oh!

bc-vivekaggarwal commented Jul 5, 2026

Uh oh!

parthshahp left a comment

Uh oh!

parthshahp Jul 7, 2026

Uh oh!

bc-vivekaggarwal Jul 7, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

bc-vivekaggarwal commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What/Why?

Rollout/Rollback

Testing

testing notes / screenshots:

Migration

Uh oh!

changeset-bot Bot commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel Bot commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Size Report

Per-Route First Load JS

Uh oh!

github-actions Bot commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Unlighthouse Performance Comparison — Vercel

Summary Score

Category Scores

Core Web Vitals

Uh oh!

jorgemoya commented Jun 25, 2026

Uh oh!

andrewreifman commented Jun 25, 2026

Uh oh!

bc-vivekaggarwal commented Jun 29, 2026

Uh oh!

bc-vivekaggarwal commented Jul 5, 2026

Uh oh!

parthshahp left a comment

Choose a reason for hiding this comment

Uh oh!

parthshahp Jul 7, 2026

Choose a reason for hiding this comment

Uh oh!

bc-vivekaggarwal Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

bc-vivekaggarwal commented Jun 22, 2026 •

edited

Loading

changeset-bot Bot commented Jun 22, 2026 •

edited

Loading

vercel Bot commented Jun 22, 2026 •

edited

Loading

github-actions Bot commented Jun 22, 2026 •

edited

Loading

github-actions Bot commented Jun 22, 2026 •

edited

Loading

bc-vivekaggarwal Jul 7, 2026 •

edited

Loading