From 7d2d48871970d6db7e557eecc285dd4ee902ddc7 Mon Sep 17 00:00:00 2001 From: "donald.nguyen" Date: Fri, 26 Jun 2026 15:06:08 +1000 Subject: [PATCH 1/2] feat(promotions): PROMO-1497 display "featured promotion callouts" in PLP and PDP --- assets/scss/layouts/_layouts.scss | 3 + .../layouts/products/_promotionCallout.scss | 57 +++++++++++++++++++ config.json | 3 + lang/en.json | 5 +- schema.json | 24 ++++++++ schemaTranslations.json | 12 ++++ templates/components/products/card.html | 7 +++ templates/components/products/list-item.html | 7 +++ .../components/products/product-view.html | 6 ++ .../products/promotion-callout.html | 22 +++++++ 10 files changed, 145 insertions(+), 1 deletion(-) create mode 100644 assets/scss/layouts/products/_promotionCallout.scss create mode 100644 templates/components/products/promotion-callout.html diff --git a/assets/scss/layouts/_layouts.scss b/assets/scss/layouts/_layouts.scss index ad18a92264..00eff2b220 100644 --- a/assets/scss/layouts/_layouts.scss +++ b/assets/scss/layouts/_layouts.scss @@ -46,6 +46,9 @@ // Product Sale Badges @import "products/productSaleBadges"; +// Featured Promotion Callouts +@import "products/promotionCallout"; + // Product view @import "products/productSwatch"; diff --git a/assets/scss/layouts/products/_promotionCallout.scss b/assets/scss/layouts/products/_promotionCallout.scss new file mode 100644 index 0000000000..9278b36e64 --- /dev/null +++ b/assets/scss/layouts/products/_promotionCallout.scss @@ -0,0 +1,57 @@ +// ============================================================================= +// PRODUCT Promotion Callouts (CSS) +// ============================================================================= + +.promotionCallout { + margin-top: spacing("quarter"); +} + +.promotionCallout-item { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: spacing("quarter"); + padding: spacing("quarter") spacing("half"); + background: stencilColor("color_bg_featured_promotions"); + border: 1px solid rgba(0, 0, 0, 0.08); + border-radius: 4px; +} + +.promotionCallout-icon { + flex-shrink: 0; + width: 16px; + height: 16px; + stroke: stencilColor("color_text_featured_promotions"); +} + +.promotionCallout-text { + font-size: fontSize("smaller"); + color: stencilColor("color_text_featured_promotions"); + font-weight: fontWeight("semibold"); + line-height: lineHeight("smallest"); +} + +.promotionCallout-more { + flex-basis: 100%; + font-size: fontSize("smallest"); + color: stencilColor("color_text_featured_promotions"); + opacity: 0.7; +} + +.promotionCallout--full { + list-style: none; + margin: 0 0 spacing("half"); + padding: 0; + + .promotionCallout-item + .promotionCallout-item { + margin-top: spacing("quarter"); + } +} + +.card-body .promotionCallout--compact { + margin-top: spacing("quarter"); +} + +.listItem-actions .promotionCallout--compact { + margin-top: spacing("quarter"); +} diff --git a/config.json b/config.json index a6a8b711fc..a60b20b7b2 100644 --- a/config.json +++ b/config.json @@ -334,6 +334,9 @@ "color_badge_product_sold_out_badges": "#007dc6", "color_text_product_sold_out_badges": "#ffffff", "color_hover_product_sold_out_badges": "#000000", + "show_featured_promotions": true, + "color_bg_featured_promotions": "#fef9e7", + "color_text_featured_promotions": "#856404", "focusTooltip-textColor": "#ffffff", "focusTooltip-backgroundColor": "#313440", "swatch_option_size": "22x22", diff --git a/lang/en.json b/lang/en.json index bf2a14fde2..d22f73278c 100755 --- a/lang/en.json +++ b/lang/en.json @@ -835,7 +835,10 @@ "suffix": "each" } }, - "card_default_image_alt": "Image coming soon" + "card_default_image_alt": "Image coming soon", + "featured_promotions": { + "more_offers": "more offers" + } }, "invoice": { "for_order": "{name} Invoice for Order #{id}", diff --git a/schema.json b/schema.json index 312871d9b6..e6278e5920 100644 --- a/schema.json +++ b/schema.json @@ -1351,6 +1351,30 @@ "reference": "product_sold_out_badges", "reference_default": "none" }, + { + "type": "heading", + "content": "i18n.FeaturedPromotions" + }, + { + "type": "checkbox", + "label": "i18n.ShowFeaturedPromotions", + "force_reload": true, + "id": "show_featured_promotions" + }, + { + "type": "color", + "label": "i18n.FeaturedPromotionBackgroundColor", + "id": "color_bg_featured_promotions", + "reference": "show_featured_promotions", + "reference_default": false + }, + { + "type": "color", + "label": "i18n.FeaturedPromotionTextColor", + "id": "color_text_featured_promotions", + "reference": "show_featured_promotions", + "reference_default": false + }, { "type": "heading", "content": "i18n.DisplaySettings" diff --git a/schemaTranslations.json b/schemaTranslations.json index 5928546395..5db948fe55 100644 --- a/schemaTranslations.json +++ b/schemaTranslations.json @@ -2032,6 +2032,18 @@ "pl": "Tło stopki", "ja": "フッターの背景" }, + "i18n.FeaturedPromotions": { + "default": "Featured Promotions" + }, + "i18n.ShowFeaturedPromotions": { + "default": "Show featured promotions" + }, + "i18n.FeaturedPromotionBackgroundColor": { + "default": "Featured promotion background color" + }, + "i18n.FeaturedPromotionTextColor": { + "default": "Featured promotion text color" + }, "i18n.DisplaySettings": { "default": "Display settings", "fr": "Paramètres d'affichage", diff --git a/templates/components/products/card.html b/templates/components/products/card.html index c90f62e76a..90ff44de68 100644 --- a/templates/components/products/card.html +++ b/templates/components/products/card.html @@ -134,5 +134,12 @@

