Documentation

Installing the App

Enabling the Automatic Discount

Volume Tier Pricing uses a Shopify Function to apply discounts at checkout. After installing the app, you need to enable the automatic discount so your customers receive their volume pricing.

Disabling the Add-to-Cart Limit

By default, Shopify limits the quantity a customer can add to their cart to protect against accidental or abusive orders. If your volume pricing tiers go above the default limit (typically 50 units), your customers might not be able to reach higher tiers.

Enabling the Theme App Embed

The theme app embed controls the tier table widget and quantity stepper on your storefront. It must be enabled for the pricing table to appear on product pages.

Adding Tiers from the Admin Block

The fastest way to add tiers to a single product is directly from the Shopify product admin page.

Adding Tiers from the App Editor

You can also manage all your tiers from the Volume Tier Pricing app dashboard.

Fixed Price vs Percent Off

When creating tiers, you choose between two discount modes. Each has different behavior when your product price changes.

Percent Off Mode

Each tier defines a percentage discount off the current product price. For example, "Buy 10+, get 15% off."

• If you change the product price, the discount adjusts automatically. A 15% discount on a $20 product gives $17.00; if you raise the price to $25, the same tier gives $21.25.
• Best for products where you want discounts to scale proportionally with price changes.
• Ideal for most use cases, especially if you adjust prices frequently.

Fixed Price Mode

Each tier defines a specific per-unit price. For example, "Buy 10+, pay $18.00 each."

• If you change the product price, the tier price stays the same. The customer still pays $18.00 per unit regardless of what the base price is.
• Best for contract pricing, wholesale agreements, or when you want exact price control per tier.
• You will need to manually update tier prices if your base price changes and you want to maintain a specific margin.

Scenario	Percent Off	Fixed Price
Base price: $20.00, Tier: 10+	15% off = $17.00/unit	$17.00/unit
Base price changed to $25.00	15% off = $21.25/unit	Still $17.00/unit
Best for	Dynamic pricing	Contract / wholesale

Quantity Increment (Step)

The quantity increment (also called "step") controls the quantity intervals that customers can select. For example, if the increment is set to 6, customers can only add 6, 12, 18, 24, etc. to their cart.

• Default: Increment is 1 (customers can add any quantity).
• Use cases: Products sold by the case (e.g., 12-pack), items that ship in fixed lots, or products with minimum order multiples.
• The quantity stepper on the storefront will automatically respect the increment, showing +/- buttons that jump by the step amount.
• Tier thresholds should be multiples of your increment to avoid confusion (e.g., if increment is 6, set tiers at 6, 24, 48, not 10, 25, 50).

Applying Tiers to a Collection

Instead of setting up tiers product by product, you can apply the same tier structure to every product in a collection at once.

How Conflicts Work

When you bulk-apply tiers to a collection, the app handles conflicts with a simple rule:

• Products that already have tiers are skipped. The app will not overwrite or modify existing tier configurations.
• Products without any tiers will receive the new tier structure.
• After the bulk operation completes, you will see a summary showing how many products were updated and how many were skipped.

CSV Export Coming Soon

Export your entire tier configuration to a CSV file for backup, review, or editing in a spreadsheet application. The export will include product title, variant ID, tier minimum quantity, discount type, and discount value for every configured tier.

CSV Import Coming Soon

Import tier configurations from a CSV file to set up or update tiers in bulk. This is ideal for merchants migrating from another app or managing large catalogs externally. The expected CSV format will match the export format for seamless round-tripping.

How the Tier Table Appears

Once tiers are configured and the theme app embed is enabled, a pricing table automatically appears on the product page for any product with active tiers.

The table shows:

• Quantity range for each tier (e.g., "10 - 49")
• Per-unit price at that tier
• Savings compared to the base price (as a percentage or dollar amount)

As customers adjust the quantity on the product page, the active tier highlights to show which pricing level they are currently at. This gives customers immediate visual feedback about their savings.

Customizing Colors & Design

You can customize the appearance of the tier table and quantity stepper to match your store's brand.

From the App Dashboard

Navigate to Settings > Appearance in the Volume Tier Pricing app to access the following options:

• Design presets: Choose from several pre-built styles (Default, Minimal, Bold, Rounded) as a starting point.
• Header background color: The color of the table header row.
• Header text color: The text color in the header.
• Active tier highlight color: The background color for the currently active tier row.
• Savings text color: The color used for savings percentages and amounts.
• Border radius: Control how rounded the table corners are.
• Table title: Customize the heading above the table (default: "Volume Pricing").

Advanced: CSS Overrides

For pixel-perfect control, you can add custom CSS in the app settings. The widget uses well-defined CSS classes:

.vtp-tier-table { /* Main table container */ }
.vtp-tier-row { /* Individual tier row */ }
.vtp-tier-row--active { /* Currently active tier */ }
.vtp-tier-savings { /* Savings text */ }
.vtp-quantity-stepper { /* Quantity input */ }
.vtp-nudge-message { /* "Add X more to save" */ }

Upsell Nudges

When a customer's selected quantity is close to the next tier threshold, an upsell nudge message appears automatically. For example:

These nudge messages encourage customers to increase their quantity to reach the next discount level, which helps increase your average order value.

• Nudges appear automatically based on the gap between the current quantity and the next tier.
• You can enable or disable nudges from the app settings.
• The nudge text and styling can be customized to match your brand voice.

Custom Table Placement

By default, the tier table auto-positions itself above the product form (add-to-cart area). If you want the table in a different location, add this anchor div anywhere in your product template:

<div id="vtp-anchor"></div>

The tier table will appear exactly where you place that div. This overrides the automatic placement.

Where to add it

Price Summary Placement

Below the tier table, a live price summary shows the per-unit price and total based on the selected quantity:

This updates instantly as the customer changes quantity. By default it appears below the tier table. To move it elsewhere (e.g. under the quantity selector), add this anchor:

<div id="vtp-summary-anchor"></div>

Place it in your product template (same process as the table anchor above). The summary will be moved from its default position to wherever you place this div. For example, to put it right under the quantity input:

CSS selectors for customizing the summary:

/* Summary container */
.vtp-summary { }

/* "$2.24 per unit" text */
.vtp-summary-price { }

/* "Total: $22.40 for 10 units" text */
.vtp-summary-total { }

CSS Variables Reference

The tier table uses CSS custom properties that you can override in your theme's CSS file (Online Store → Themes → Edit code → Assets → base.css or your theme's main stylesheet). Add overrides at the bottom of the file:

/* Override Volume Tier Pricing styles */
.vtp-block {
  --vtp-primary: #2563eb;       /* Accent color, links, active states */
  --vtp-secondary: #059669;     /* Savings badge background */
  --vtp-text: #1f2937;          /* Body text color */
  --vtp-bg: #ffffff;            /* Table background */
  --vtp-border-radius: 8px;     /* Corner rounding */
  --vtp-header-bg: #f9fafb;     /* Table header background */
  --vtp-badge-color: #059669;   /* Badge color override */
  --vtp-row-hover: #f3f4f6;     /* Row hover background */
}

CSS Selectors Reference

Every part of the tier table can be targeted with CSS. Here's the full list:

Table Structure

/* Outer container — controls spacing, border, max-width */
.vtp-block { }

/* The table element itself */
.vtp-table { }

/* Table header row */
.vtp-table thead { }

/* Header cells */
.vtp-table th { }

/* Body cells */
.vtp-table td { }

/* Individual tier row */
.vtp-tier-row { }

/* Currently active/highlighted tier row */
.vtp-tier-row.vtp-active { }

/* Quantity cell (e.g. "10+") */
.vtp-tier-qty { }

/* Price cell (e.g. "$9.50") */
.vtp-tier-price { }

/* Savings cell */
.vtp-tier-savings { }

/* "Contact us" row */
.vtp-tier-row--contact { }
.vtp-contact-link { }

Badges

/* All badges */
.vtp-badge { }

/* "Save X%" badge */
.vtp-badge--save { }

/* "Base" badge */
.vtp-badge--base { }

Upsell Nudge

/* Upsell container */
.vtp-upsell { }

/* Clickable upsell link */
.vtp-upsell-link { }

/* Inline mode (below table) */
.vtp-upsell--inline { }

/* Toast mode (bottom-right popup) */
.vtp-upsell--toast { }

Price Summary

/* Summary container (flex row, space-between) */
.vtp-summary { }

/* Per-unit price text */
.vtp-summary-price { }

/* Total price text (uses --vtp-primary color) */
.vtp-summary-total { }

Design Presets

/* Minimal preset — light borders, no header bg */
.vtp-block--minimal { }

/* Bold preset — colored header, shadows */
.vtp-block--bold { }

/* Classic preset — alternating row colors */
.vtp-block--classic { }

Advanced Examples

Copy these into your theme's CSS file to customize specific aspects of the tier table.

Change font size and weight

.vtp-table {
  font-size: 14px;
}
.vtp-tier-price {
  font-weight: 700;
  font-size: 1.1em;
}
.vtp-tier-qty {
  font-weight: 600;
}

Full-width table with no border

.vtp-block {
  border: none;
  padding: 0;
  border-radius: 0;
}
.vtp-table {
  border: none;
  border-radius: 0;
}

Rounded pill badges

.vtp-badge {
  border-radius: 999px;
  padding: 2px 12px;
}

Custom active row highlight

.vtp-tier-row.vtp-active {
  background: #fef3c7 !important;
  border-left: 3px solid #f59e0b;
}
.vtp-tier-row.vtp-active .vtp-tier-qty,
.vtp-tier-row.vtp-active .vtp-tier-price {
  color: #92400e;
}

Hide savings column via CSS

.vtp-tier-savings,
.vtp-table th:last-child {
  display: none;
}

Move table below add-to-cart (CSS only)

/* Works if the anchor div method isn't suitable */
.vtp-block {
  order: 99;
  margin-top: 24px;
}

Custom upsell link styling

.vtp-upsell-link {
  color: #059669;
  font-size: 0.85em;
  text-decoration: none;
  border-bottom: 1px dashed #059669;
}
.vtp-upsell-link:hover {
  color: #047857;
  border-bottom-style: solid;
}

Frequently Asked Questions