Product Quote Page Template

The product quote page is designed for products that require custom quotes instead of direct purchase. It's perfect for B2B products, custom orders, consultation-based sales, or products with variable pricing based on specifications.

Overview

The product quote page displays product information in the same two-column layout as the standard product page, but replaces the "Add to Cart" button with a "Get a Quote" button. When customers click this button, a modal form opens where they can submit a quote request with their contact information and requirements.

Where to Use

The product quote page template (product.quote.json) is used for products that require quotes instead of direct purchase. You assign this template to specific products in Shopify admin:

  1. Go to Products in Shopify admin
  2. Select a product
  3. Scroll to Search engine listing or Template
  4. Choose product.quote from the template dropdown
  5. Save

Use this template for:

  • Custom products requiring specifications
  • B2B products with negotiated pricing
  • Consultation-based sales
  • Products with variable pricing
  • Made-to-order items
  • High-value products requiring approval

Blocks

Title Block

What it does: Displays the product title, vendor name, and SKU

Settings:

  • Title Size: Extra Large, 2X Large, 3X Large, 4X Large
  • Show Vendor: Display the product vendor/brand name
  • Show SKU: Display the product SKU code

Examples:

  • Large title (4X Large) with vendor for brand-focused products
  • Medium title (3X Large) with SKU for technical products
  • Standard title (2X Large) without vendor for simple products

Tips:

  • Use 3X Large or 4X Large for prominent product names
  • Show vendor when brand is important
  • Show SKU for B2B or technical products
  • Only one title block can be added (limit: 1)

Price Block

What it does: Displays the product price, sale price (if applicable), and availability status

Settings:

  • Price Size: Extra Large, 2X Large, 3X Large, 4X Large
  • Show Availability: Display stock status

Examples:

  • "Starting at $X" pricing for quote-based products
  • Price range when multiple variants exist
  • Compare-at price when product is on sale

Tips:

  • For quote products, price often shows "Starting at" or base price
  • Availability status helps customers understand lead times
  • Only one price block can be added (limit: 1)

Pickup Availability Block

What it does: Shows local pickup availability at your store locations

Settings: None (automatic)

Examples:

  • Shows "Available for pickup" when product is available at a location
  • Displays location information and pickup times
  • Only appears if pickup is enabled and product is available

Tips:

  • Only shows if you have pickup locations configured
  • Helps B2B customers who prefer to pick up in-store
  • Only one pickup availability block can be added (limit: 1)

Description Block

What it does: Displays the product description content from Shopify

Settings:

  • Show Heading: Display a heading above the description
  • Heading: Custom heading text (default: "Description")

Examples:

  • Detailed product specifications for quote requests
  • Customization options and available variations
  • Use cases and application information
  • Rich text formatting from product description is preserved

Tips:

  • Include detailed specifications customers need for quotes
  • List customization options and available variations
  • Use rich text formatting for better presentation
  • Only one description block can be added (limit: 1)
  • Block only shows if product has a description

Variant Picker Block

What it does: Allows customers to select product variants (size, color, material, etc.) before requesting a quote

Settings:

  • Picker Type: Buttons or Dropdown
  • Swatch Shape: Circle, Square, or Rounded (applies to color options with buttons)
  • Show Unavailable: Show unavailable variants but crossed out

Examples:

  • Buttons with circle swatches for color variants
  • Dropdown for products with many size options
  • Variant selection helps provide accurate quotes

Tips:

  • Buttons: Better for visual variants (colors, sizes, styles)
  • Dropdown: Better for many options (10+) or text-based variants
  • Selected variants are included in the quote request
  • Only one variant picker block can be added (limit: 1)

Quote Button Block

What it does: Displays a "Get a Quote" button that opens a modal form for quote requests

Settings:

  • Button Text: Custom text (default: "Get a Quote")

Examples:

  • "Get a Quote" - Standard quote request
  • "Request Pricing" - B2B focused
  • "Contact for Quote" - Consultation focused
  • "Get Custom Quote" - Custom products

Tips:

  • Customize button text to match your brand voice
  • Button appearance (border radius, animations, shadows) is controlled by theme settings in Buttons & Inputs
  • Opens a modal form when clicked
  • Only one quote button block can be added (limit: 1)

Quote Form Fields:
The quote button opens a modal with the following fields:

  • Name (required)
  • Email (required)
  • Phone (optional)
  • Company (optional)
  • Quantity (optional, defaults to 1)
  • Message (optional) - Additional details about the quote request

The form automatically includes:

  • Product ID and title
  • Selected variant ID and title
  • Product URL

Share Block

What it does: Displays social media share buttons for the product