{{{region name="product_item_below_price"}}} {{> components/products/bulk-discount-rates}} + {{#if theme_settings.show_featured_promotions}} + {{> components/products/promotion-callout + promotions=featured_promotions + mode="compact" + productUrl=url + }} + {{/if}} diff --git a/templates/components/products/list-item.html b/templates/components/products/list-item.html index b2678a4ab1..157cd28cc8 100644 --- a/templates/components/products/list-item.html +++ b/templates/components/products/list-item.html @@ -91,6 +91,13 @@

{{else}} {{> components/common/login-for-pricing}} {{/or}} + {{#if theme_settings.show_featured_promotions}} + {{> components/products/promotion-callout + promotions=featured_promotions + mode="compact" + productUrl=url + }} + {{/if}} {{#if show_cart_action}} {{#if has_options}} {{lang 'products.choose_options'}} diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html index 10553661de..ae5739285f 100644 --- a/templates/components/products/product-view.html +++ b/templates/components/products/product-view.html @@ -126,6 +126,12 @@

{{/or}} {{{region name="product_below_price"}}} + {{#if theme_settings.show_featured_promotions}} + {{> components/products/promotion-callout + promotions=product.featured_promotions + mode="full" + }} + {{/if}}
{{#if settings.show_product_rating}} {{> components/products/ratings rating=product.rating}} diff --git a/templates/components/products/promotion-callout.html b/templates/components/products/promotion-callout.html new file mode 100644 index 0000000000..dc50fd1013 --- /dev/null +++ b/templates/components/products/promotion-callout.html @@ -0,0 +1,22 @@ +{{#if promotions.length}} +{{#if mode '===' 'compact'}} +
+
+ {{promotions.[0].text}} + {{#if promotions.[1]}} + + +{{subtract promotions.length 1}} {{lang 'products.featured_promotions.more_offers'}} + + {{/if}} +
+
+{{else}} +
    + {{#each promotions}} +
  • + {{text}} +
    • + {{/each}} +
+{{/if}} +{{/if}} From 6bab10078767782f8ff4e4f75e4d7af8d122020e Mon Sep 17 00:00:00 2001 From: "donald.nguyen" Date: Fri, 3 Jul 2026 10:36:17 +1000 Subject: [PATCH 2/2] chore(promotions): PROMO-1497 to address PR comment: - we don't need productUrl param --- templates/components/products/card.html | 1 - templates/components/products/list-item.html | 1 - 2 files changed, 2 deletions(-) diff --git a/templates/components/products/card.html b/templates/components/products/card.html index 90ff44de68..d7de61d1da 100644 --- a/templates/components/products/card.html +++ b/templates/components/products/card.html @@ -138,7 +138,6 @@

{{> components/products/promotion-callout promotions=featured_promotions mode="compact" - productUrl=url }} {{/if}}

diff --git a/templates/components/products/list-item.html b/templates/components/products/list-item.html index 157cd28cc8..bbf7b6184a 100644 --- a/templates/components/products/list-item.html +++ b/templates/components/products/list-item.html @@ -95,7 +95,6 @@

{{> components/products/promotion-callout promotions=featured_promotions mode="compact" - productUrl=url }} {{/if}} {{#if show_cart_action}}