Gift on Order by Webkul for Shopify: Installation & Workflow Guide

INSTALLATION

• Log in to your Shopify account > Go to Apps > Click  on Visit Shopify App Store

• Search for Gift on Order on Shopify App Store:

• Click on Add App

• You will be automatically redirected to the Shopify backend, click on Install App

• Lastly, approve the charges & click on the Start Free Trial Button (this app comes with a 7-days free trial period after which you’ll be charged for the app)

• After this, the app will be listed in the Apps section

This is all about the installation, let’s move on to the workflow of this app.

WORKFLOW

Once you’ll click on the app, you’ll land on the Home Page

Frontend configuration (code-pasting) will be discussed ahead in this guide.

CONFIGURATION

The configuration of this app is divided into two sections:

• General Configuration

Enter the Domain Name, Business Email & if you want to display ‘other gift‘ section on the cart page then enable the gift button

• Label Configuration

From this section, you can configure the frontend labels; click on reset to change them to by default.

HOW TO ADD GIFT PRODUCTS?

Gift products will be added to the app in a similar way as you create a product from Shopify end.

So, go to Shopify Products > Add Product

Enter the Gift Product details & save it.

After saving the product, Click on More actions > Create Gift Product

This action will redirect you to the Gift Products menu of the Gift on Order app:

GIFT PRODUCTS

This section of the app will list down all the added gift products from the Shopify backend. You can enable, disable or delete the following Gift products. (Refer to the image given above.)

GIFT RULES

How to add Gift Rules?

Visit the Gift Rules section of the app > Click on the + symbol:

Next, you will be redirected to the add gift rule form:

Enter the following details:

• Gift Rule Status- Enable this if you want the particular gift product to be visible on the storefront, otherwise, keep it disabled.
• Gift Rule Name- Enter a name for the gift rule, for example, Gift for cart value above $500 
• Description- Enter details regarding the gift rule, for example, conditions regarding the gift rule.
• Select Gift Product- Select the Gift Product(s) that you want your customers to have displayed on their cart page, only if, they satisfy this particular gift rule.
• Default Gift- Select a gift product which will be by default added to the customer’s cart after satisfying this gift rule.
• Min Cart Amount- Enter the condition for this gift rule that what should be the minimum cart amount after which customers will be eligible to receive the gift associated with this rule.
• Date From-Date To- Enter the validity period for this gift rule.
• Gift Rule Heading- This heading will be displayed to your customers on the frontend, i.e., a gift title.
• Gift Rule Sub Heading- Similarly, you can also add a subheading for your gift rule.

After entering all the details, save the gift rule.

All the added gift rules will be listed in the Gift Rule section of the app from where you can enable, disable, delete, view/edit the added gift rules.

Lastly, let’s see how to configure the frontend.

CONFIGURE FRONTEND

Coming to the Home page of the app, you’ll have a list of codes which needs to be pasted in the respective liquid files:

Gift on order app requires your theme to have the Cart set to Page and not Drawer.

• templates/cart.liquid

<div id="wk_order_gift" data-total-price="{{ cart.total_price }}"></div>

• sections/product-template.liquid

{% unless product.tags contains "gift_product" %}

{% endunless %}

• Snippets/product-grid-item.liquid

{% unless product.tags contains "gift_product" %}

{% endunless %}

• To remove update quantity field from cart page for gift product, enclose the quantity field in templates/cart.liquid file inside below code:

{% if item.product.tags contains "gift_product" %} <a href="#wk_choose_gifts">View all gifts</a> {% else %} {% endif %}

How to find these template files?

Simply, go to Shopify backend > Online Store > Themes > Actions > Edit Code

Search for the file name, paste the codes and save.

If you are having any trouble regarding the code-pasting or any other configuration, please don’t hesitate to contact us at support@webkul.com.

This was all about the installation & configuration of the app.

Demo of Gift on Order app

https://gift-on-order.myshopify.com/pages/demo

Gift on Order Main Blog

https://webkul.com/blog/shopify-gift-on-order/

Get the app

https://apps.shopify.com/gift-on-order

Need Help?

In case of any query or suggestion, please feel free to drop an email at support@webkul.com or create a ticket at https://webkul.uvdesk.com.