Settings:

  • Social Platforms: Enable/disable Facebook, X (Twitter), Pinterest, LinkedIn, Reddit, Telegram, WhatsApp, Instagram, Snapchat, TikTok, YouTube
  • Icon Size: Small, Medium, Large

Examples:

  • Facebook, X, and Pinterest enabled for most stores
  • LinkedIn enabled for B2B products
  • All platforms enabled for maximum reach

Tips:

  • Enable platforms your customers use most
  • LinkedIn is especially useful for B2B products
  • Medium size is usually best for visibility
  • Only one share block can be added (limit: 1)

Trust Badges Block

What it does: Displays shipping and returns badges to build customer confidence

Settings:

  • Show Shipping Badge: Display shipping information
  • Shipping Title: Text (default: "Free Shipping")
  • Shipping Text: Details (default: "On orders over $50")
  • Show Returns Badge: Display returns information
  • Returns Title: Text (default: "Easy Returns")
  • Returns Text: Details (default: "30-day return policy")

Examples:

  • "Free Shipping" / "On orders over $50"
  • "Easy Returns" / "30-day return policy"
  • "Fast Delivery" / "Same-day shipping available"

Tips:

  • Build trust with clear, honest policies
  • Update text to match your actual policies
  • Place near quote button for maximum impact
  • Only one trust badges block can be added (limit: 1)

Collapsible Row Block

What it does: Creates an expandable/collapsible content section

Settings:

  • Heading: Section heading (e.g., "Customization Options", "Specifications", "FAQs")
  • Open by Default: Start expanded or collapsed
  • Text Content: Rich text content

Examples:

  • "Customization Options" with available variations
  • "Product Specifications" with technical details
  • "Quote Process" with how quotes work
  • "FAQs" with common questions
  • "Lead Times" with production/delivery information

Tips:

  • Use for additional information that doesn't need to be always visible
  • Keep headings short and descriptive
  • Use rich text formatting for better readability
  • Open by default for important information
  • You can add multiple collapsible row blocks

Custom Liquid Block

What it does: Allows you to add custom Liquid code for advanced customization

Settings:

  • Custom Liquid: Liquid code field

Examples:

  • Custom product badges or labels
  • Dynamic content based on product metafields
  • Custom product information displays
  • Integration with third-party apps

Tips:

  • For developers and advanced users
  • Test thoroughly before publishing
  • Use for custom functionality not available in other blocks
  • You can add multiple custom liquid blocks

Area Calculator Block

What it does: Displays a calculator for products with area coverage (e.g., flooring, tiles, paint)

Settings:

  • Show Area Calculator: Enable/disable (only shows if product has area_per_box metafield)

Examples:

  • Flooring products: calculates boxes needed for room dimensions
  • Tile products: calculates coverage area
  • Paint products: calculates gallons needed

Tips:

  • Only appears if product has area_per_box metafield set
  • Helps customers determine correct quantity for quote
  • Reduces customer confusion
  • Only one area calculator block can be added (limit: 1)

Manual Products Block

What it does: Displays manually selected related products

Settings:

  • Heading: Section heading (default: "You may also like")
  • Products: Select up to 12 products
  • Maximum Visible Items: 2-6 products before scrolling
  • Show Vendor: Display vendor name on product cards
  • Show Second Image on Hover: Display alternate product image
  • Image Ratio: Portrait, Square, Landscape, Auto

Examples:

  • "You may also like" with 4 complementary products
  • "Related Products" with similar items
  • "Frequently Quoted Together" with related items

Tips:

  • Curate products that complement the current product
  • Current product is automatically excluded
  • Use for cross-selling opportunities
  • 3-4 visible items is usually optimal
  • You can add multiple manual products blocks

Settings

Layout

Image Width

  • What it does: Controls how much horizontal space product images take up
  • Options:
    • 33% - Narrow: More space for product information
    • 50% - Medium: Balanced layout (default)
    • 67% - Wide: More space for images
  • Default: 50%
  • Tip:
    • 33%: Best for text-heavy products, detailed specifications
    • 50%: Best for most products, balanced appearance
    • 67%: Best for visual products, image-focused display

Image Sizing

  • What it does: Controls how product images are displayed and cropped
  • Options:
    • Adapt to Image Size: Natural aspect ratio (default)
    • Square (1:1): Square images
    • Portrait (3:4): Tall images
    • Landscape (4:3): Wide images
    • Wide (16:9): Very wide images
  • Default: Adapt to image size
  • Tip:
    • Adapt: Best for varied product images, preserves original aspect ratio
    • Square: Good for consistent grid appearance
    • Portrait: Best for fashion, clothing, tall products
    • Landscape: Best for wide products, hero images
    • Wide: Best for banner-style images

