Discount Code Widget

Creating a Discount Code Widget

This section will guide you through creating a Discount Code widget, a powerful tool for boosting conversions by allowing customers to easily apply promo codes.

Widget Overview

Widget Name: Discount Code

Purpose: The Discount Code widget allows customers to enter and apply a discount or promo code directly in the cart or checkout. This feature is designed to encourage higher conversion rates and reward specific promotions.

Where It Works: Cart, Checkout

Main Features:

- An input box for entering a discount or promo code.
- An Apply button to validate and apply the discount.
- Automatic price adjustment on eligible items.

Configuration Options: You can enable or disable the discount input, restrict it by audience or campaign, and customize error messages for invalid codes.

Limitations:

- It only works with active, valid discount codes that have been set up in Shopify.
- It may conflict with automatic discounts if not configured properly.
- Some discount types may require backend setup beyond just entering the code.

Step-by-Step Creation

Click Create Widgets: From your dashboard, click Create Widgets. A new page titled "Add New Widgets" will appear.
Fill in the Details: Fill in the Widget Title and a Short Description for your widget.
Select a Template: If there are any existing widgets that align with your title, they will appear at the bottom of the page. Select the one you wish to use.

After you have filled in the basic details and selected a template, click Next to be taken to the widget's main configuration page. This page is divided into different sections that control the widget's functionality and appearance.

Let's break down the options in the Content part of the widget editor. The

Content tab is where you control the core functionality of the widget.

Title Options

Hide Title: This checkbox controls whether the widget title is displayed. When enabled, the widget will show just the input box. When disabled, the widget's title will be visible above the input box.
Title Text: This field allows you to give the widget a custom title.

Prefix Options

Enter Prefix: You can enable a prefix for your discount codes by checking this box. When enabled, you must also provide a message that will be displayed to the customer. This can be used to limit and show a specific message for certain codes.

Input Box Area

This is the main area where the customer will enter their discount code.

After setting the title and prefix options, you can customize the appearance and behavior of the input box itself.

Show Box on Title

This option controls whether the title is displayed within a box.

If enabled, your widget will appear with the title inside a box.
If disabled, the widget will show the title without a surrounding box.

Customizable Text Fields

You can also customize the text that appears within the widget:

Placeholder Text: Customize the text that appears inside the input box before a user types anything.
Button Text: Change the text on the Apply button.
Custom Error Text: Write your own error messages for invalid codes.

Once you have completed these customizations, click the Save Changes button.

Customizing Widget Style

After configuring the widget's content, the next step is to customize its style to match your store's branding. The Style section is divided into four main parts.

1. General

The General section allows you to customize the overall look of your widget. You can change:

Background color
Title color
Title alignment
Font size
Font family
Font weight

2. Input Box Area

This section controls the styling of the input field and button. Here, you can adjust:

Input field background color
Placeholder text color
Button background color
Button text color
Placeholder font size
Border radius
Button font size

3. Error Message

You can customize the appearance of error messages to ensure they are clear and easy for your customers to read. This section allows you to change the:

Error message alignment
Message color
Font size
Font family
Font weight

4. Discount Codes

This part allows you to customize the styling of the discount code text itself. You can change the:

Text color
Background color
Font size
Font family
Font weight

You have now successfully created and fully customized your discount code widget.

This section provides advanced options for customizing your widget's display.

Device Targeting: Here, you can control where the widget appears based on the user's device (e.g., desktop, mobile, tablet).
Custom CSS: You can write and apply your own custom CSS to the widget. This gives you complete control over the design and allows you to make more specific style changes beyond the standard options.