Product Detail Page Layout
When a buyer clicks on a product in the catalog, they're taken to the product detail page. This page gives them all the information they need to make a purchasing decision.
Page Elements
The product detail page includes:
- Image gallery — Product photos that buyers can browse through. If the product has multiple images, they can click or swipe to view each one.
- Product title — The product name displayed prominently
- Product description — The full product description from your Shopify catalog
- Pricing display — Retail price crossed out with the wholesale price shown
- Variant selector — Options to choose size, color, material, or any other variant options
- Add to Order button — Adds the selected variant to the cart drawer
Variant Selection
If a product has multiple variants (like different sizes, colors, or materials), the buyer selects their preferred options using dropdown menus or option buttons.
When the buyer changes their variant selection:
- The product image updates to show the selected variant's image (if available)
- The price updates to reflect any variant-specific pricing rules
- The volume pricing tiers update if different variants have different tier configurations
Buyers can use the option filters to quickly find the exact variant they need, even for products with many options.
Pricing Display
The pricing section shows two prices side by side:
- Retail Price — The original price, shown with a strikethrough to indicate it's not the buyer's price
- Wholesale Price — The discounted price the buyer will actually pay, displayed prominently
This clear visual comparison helps buyers see exactly how much they're saving with their wholesale pricing, reinforcing the value of their B2B relationship with you.
Add to Order
Once the buyer has selected their desired variant and quantity, they click the "Add to Order" button. The item is immediately added to the cart drawer on the right side of the screen (on desktop) or to the cart (accessible via the cart icon on mobile).
Buyers can continue browsing the catalog and adding more items — the cart drawer keeps a running total of everything they've selected.
Volume Pricing Info
When a product has active volume pricing rules, a "Volume Pricing Info" link appears on the product detail page. This link tells the buyer that quantity-based discounts are available.
The Volume Pricing Modal
Clicking the "Volume Pricing Info" link opens a modal window that displays a detailed pricing table.
Dynamic Tier Updates
The volume pricing modal is dynamic — it updates automatically when the buyer changes their variant selection. Here's how it works:
- If the selected variant has its own specific volume tiers, those are displayed
- If the variant doesn't have specific tiers, the modal falls back to the product-level tiers
- If no volume pricing exists for the product at all, the "Volume Pricing Info" link doesn't appear
This ensures buyers always see the most relevant tier information for the exact variant they're considering.
Modal Styling
The appearance of the volume pricing modal — including table colors, fonts, borders, and spacing — is controlled by the merchant through the Portal Styling settings. Any changes to the volume table styling apply globally across all products.
Adding Items with Volume Tier Data
When a buyer adds an item to their cart from the product detail page, the system passes along the volume tier metadata. This means the cart drawer can immediately show:
- Which tier the buyer's current quantity qualifies for
- How close they are to the next tier
- How much more they'd save by increasing their quantity
This seamless integration between the product detail page and the cart creates a smooth buying experience that encourages larger orders.