Container Width

  • What it does: Controls the width of the product page container
  • Options:
    • Narrow: Constrained width for focused display
    • Full Width: Maximum width (default)
    • Wide: Extra wide display
  • Default: Full width
  • Tip:
    • Narrow: Best for focused, premium feel
    • Full Width: Best for most products, standard e-commerce
    • Wide: Best for large product displays

Colors

Color Scheme

  • What it does: Selects a color scheme for the product page
  • Controls background color, text colors, and button colors
  • Leave empty to use default theme colors
  • Tip: Choose a scheme that complements your products and brand

Padding

Top Padding

  • What it does: Space above the product section
  • Range: 0-100px
  • Default: 40px
  • Tip: More padding creates more breathing room from header/navigation

Bottom Padding

  • What it does: Space below the product section
  • Range: 0-100px
  • Default: 40px
  • Tip: Adjust to balance spacing with related products or footer

How It Works

Layout Structure

The product quote page uses the same two-column grid layout as the standard product page:

  • Left Column: Product images (gallery with thumbnails)
  • Right Column: Product information blocks (title, price, variants, quote button, etc.)

Quote Request Flow

  1. Customer views product: Sees product details, images, and specifications
  2. Selects variants (if applicable): Chooses size, color, or other options
  3. Clicks "Get a Quote" button: Opens quote request modal
  4. Fills out form: Enters contact information and requirements
  5. Submits quote request: Form is submitted to Shopify contact form
  6. Receives confirmation: Success message confirms submission
  7. Merchant receives email: Quote request appears in Shopify admin

Quote Form Modal

The quote button opens a modal overlay with a form that includes:

  • Product Information: Automatically includes product ID, title, variant, and URL
  • Contact Fields: Name (required), Email (required), Phone (optional), Company (optional)
  • Quote Details: Quantity (optional), Message (optional)
  • Validation: Required fields are validated before submission
  • Success/Error Messages: Clear feedback after submission

Block Order

Blocks appear in the order you add them, from top to bottom in the right column. You can:

  • Add blocks in any order
  • Reorder blocks by dragging
  • Remove blocks you don't need
  • Some blocks have limits (can only add one)

Product Images

Product images are automatically displayed from the product's image gallery. The image gallery includes:

  • Main product image
  • Additional product images
  • Thumbnail navigation
  • Zoom functionality (if enabled)
  • Image carousel on mobile

Variant Selection

When customers select variants:

  • Selected variant is included in quote request
  • Price updates automatically (if variants have different prices)
  • Images update if variant has specific images
  • Availability updates based on variant stock

Related Products

By default, the product quote page includes a "Related Products" section below the main product. This section:

  • Shows products from the same collection
  • Displays 4 products by default
  • Can be customized in section settings
  • Can be removed if not needed

Common Use Cases

B2B Product

  • Layout: 50% image width, balanced
  • Blocks: Title, Price, Description, Variant Picker, Quote Button, Trust Badges, Collapsible Rows (Specs, Lead Times)
  • Use Case: Products sold to businesses with negotiated pricing

Custom/Made-to-Order Product

  • Layout: 50% image width
  • Blocks: Title, Price, Description, Variant Picker, Quote Button, Collapsible Rows (Customization Options, Process)
  • Use Case: Products requiring customization or made-to-order

High-Value Product

  • Layout: 50% image width
  • Blocks: Title, Price, Description, Quote Button, Trust Badges, Collapsible Rows (Warranty, Financing)
  • Use Case: Expensive products requiring approval or consultation

Consultation-Based Product

  • Layout: 50% image width
  • Blocks: Title, Price, Description, Quote Button, Collapsible Rows (Services, Process, FAQs)
  • Use Case: Products requiring consultation before purchase

Technical/Complex Product

  • Layout: 33% image width, info-focused
  • Blocks: Title, Price, Description, Variant Picker (Dropdown), Quote Button, Collapsible Rows (Specs, FAQs, Applications)
  • Use Case: Products with detailed specifications and technical requirements

Tips & Best Practices

✅ Do's

  • Include detailed descriptions: Help customers understand what they're requesting a quote for
  • List customization options: Show what can be customized
  • Add specifications: Include technical details customers need
  • Use clear quote button text: Make it obvious this is a quote product
  • Add trust badges: Build confidence with clear policies
  • Include lead time information: Let customers know how long quotes take
  • Use collapsible rows: Organize additional information (process, FAQs, specs)
  • Show variant options: Let customers select options before requesting quote
  • Test the quote form: Ensure form submission works correctly
  • Respond to quotes promptly: Set expectations for response time

