How to Implement Tiered Discounts by Spend in Shopify Using Functions | Step-by-Step Guide

Step 1: Set Up Your Development Environment

Ensure you have the following installed:

1. Node.js
2. Shopify CLI
3. Git

Step 2: Install Shopify CLI

If you haven’t already installed Shopify CLI, you can do so using npm:

npm install -g @shopify/cli @shopify/theme

Step 3: Authenticate with Shopify

Log in to your Shopify Partner account using the CLI:

shopify login --store your-store-name.myshopify.com

Step 4: Create a New App

Use Shopify CLI to create a new app:

shopify app create node

Follow the prompts to:

• Enter a name for your app
• Select your partner organization
• Choose a development store (or create one)

Step 5: Navigate to Your App Directory

cd your-app-name

Step 6: Generate the Discount Function Extension

shopify app generate extension

Select Discount as the type of extension.

Step 7: Develop the Function Logic

Navigate to the extensions directory in your app, and open the discount function folder. Inside the src directory, modify index.js to include the logic for tiered discounts by spend.

src/index.js

import { extend, DiscountApplicationStrategy } from '@shopify/checkout-ui-extensions';

extend('Checkout::Dynamic::Render', (root, { applyDiscount }) => {
  const spendingThresholds = [
    { threshold: 100, discount: 10 },
    { threshold: 200, discount: 15 },
    { threshold: 300, discount: 20 }
  ];

  let discount = 0;
  let message = '';

  const totalSpend = root.querySelector('CartLineItems').total; // Get the total spend from the cart

  for (const tier of spendingThresholds) {
    if (totalSpend >= tier.threshold) {
      discount = tier.discount;
      message = `You have earned a ${discount}% discount for spending over $${tier.threshold}!`;
    }
  }

  if (discount > 0) {
    applyDiscount({
      percentage: discount,
      message,
      strategy: DiscountApplicationStrategy.First
    });
  }
});

Step 8: Configure the Extension

Modify shopify.extension.toml to configure your extension:

name = "Tiered Discounts by Spend"
type = "checkout_post_purchase"

Step 9: Deploy the Function

Deploy your app and function to Shopify using the following commands:

shopify app deploy
shopify app publish

Step 10: Enable the Discount Function

1. In your Shopify admin, navigate to Settings > Checkout > Discounts.
2. Enable the new discount extension and configure it as needed.

Step 11: Test Your App

Test the discount function by creating orders and checking out with different cart totals to ensure the correct discounts are applied based on the spend tiers.

Step 12: Secure Your Environment Variables

Ensure that any sensitive data (like API keys) used in your app is secured using environment variables. Update your .env file and load them using the dotenv package.

Example .env

SHOPIFY_API_KEY=your-api-key
SHOPIFY_API_SECRET=your-api-secret
HOST=https://your-ngrok-url

Load Environment Variables in server.js

require('dotenv').config();
const Shopify = require('shopify-api-node');

const shopify = new Shopify({
  shopName: process.env.SHOPIFY_SHOP_NAME,
  apiKey: process.env.SHOPIFY_API_KEY,
  password: process.env.SHOPIFY_PASSWORD
});

Summary

1. Set Up Environment: Install necessary tools and authenticate with Shopify.
2. Create App: Use Shopify CLI to create a new Node.js app.
3. Generate Extension: Create a discount function extension using Shopify CLI.
4. Develop Function: Implement logic for tiered discounts based on customer spend.
5. Deploy and Test: Deploy your app and function, enable it in Shopify admin, and test it.

This guide provides a foundation for creating a custom discount function in Shopify that applies tiered discounts based on customer spending. Customize and extend the logic as needed to fit your specific requirements.