Configuration

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

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

1. Set up a promotion/campaign.
2. Configure deal data (appearance and behavior).
3. Link the deals to products.

Setting Up a New Promotion or Campaign

Create a New Deal

Navigate to Promotions:

1. Log in to your SCAYLE Panel.
2. Go to Shops → Promotions.
3. Choose your desired promotion type (e.g., "Automated Discount," "Price Campaigns").

Create a New Deal:

1. Click on + New Promotion (or + New Price Campaign for campaigns).
2. Select your promotion type and define its core conditions (e.g., discount value, schedule).

Refer to the SCAYLE Promotion Guide and to the SCAYLE Campaign Guide for setup details and step-by-step tutorials.

Configure Custom UI Fields (Appearance & Behavior)

To enhance the default UI of deal components, you can use the customization section of the deal setup. All UI data is available as direct inputs in the Panel for both promotions and campaigns. To access these inputs, enable the corresponding toggle in the "Promotion Design" or "Campaign Design" section (on the main promotion/campaign setup page; for campaigns, specifically under Campaign → Settings). The available inputs are almost identical across both deal types.

Configuring Promotions

To enhance the default UI of promotion components, you add configuration data to your promotions. The fields described in "Deal Properties & Their Usage" apply here.

Full Setup Flow

1. Create a new promotion (do not customize design initially).
2. Save the promotion.
3. Create a new Attribute ID (as described in "Link a Promotion to Products").
4. Link the promotion to products using this Attribute ID.
5. Go back to the promotion setup, enable the "Promotion Design" toggle, and fill in the new design fields, including the Attribute ID from step 3.
6. Save the customized promotion.
7. If the promotion is set for multiple countries, proceed to the "Translations" page to translate content.

Configuring Campaigns

The configuration for campaigns defines key attributes directly at the top level of the campaign object. The fields described in "Deal Properties & Their Usage" apply here.

Full Setup Flow

1. Create a new price campaign.
2. Enable the design toggle, and fill in the new design fields.
3. Save the customized campaign.
4. If the campaign is set for multiple countries, proceed to the "Translations" page to translate content.

Link a Promotion to Products

To ensure a 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 if it doesn't exist yet.\

   

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 promotion configuration under the Link Promotion to Products section.

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.

Handle Translations for Multi-Country Deals

If a deal (promotion or campaign) is set for multiple countries, a translation box will appear above the translatable fields (e.g., subline, conditions, link for all deals, and headline for campaigns) in the SCAYLE Panel.

• Translation Process: Translations are handled on the dedicated "Translations" page, which becomes accessible after the deal setup is finished and the data is saved.
• Manual Updates: Translated values will not be automatically updated if the default fields for an already created and translated deal are modified. Please manually check and update your translations on the "Translations" page to ensure consistency across all locales.

Deal Properties & Their Usage

Colors

• Frontend Property: color.
• Description: Customizes the background and text color of all deal components. Set via color picker.
• SCAYLE Panel Field: "Colors" with color pickers (under Promotion/Campaign Design).
• Example Value: { "background": "#f4c2c2", "text": "#000000" }
• Type: Object with background (hex code) and text (hex code) properties.
• Translatable: No.
• Fallback: If not provided, the system uses the default colors defined in ~/utils/promotion.ts (FALLBACK_PROMOTION_COLORS for promotions, FALLBACK_CAMPAIGN_COLORS for campaigns).

Display Countdown

• Frontend Property: hideCountdown.
• Description: Controls the visibility of the countdown timer in the Ribbon, Banner, and Overview Card. Set via toggle.
• SCAYLE Panel Field: "Display Countdown" toggle (under Promotion/Campaign Design).
• Example Value: true.
• Type: Boolean (true/false).
• Default: true (countdown is displayed if not explicitly hidden).
• Translatable: No.

Attribute ID (Promotions Only)

• Frontend Property: product.attributeId.
• Description: Links the promotion to specific products for Badge and Banner display on PDP. This field should be filled in.
• SCAYLE Panel Field: Second field under "Link Promotion to Products" (under Promotion Design).
• Example Value: 2640
• Type: Integer (ID).
• Translatable: No.
• Fallback: Badge, Banner, and Gift Collection will not be displayed on the PDP if the product is not linked to a promotion by an attributeId. They will only appear after a variant of that product has been added to the basket and the same variant is selected on the PDP.

Display Name

• Frontend Property:
  • Promotions: displayName
  • Campaigns: headline
• Description: Main deal title displayed in Ribbon, Banner, Overview Card, Basket Price Summary.
• SCAYLE Panel Field: "Display Name" (for Promotions, at top of page) or "Headline" (for Campaigns, under Campaign Design).
• Example Value: "Final Winter Sale".
• Type: Text string.
• Translatable: Yes.
• Fallback: If not set, the system may use the deal's default name.

Subline

• Frontend Property: subline.
• Description: Secondary text displayed in Ribbon, Banner, Overview Card.
• SCAYLE Panel Field: "Subline" (under Promotion/Campaign Design).
• Example Value: "Up to -60% off on selected items".
• Type: Text string.
• Translatable: Yes.
• Fallback: Not displayed if missing.

Conditions

• Frontend Property: condition.
• Description: Detailed condition text displayed in the Deals Overview flyout.
• SCAYLE Panel Field: "Conditions" (under Promotion/Campaign Design).
• Example Value: "The promotion applies to winter season products...".
• Type: Text string.
• Translatable: Yes.
• Fallback: Not displayed if missing.

Badge Label

• Frontend Property: product.badgeLabel.
• Description: Custom text displayed on the deal's badge.
• SCAYLE Panel Field: "Badge Label" (under Promotion/Campaign Design).
• Example Value: "Final Winter Sale" .
• Type: Text string.
• Translatable: Yes.
• Fallback: Defaults to a generic label ("Deal" for promotions and "Special" for campaigns) if missing.

Link

• Frontend Property: link.
• Description: Makes the Ribbon, Banner, and Overview Card clickable, redirecting to this URL. Only relative paths are supported.
• SCAYLE Panel Field: "Link" (under Promotion/Campaign Design).
• Example Value: "/c/c-50342?filters[color]=32".
• Type: Relative URL path (text string).
• Translatable: Yes.
• Fallback: Components are not clickable if missing.