❌ Don'ts

  • Don't skip descriptions: Always include product details
  • Don't hide customization options: Make available options clear
  • Don't forget to respond: Set up email notifications for quote requests
  • Don't use generic button text: Customize to match your brand
  • Don't skip trust badges: Build customer confidence
  • Don't clutter the page: Keep layout clean and organized
  • Don't forget mobile: Test quote form on phones and tablets
  • Don't make form too long: Keep quote form fields relevant
  • Don't ignore related products: Use for cross-selling opportunities

Adding and Managing Blocks

Adding Blocks

  1. In the theme editor, navigate to a product with the quote template
  2. Click on the Product section
  3. Scroll to Blocks in the left sidebar
  4. Click Add block
  5. Choose a block type from the list
  6. Configure block settings
  7. Click Save

Reordering Blocks

  1. Click on a block in the left sidebar
  2. Use the ⋮⋮ (six dots) icon to drag and drop
  3. Move blocks up or down to change order
  4. Blocks appear top to bottom in the right column
  5. Click Save

Editing Block Settings

  1. Click on the block in the left sidebar
  2. Change settings as needed
  3. Changes appear instantly in the preview
  4. Click Save when done

Removing Blocks

  1. Click on the block in the left sidebar
  2. Scroll to the bottom of the block settings
  3. Click Remove block
  4. Confirm removal
  5. Click Save

Recommended Block Order

Standard Quote Product Page

  1. Title - Product name first
  2. Price - Show pricing (often "Starting at" for quotes)
  3. Description - Product details and specifications
  4. Variant Picker - Let customers select options
  5. Quote Button - Request quote (primary action)
  6. Trust Badges - Build confidence
  7. Collapsible Rows - Additional info (Customization, Process, FAQs, Lead Times)
  8. Share - Social sharing
  9. Manual Products - Related products

B2B Quote Product

  1. Title (with SKU)
  2. Price
  3. Description (detailed specs)
  4. Variant Picker (Dropdown for many options)
  5. Quote Button ("Request Pricing")
  6. Trust Badges
  7. Collapsible Rows (Specifications, Lead Times, Terms)
  8. Share (especially LinkedIn)

Custom Product

  1. Title
  2. Price ("Starting at")
  3. Description (customization options)
  4. Variant Picker (Buttons for visual options)
  5. Quote Button ("Get Custom Quote")
  6. Collapsible Rows (Customization Options, Process, Timeline)
  7. Trust Badges
  8. Manual Products

Quote Form Best Practices

Required Fields

  • Name: Always required for personalization
  • Email: Always required for response

Optional Fields

  • Phone: Useful for urgent quotes or B2B
  • Company: Important for B2B products
  • Quantity: Helps provide accurate pricing
  • Message: Allows customers to specify requirements

Form Submission

  • Quote requests are sent to Shopify contact form
  • You'll receive an email notification
  • Form includes product and variant information automatically
  • Success message confirms submission to customer

Response Time

  • Set clear expectations for quote response time
  • Include response time in product description or collapsible row
  • Respond promptly to build trust
  • Consider automated acknowledgment email

Quote Button Best Practices

Button Text

Standard Options:

  • "Get a Quote" - Most common, clear
  • "Request a Quote" - Professional
  • "Request Pricing" - B2B focused
  • "Contact for Quote" - Consultation focused
  • "Get Custom Quote" - Custom products

Tips:

  • Match your brand voice
  • Be clear about the action
  • Keep it short and actionable
  • Test different text to see what converts

Button Placement

  • Place after variant picker (if used)
  • Place before or after trust badges
  • Make it prominent and easy to find
  • Ensure it's visible on mobile

Collapsible Rows Use Cases

Common Uses for Quote Products

  1. Customization Options

    • Available variations
    • Material choices
    • Size options
    • Color options

  2. Quote Process

    • How quotes work
    • What information is needed
    • Response time
    • Next steps

  3. Product Specifications

    • Technical details
    • Dimensions
    • Materials
    • Weight

  4. Lead Times

    • Production time
    • Delivery time
    • Rush order options
    • Timeline expectations

  5. FAQs

    • Common questions
    • Quote-related questions
    • Process questions
    • Pricing questions

  6. Terms & Conditions

    • Quote validity
    • Payment terms
    • Minimum orders
    • B2B terms

Examples

Example 1: B2B Product

Layout:

  • Image Width: 50%
  • Image Sizing: Adapt
  • Container Width: Full

