Zid Docs
  1. Marketing
Zid Docs
  • Merchant API
    • Start Here 🚀
    • Overview to Zid Apps
    • Authorization
    • Responses
    • Webhooks
    • Rate Limiting
    • APIs
      • Orders
        • Update Order by ID
        • Get Order Credit Notes
        • Get Order by ID
        • List of Orders
      • Reverse Orders
        • Reverse Order Reasons
        • Create Reverse Orders
        • Create Reverse Orders Waybill
        • Add Reverse Order Reasons
      • Carts
        • Get Abandoned Cart Details
        • List Abandoned Carts
      • Products
        • Managing Products
          • Get a Product by ID
          • Retrieve a list of products
          • Create a new product
          • Update an existing product.
          • Bulk update of products using their IDs or SKUs
          • Delete a product.
          • Product Setting
          • List Product Reviews
        • Digital Vouchers
          • Product Vouchers
          • Order Voucher
          • Add Product Voucher
          • Import Vouchers
          • Export Vouchers
          • Update Product Voucher
          • Remove Product Voucher
        • Product Categories
          • Get Single Category Details
          • Get all categories
          • Create Store Category
          • Update a Store Category
          • Add a product to a certain category
          • Publish/Unpublish a Category
          • Detach Category from All Products
          • Remove Category from Product
        • Product Badge
          • Product Badge
        • Product Attributes
          • Get Product Attributes
          • Get Product Attributes
          • Retrieve a product attribute
          • Add a New Product Attribute
          • Add a New Product Attribute
          • Update a product attribute
          • Delete a product attribute
        • Product Attribute Presets
          • Get attribute presets
          • Create Attribute Preset
          • Update Attribute Preset
          • Delete an attribute preset
        • Product Customizations
          • Add Product Variants
          • Insert Custom Options to a Product
          • Insert Custom User-Input Fields to a Product
        • Product Manual Sorting
          • Set Custom Product Order
          • Reset the manual sorting of all products
        • Product Images
          • Get List of images of a product.
          • Add an image to a product
          • Update a product Image Order
          • Delete a product image
        • Product Notifications
          • Availability Notification Stats
          • Availability Notifications Settings
          • List Availability Notifications
          • Add Availability Notification
          • Save Availability Notifications Settings
          • Manually Send Availability Notification Email
          • Export Availability Notifications
        • Product Import
          • Email All Products to Store Owner
          • Import Products via CSV or xlsx File
        • Product Stock (Multi-Inventory)
          • Get Product Stock by ID
          • List Product Stocks
          • Add Product Stock
          • Update Single Product Stock
          • Bulk Update Product Stocks
        • Product Questions & Answers
          • Get Question
          • Get Answer
          • Get All Questions
          • List Question Answers
          • Create Question
          • Create Answer
          • Update Question
          • Update Answer
          • Delete Question
          • Delete Answer
        • Product Reviews
          • List Reviews
          • New Reviews Total
          • Change Review Status
          • Bulk Change all Review Statuses
          • Delete Review
          • Import Product Reviews
          • Reply to Review
          • Delete Reply
          • Update Reply to Review
        • Digital Products
          • Create Downloadable Product
          • Generate an Upload URL
          • Upload File to S3
          • Create Product Downloadables
          • Get Product Downloadables
          • Delete Product Downloadables
          • Get Store Downloadables
          • Create Store Downloadables
          • Delete Store Downloadables
      • Inventories
        • Get Store Location by ID
        • List Store Locations
        • Add a New Location
        • Update a Location by ID
        • Update Products Stock by Location ID
      • Shipping
        • List Store Delivery Options
        • Add Shipping Option
      • Marketing
        • Gift Cards
          • Get Store Settings
          • Add gift card to the cart
          • Update Store Settings
          • Upload gift card designs
          • Remove gift card from the cart
        • Coupons
          • Create a New Coupon
          • List Coupons
          • Get Coupon Details
          • Update Coupon
          • Delete Coupon
        • Bundle Offers
          • Retrieve all Bundle Offers
        • Loyalty Program
          • Customer Wallet
          • Customer Points
          • Loyalty Program Points per Order
          • Store Loyalty Status
          • Redemption Methods
          • Cashback Rules
          • Add Redemption to Cart
          • Remove Redemption from Cart
          • Info Page
          • Loyalty Program Activation
          • Loyalty Status
          • Set Points Expiration
          • Cashback Rule Method Update
          • Cashback Rule Method Update Status
          • Add Points Redemption Method
          • Update Points Redemption Method
          • Delete Points Redemption Method
          • Toggle Redemption Method Status
          • Show Loyalty Points Info for Specific Customer
          • Customer Profile
          • List Data
          • Customer Points History
          • Info Page - Managers
          • Update Info Page
          • Adjust Customer Points
      • Customers
        • List of Customers
        • Get Customer by ID
      • Store Settings
        • đź“„ User Roles and Permissions
        • Get Manager's Profile
        • Get VAT Settings
        • List of Payment Method
      • Countries and Cities
        • Retrieve Store Operating Countries
        • Retrieve Cities by Country ID
        • Countries List
      • Webhook
        • List of Webhooks
        • Create a Webhook
        • Delete a Webhook by OriginalId
        • Delete a Webhook by Subscriber
    • Store Events
      • Order
      • Product
      • Abandoned Cart
      • Customer
      • Product Category
  • App API
    • Create your First App
    • Embedded Apps
    • App Scripts
    • App Events
    • App Subscription
      • Get Subscription Details
      • Update Usage-Based Charges
  • Themes
    • 🚨 Important Update: Zid Themes
    • Adding Video URL Feature to Third-Party 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