The Gift Card Product widgets are designed to display gift cards on your website. These widgets include features like selecting a gift card, choosing amounts, adding a personalized message, etc. They simplify the process of handling gift cards for you and your customers, integrating seamlessly with your website checkout and payment systems.
Adding Gift Card Product Widgets
To add the Gift Card Product Widgets:
- Go to Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
- Open Page on the top panel and navigate to Ecommerce > Gift Card.
- Open the Widgets list on the left panel.
- Type the widget name in the search bar, or expand the Ecommerce > Gift Card Product Widgets grouping and select the corresponding widget.
Drag the widget from the list and drop it into the Product List widget.
Tip: To use the Gift Card Products Widgets, make sure to drop the Product List widget onto the Layout Canvas and drop your required widget from the grouping.
Configuring the Gift Card Product Widgets
Once you have added the corresponding widget, click it to activate the Property Panel, where you can customize its Styles, Content, and Settings according to your preferences.
To modify the widget:
- Go to Styles to configure the principal styling features (see Global Styles).
- Go to Content to modify the widget content.
- Go to Settings and expand Visibility to modify the visibility of the widget on your website. Select who can view the widget according to the customer's location, session status, used device type, browser, language preference, etc. (see Visibility Settings).
Tip:
- You can access the UI Elements in the Design System. To do so, click the bookmark icon in the upper-right corner of the Property Panel. Select one as a base for the widget, or click the plus icon to create a new UI Element and style it according to your preferences.
- Once you have customized each mode, you can use the Dotted Menu to reset or override the widget styles. To do so:
- Click the Dotted Menu in the right corner of the Property Panel.
- Select Reset Styles to discard the changes made to the widget and restore its default style.
- Select Override Styles to update the default style of the base element (font, size, alignment, etc.) and the elements derived from the base one.
Add to Cart
The Add to Cart widget allows your customers to add a product to their shopping cart, making it easy for them to begin the purchase process. For more details, see Add to Cart Widget.
Buy Now
The Buy Now widget allows your customers to quickly purchase a product with a single click or interaction. It takes your customers directly to the checkout page without affecting the items stored in the Cart. For more details, see Buy Now Widget.
Gift Card Options
The Gift Card Options widget allows your customers to select the predefined amount or enter a custom amount before purchasing it.
Note: If you want customers to specify their desired amount instead of selecting from the predefined options, make the necessary configuration on the Dashboard (see Commerce > Gift Card).
Once you have added the Gift Card Options widget, you can modify its Styles and Settings on the Property Panel (see Configuring Gift Card Product Widgets).
To configure the widget, go to Settings and select how the options are displayed: Buttons or Dropdown.
After the widget configuration, you can modify the corresponding elements inside the Gift Card Options widget:
- Gift Card Option Button List
- Gift Card Option Button
- Gift Card Custom Amount Input
- Dropdown
This allows you to define the appearance and functionality of the widget elements on your website (see Global Styles, Visibility Settings).
Gift Card Details
The Gift Card Details widget is designed to display key details about a gift card product, such as details about the person receiving the gift card, like their name and email, personalized message included with the gift card by the sender, and the name of the sender.
Once you have added the Gift Card Details widget, you can modify its Styles and Settings on the Property Panel (see Configuring Gift Card Product Widgets).
To configure the widget:
- Go to Content.
- Click the corresponding form field: Recipient's Email or Phone Number, Gift Card Notes, and From.
- Enter the label and placeholder text, such as the personalized message for the gift card receiver, the name of the gift card sender, etc.
- Enable/disable the This field is required toggle, to specify whether the corresponding field must be completed before the form can be submitted.
After the widget configuration, you can modify the corresponding elements inside the Gift Card Details widget:
- Form Item
- Label
- Text Area
- Email or Phone Input
- Input
This allows you to define the appearance and functionality of the widget elements on your website (see Global Styles, Visibility Settings).
Gift Card Image Chooser
The Gift Card Image Chooser widget allows your customers to select the visual design or image that will appear on a gift card, making the gift card more personal and visually appealing.
Once you have added the Gift Card Image Chooser widget, you can modify its Styles and Settings on the Property Panel (see Configuring Gift Card Product Widgets).
After the widget configuration, you can modify the corresponding elements inside the Gift Card Image Chooser widget: Gift Card Image Chooser Item. This allows you to define the appearance and functionality of the widget elements on your website (see Global Styles, Visibility Settings).
💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7