Blocks:

  1. Title (3X Large, show SKU)
  2. Price (3X Large)
  3. Description (detailed specs)
  4. Variant Picker (Dropdown)
  5. Quote Button ("Request Pricing")
  6. Trust Badges
  7. Collapsible Row ("Specifications")
  8. Collapsible Row ("Lead Times")
  9. Collapsible Row ("Terms & Conditions")
  10. Share (Facebook, X, LinkedIn)
  11. Related Products (automatic)

Result: Professional B2B quote page with detailed information

Example 2: Custom Product

Layout:

  • Image Width: 50%
  • Image Sizing: Portrait
  • Container Width: Full

Blocks:

  1. Title (4X Large, show vendor)
  2. Price ("Starting at $X")
  3. Description (customization options)
  4. Variant Picker (Buttons, circle swatches)
  5. Quote Button ("Get Custom Quote")
  6. Collapsible Row ("Customization Options")
  7. Collapsible Row ("Process & Timeline")
  8. Trust Badges
  9. Share
  10. Manual Products ("You may also like")

Result: Custom product page focused on personalization

Example 3: High-Value Product

Layout:

  • Image Width: 67%
  • Image Sizing: Adapt
  • Container Width: Full

Blocks:

  1. Title (4X Large)
  2. Price (3X Large)
  3. Description
  4. Quote Button ("Request a Quote")
  5. Trust Badges
  6. Collapsible Row ("Financing Options")
  7. Collapsible Row ("Warranty Information")
  8. Collapsible Row ("Delivery & Installation")
  9. Share
  10. Related Products

Result: Premium product page requiring consultation

Example 4: Technical Product

Layout:

  • Image Width: 33%
  • Image Sizing: Adapt
  • Container Width: Narrow

Blocks:

  1. Title (3X Large, show SKU)
  2. Price (2X Large)
  3. Description (technical details)
  4. Variant Picker (Dropdown)
  5. Quote Button ("Request Quote")
  6. Collapsible Row ("Technical Specifications")
  7. Collapsible Row ("Applications")
  8. Collapsible Row ("FAQs")
  9. Trust Badges
  10. Related Products

Result: Information-focused quote page for technical products

Troubleshooting

Quote Button Not Showing

  • Check: Verify quote button block is added
  • Check: Ensure product is using product.quote template
  • Check: Test button in preview mode
  • Check: Verify block settings

Quote Form Not Opening

  • Check: Verify quote modal JavaScript is loaded
  • Check: Test in different browsers
  • Check: Check browser console for errors
  • Check: Ensure quote-modal.js file exists

Quote Form Not Submitting

  • Check: Verify required fields (name, email) are filled
  • Check: Test form submission
  • Check: Check Shopify contact form settings
  • Check: Verify email notifications are set up
  • Check: Test with different email addresses

Quote Requests Not Received

  • Check: Verify Shopify contact form is enabled
  • Check: Check email notification settings in Shopify
  • Check: Check spam/junk folder
  • Check: Verify contact form email address
  • Check: Test form submission manually

Variants Not Included in Quote

  • Check: Verify variant picker block is added
  • Check: Ensure customers select a variant
  • Check: Test variant selection
  • Check: Verify variant information in form submission

Images Not Showing

  • Check: Verify product has images in Shopify admin
  • Check: Ensure images are published
  • Check: Test with different products

Description Not Showing

  • Check: Verify description block is added
  • Check: Ensure product has description in Shopify admin
  • Check: Check block settings

Related Products Not Showing

  • Check: Verify related products section exists in template
  • Check: Ensure products are in same collection
  • Check: Check section settings

Setting Up Quote Products

Assigning the Quote Template

  1. Go to Products in Shopify admin
  2. Select a product
  3. Scroll to Search engine listing or find Template field
  4. Select product.quote from template dropdown
  5. Click Save

Managing Quote Requests

  1. Quote requests are sent to Shopify contact form
  2. You'll receive email notifications (if enabled)
  3. View requests in Shopify admin under Settings → Notifications
  4. Set up email forwarding or use Shopify email
  5. Respond to customers promptly

Email Notifications

  1. Go to Settings → Notifications in Shopify admin
  2. Find Contact form notifications
  3. Enable email notifications
  4. Set recipient email address
  5. Customize email template if needed

Related Templates

  • Product Page (product.json) - Standard product page with buy buttons
  • Collection Page - Browse multiple products
  • Cart Page - Shopping cart
  • Search Page - Search results

Related Sections

  • Related Products - Automatically shows related products
  • Product Spotlight - Feature products in other pages
  • Featured Collection - Showcase product collections

Next Steps:

  • Learn about Product Page Template (standard product page)
  • Learn about Collection Page Template
  • Set up quote products in Shopify admin
  • Customize your quote page layout and blocks
  • Configure email notifications for quote requests