docs

Configuration

The SCAYLE Panel allows you to efficiently set up and manage promotions. With correct configuration, all promotion-related components—such as promotion cards, banners, discounts, badges, and ribbons—will display as expected across the Storefront.

To ensure full support for all promotion features implemented in the Storefront Application, follow these three essential steps:

  1. Set up a promotion
  2. Configure customData
  3. Link the promotion to products

Setting Up a Promotion

  1. Navigate to Shops → Promotions and choose your promotion type.
  2. Click on + New Promotion.
  3. Select your promotion type and conditions.
  4. Refer to the SCAYLE Promotion Guide for setup details and step-by-step tutorials.

Configuring customData

To enhance the default UI of promotion components, you can add customData to your promotions. This allows you to customize colors, labels, links, and include additional UX elements like headlines, sublines, or minimum order value logic.

How to Add customData:

  1. Open the promotion in the SCAYLE Panel.
  2. Click on Edit → Three dots → Edit Additional Data.

    Accessing the customData Configuration

  3. Paste your customData into the modal using the following schema (replace the values with ones that suit your needs):

customData Fields & Their Usage

FieldExampleUsed ForFallback
headline"Final Winter Sale"Ribbon, banner, overview card, basket price summaryPromotion name
subline"Up to -60% off on selected items"Ribbon, banner, overview cardDon’t show if not set
link

"/c/c-50342?filterscolor=32"

⚠️ only relative links are supported

Clickable ribbon, banner, overview cardNot clickable if missing
hideCountdowntrueRibbon, banner, overview cardDisplayed by default
color{ background: "#f4c2c2", text: "#000000" }All elementsDefault promotion theme
product.attributeId123Badge, bannerDon’t display badge, banner, and gift collection on the PDP
product.badgeLabel"Winter Sale"Badge label"DEAL"
minimumOrderValue10000MOV (Minimum Order Value) bannerDon’t show if not set
conditions"Applies to winter products"Overview cardDon’t show if not set

Linking a Promotion to Products

To ensure correct display of promotion-related components, the promotion must be linked to the relevant products.

Step-by-step:

  1. After creating the promotion, go to Settings → Product Structure → Attributes.
  2. Create a new attribute group called Promotion.

    Promotion Attribute Group

  3. Within this group, go to the Attributes tab and add a new attribute representing your promotion.

    Promotion Attributes

  4. Click Save. An ID will be generated—this is your attributeId.

    Attribute ID

  5. Add this ID to your customData under product.attributeId.

Now, link the attribute to your products:

  1. Go to Products in the SCAYLE Panel.
  2. Use filters to select a product category, or select products manually.
  3. Click Update.
  4. In the modal:
    • Type: Attribute Group
    • Attribute Group: Promotion
    • Action: Replace
    • Target Values: [Your promotion name]

    Adding Promotion Attribute Group to Products

  5. Click Proceed.

Congrats! You've successfully completed your promotion setup and unlocked full support for all Storefront promotion features!

Next up
Composables