Getting Started with Design Maker for Campaigns
Design Maker for Campaigns allows you to easily customize how discount codes and automatic discounts appear in your store. You can choose to follow the global settings or tailor the design by adjusting colors, placement, promotional text, and more to match your brand style.
Once set up, the design is applied to your storefront, showcasing campaign uniqueness with consistent visual style. This enhances the shopping experience and boots conversion rates through engaging and recognizable promotions.
This guide outlines how to use Design Maker for Campaigns to design the display style for your promotions, including adding discount codes for storefront display, customizing the appearance of both discount codes and automatic discounts, and applying global settings for unified styling.
Understanding the Design Maker for Campaigns Dashboard
At the top of the Design Maker for Campaigns dashboard, use the tabs to switch between Discount code campaigns and Automatic discounts. This allows you to manage the design styles for both types of campaigns within one interface.
| Note: Only manually added discount codes will appear in the Discount code campaigns list, allowing you to control which codes are displayed on your storefront. Automatic discounts, on the other hand, are automatically synchronized from your store’s active promotions. To learn how to add discount codes for customization, refer to Adding Discount Codes for Display and Customization. |
In each tab, you’ll find a list of all discount campaigns available in your store. Each campaign is displayed with key details such as the Discount code name, type, status, active time, whether the design is shown on the product detail page or checkout page, and whether the product page follows the global settings.
To edit the design of a specific discount, simply click its Discount code name to enter the editing page.
Adding Discount Codes for Display and Customization
To display discount codes on the storefront and customize their design, you need to manually add them to the Discount code campaigns dashboard.
| Note: Unlike discount codes, automatic discounts that meet the qualifying conditions are automatically applied by the system using the configured design settings, so no manual selection or addition is required. |
Follow the steps below to manually add discount codes for display and style customization:
-
In the Discount code campaigns tab, click Select discount code.
-
In the pop-up window, select the discount code you want to display in the storefront and customize the style for, then click Select.
- The selected discount code will then appear on the dashboard, ready for design customization and publishing.
Configuring the Display Style for Discount Codes
Customizing the Display Style
To give your discount code campaigns a unique look, you can customize how they appear on your storefront after adding the discount codes. This ensures the display aligns with your campaign’s design and layout preferences. Follow these steps:
-
From the dashboard, select Discount code campaigns, then click the discount code you want to customize.
-
On the settings page, select the page where you want to customize the display: Product detail page, Activity landing page, or Checkout page.
- Follow the Customizing the Display Style for Discount Codes guide for step-by-step instructions on how to customize discount code displays across different storefront pages.
Using Global Settings
To quickly and easily design your discount styles, enable Follow global style. This allows you to design and apply a unified display style across all your campaigns. To configure the global settings, follow these steps:
| Note: For discount code campaigns, Follow global style is available only for the Product detail page display setting. |
-
Under the Multi-discount code banner section, click Style setting.
-
In this unified template, configure the Template and Design settings for all discount code campaigns that have Follow Global Style enabled.
Note: For detailed instructions on setting up global styles for discount codes, refer to the Applying a Unified Design with Global Style section in Display Settings for the Product Detail Page. - After configuring the design, go back to each discount code‘s product detail page where you want to apply the unified design, then enable Follow global style.
Configuring Display Style for Automatic Discounts
Customizing the Display Style
To give your automatic discounts a unique look, you can customize how they appear on your storefront. This ensures the display aligns with your campaign’s design and layout preferences. Follow these steps:
-
From the dashboard, select Automatic discount, then click the automatic discount you want to customize.
-
On the setting page, select the page where you want to customize the display: Product detail page, Cart page or Activity landing page.
- Follow the Customizing the Display Style for Automatic Discounts guide for step-by-step instructions on how to customize automatic discount displays across different storefront pages.
Using Global Settings
To quickly and easily design your automatic discount styles, enable Follow global style. This allows you to design and apply a unified display style across all your automatic discounts. To configure the global settings, follow these steps:
| Note: For automatic discounts, Follow global style is available only for the Product detail page and Cart page display settings. |
-
Under the Global automatic discount setting section, click Style setting.
-
In this unified template, configure the Template and Design settings for all automatic discounts code that have Follow Global Style enabled.
Note: For detailed instructions on setting up global styles for automatic codes, refer to the Applying a Unified Design with Global Style section in Display Settings for the Product Detail Page. - After configuring the design, go back to each automatic discount‘s product detail page where you want to apply the unified design, then enable Follow global style.