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.\

   

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

json

Copy

{
  "headline": "Final Winter Sale",
  "subline": "Up to -60% off on selected items",
  "link": "/c/c-50342?filters[color]=32",
  "hideCountdown": true;
  "color": {
    background: "#f4c2c2",
    text: "#000000"
  },
  "product": {
    "attributeId": 2639,
    "badgeLabel": "Final Winter Sale"
  },
  "minimumOrderValue": 10000,
  "conditions": "The promotion applies to winter season products. If you buy 1 or more products, you will get up to 60% discount on these products. The promotion lasts till the end of March 1st, 2025."
}

customData Fields & Their Usage

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.\

   

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

   

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

   

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]\

   

5. Click Proceed.

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