Zid Docs
Merchant APIApp APIThemes
Merchant APIApp APIThemes
Help Center
Slack
  1. Marketing
  • 🚨 Important Update: Zid Themes
  • Landing Page Development
  • Getting Started with Zid Themes
    • Introduction to Theme Development
    • Manage your Themes
    • Building Themes in Zid
    • Theme File Structure
    • Twig Syntax and Features
    • Zid Theme Packager
  • Templates
    • Layout
    • Home Page
    • Products
    • Cart
    • Store Language and Currency
  • Settings Schema
    • Text
    • Number
    • Text-Area
    • Select
    • Radio Buttons
    • Checkbox
    • Range
    • Color
    • Image
    • Product
    • Category
    • List
    • Fieldset
  • Code Snippets
    • Apple Pay Quick Checkout
    • Custom CSS Injection
    • Displaying the Store's Business Center Logo
    • Customizing Copyright Text
    • Store's Main Navigation Menu
    • Customer Wishlist
    • Products
      • Products Badges
      • Product Ratings
      • Remaining Product Stock
      • Sold Items Count
      • Product Filtration by Attributes
      • Grouped Products
      • Product Questions & Answers
      • Product Restock Notfication
    • SEO
      • Images alt text
      • Themes SEO Marketing Tags
    • Marketing
      • Metafields
      • Gift Feature
      • Loyalty Program
  • Zid Themes Library: API Integration
    • Products
    • Product Categories
    • Cart
    • Blog
    • Customer
    • Store Settings
  • Data Reference
    • Locals
    • Store
    • Cart
    • Product
    • Products List
    • Category
    • Categories List
    • Session
    • FAQs
    • Customer
    • Blogs
    • Page
    • Main Menu
    • Main Navigation Menu
    • Request
    • Orders
    • Addresses
    • Store Payment Methods
    • Store Shipping Methods
    • Store Banks
    • Asset URL
    • Header Meta Tags
    • Loyalty pogram Wallet
  • Themes CLI
    • CLI Authentication
    • Theme Create
    • Theme Package
    • Theme Update
    • Themes List
    • Theme Preview
  1. Marketing

Gift Feature

The gift feature from Zid allows customers to send orders as gifts, complete with the option to add a custom message and a video link that gets converted into a QR code. As a theme developer, here’s what you need to know:

Merchant Dashboard Configuration#

Merchants configure the gifting options from their dashboard settings. Here’s the link to the gifting options configuration page: https://web.zid.sa/account/settings/gifting-options.
image.png
Merchants can switch on the gifting option, select desirable configurations from the listed options, and save their settings. They can also add custom templates for gift cards through the “Add new design” button.
image.png

Motivating Customers to Gift in Store#

Merchants have the option of showing a motivating popup when the customer adds a product to the cart. This is configured through the “Motivating customers to gift in store” setting.
image.png
Gift Motivation Popup
The merchant has an option to show a motivating popup when a customer adds a product to the cart. This encourages the customer to send their purchase as a gift.
image.png
Here is a code sample to illustrate this feature:
In this snippet, the line {% if store.gift_order_settings.is_gift_order_customer_motivation_enabled == '1' %} checks whether the motivating popup feature is enabled by the merchant. If it’s enabled, a tooltip styled as a popover is displayed. This tooltip contains an icon, a message encouraging the customer to send their purchase as a gift, and a button leading to the cart.

Display of Gift Option and Form#

Gifting Options Display The gifting options are displayed to the end customer in the cart. This includes a list of form fields that appear when a customer decides to send a product as a gift. The customer can preview the filled options and save the form.
image.png
Upon selection, a list of form fields will appear. The customer can preview the filled options and save the form to send the products as a gift.
image.png

Gifting Options in Cart View#

A code snippet to show the gifting options in the cart view is available. It uses the template_for_cart_gifts_widget to display all the necessary fields for customers to customize their gifts.
This snippet checks if gifting orders are enabled (store.gift_order_settings.is_gift_order_enabled == '1'). If enabled, the template_for_cart_gifts_widget is displayed. This template handles the display of all gifting options for customers, such as choosing a gift card design or writing a custom message.
Note that all configuration settings for gifting, set by the merchant from the dashboard, are returned in the store.gift_order_settings object. These settings control how and when the gifting features are presented to the customers.

Display of Gifting Cart Information#

When a customer decides to send a product as a gift and fills the form, the cart will display basic information about the gifting order.
image.png
This information is displayed using the following code:
The conditional {% if cart.gift_card_details | length > 0 %} checks if there are any gift card details present in the cart. If there are, it displays the sender’s name, receiver’s name, and the gift message using the provided variables.
Note: The gifting cart should be removed when the cart is empty.
You may need this plugin for these functionalities: https://github.com/CodeSeven/toastr
A sample starter theme can be found here: https://github.com/zidsa/custom-theme-sample
By incorporating these adjustments into your themes, you will ensure compatibility with the new gift feature, allowing merchants to offer a richer, more personalized shopping experience. If you have any questions or need further clarification, feel free to reach out to our support team.

Troubleshooting#

Collapse doesn't open when clicking Send as Gift#

If you're encountering an issue where the collapse doesn't open when clicking the Send as Gift button, the problem might be a mismatch in the version of Bootstrap you're using. The feature was developed using Bootstrap version 4, and if you're using Bootstrap version 5, there could be compatibility issues.
Specifically, in Bootstrap 5, the data-toggle attribute has been replaced with data-bs-toggle. Therefore, the button triggering the collapse should look like this in Bootstrap 5:
After updating your code accordingly, verify that all other functionalities previously relying on Bootstrap 4 attributes are updated to their Bootstrap 5 equivalents.
Modified at 2024-09-02 23:32:04
Previous
Metafields
Next
Loyalty Program
Built with