Multiple quick buy

Multiple Quick Buy – User Documentation

Overview

The Multiple Quick Buy section lets customers add multiple products to their cart from a single, fast, and easy-to-use interface. It’s highly configurable—supporting custom layouts, headings, images, and flexible product sourcing.

The most important setting in this section is how you choose which products to show. This document focuses on that setup, along with the main customization options.


Choosing the Product Source

The Source of Data setting controls which products are displayed in the Multiple Quick Buy section. Select from these options:

🔹 Product Page

  • Shows the current product with all its variants
  • Best for product pages where you want customers to select different variants


🔹 Collection Page

  • Shows all products from the current collection
  • Automatically works when the section is added to a collection template

🔹 Custom Products

  • Manually select specific products using the product picker
  • Best for curated product sets or bundles

🔹 Custom Collection

  • Select a specific collection to display
  • Great for featuring a particular collection regardless of the current page

🔹 Event Ticket (Read more here)

  • Shows products from the event.ticket metafield on article pages
  • Perfect for event pages with associated ticket products

🔹 Product Metafield

  • Shows products from the custom.quick_buy_products metafield on the current product
  • Allows you to set different related products for each individual product
  • Perfect for product-specific recommendations or bundles
  • Falls back to the current product if no metafield is set

How to Use the custom.quick_buy_products Metafield

You can add a product list metafield to any product in your Shopify admin to customize which products show in the quick buy section on that product’s page.

🔧 Create the Metafield

  1. In your Shopify admin, go to Settings → Custom data → Products.

    Click Add definition.

    Fill in the details:

    • Name: Quick Buy Products
    • Namespace and key: custom.quick_buy_products
    • Content type: Product list
  2. Save the metafield definition.

🛠️ Assign Products to the Metafield

  1. Go to Products in your Shopify admin.
  2. Select a product.
  3. Scroll down to the Metafields section.
  4. In Quick Buy Products, select the products you want to associate.
  5. Save the product.

Now, when a customer visits that product’s page, those linked products will appear in the Multiple Quick Buy section—if no manual products or collections are selected in the section settings.


Multiple Quick Buy - Customizer Settings Documentation


Section Settings

Layout & Sizing

  • Section Size: Choose between "Wrapper" (standard container) or "No wrapper" (full width)
  • Fixed height desktop: Enable to set a specific height for the section
  • Fixed height desktop: When enabled, set height between 300-1000px (default: 600px)

General Image

  • Show image: Enable/disable the main section image
  • Image: Select an image to display alongside the product list
  • Image position: Choose "Left" or "Right" for desktop layout
  • Image position small screen: Choose "Above" or "Below" for mobile layout

Section Heading

  • Header: Enter the section title text (default: "Quick buy")
  • Heading size: Choose from Extra large, Heading 1-6 (default: Heading 1)
  • Heading fill: Choose "Default", "Hollow", or "Hollow animated" styling
  • Heading style: Choose "Default", "Capitalize", "Uppercase", or "Lowercase" (default: Uppercase)
  • Heading align: Choose "Left", "Center", or "Right" alignment (default: Left)

Source of Data

  • Source of data: Select how products are sourced:
    • Product page: Shows current product with all variants
    • Product metafield: Uses custom.quick_buy_products metafield
    • Collection page: Shows all products from current collection
    • Custom products: Manually select specific products
    • Custom collection: Select a specific collection
    • Event ticket: Uses event.ticket metafield on article pages
  • Pick a set of products: Product picker (appears when "Custom products" is selected)
  • Pick a collection: Collection picker (appears when "Custom collection" is selected)

Bottom Summary

  • Show summary: Enable/disable the summary section with totals
  • Summary button text: Customize the add-to-cart button text (default: "Add products to cart")
  • Summary button style: Choose button styling:
    • Primary, Secondary, Transparent, Ghost
    • Link, Link arrow, Link underlined, Link arrow underlined
    • Default: Link arrow

Colours

  • Colour scheme: Select from available theme colour schemes (default: Background 1)

Padding

  • Padding top: Desktop top spacing (0-100px, default: 50px)
  • Padding bottom: Desktop bottom spacing (0-100px, default: 50px)
  • Padding top mobile: Mobile top spacing (0-100px, default: 30px)
  • Padding bottom mobile: Mobile bottom spacing (0-100px, default: 30px)

Block Settings

Title Block

Controls how product information is displayed for each item.

Text Styling:

  • Heading style: Choose "Default", "Capitalize", "Uppercase", or "Lowercase"
  • Heading fill: Choose "Default", "Hollow", or "Hollow animated"

Content Options:

  • Show product title: Display the main product name (default: false)
  • Show variant prefix: Add custom text before variant names (default: false)
  • Variant prefix text: Custom text to show before variant names (default: "Variant")
  • Show description: Include product description (default: true)
  • Truncate description: Limit description length (default: true)
  • Truncate description length: Set character limit 0-300 (default: 150)
  • Show SKU: Display variant SKU information (default: true)
  • Show image: Include product image (default: true)
  • Aspect ratio: Choose image aspect ratio:
    • Landscape, Wide, Portrait, Square, Original
    • Default: Square

Price Block

Automatically displays product pricing with no additional settings required.

Quantity Selector Block

Controls the add-to-cart functionality for each product.

Action Type:

  • CTA Type: Choose interaction method:
    • Quantity selector: Number input only
    • Button: Individual add-to-cart buttons only
    • Quantity selector and button: Both options available
    • Default: Quantity selector

Availability:

  • Show availability: Display stock information (default: true)
  • Only visible when quantity selector is enabled

Button Settings:

  • Button type: Choose button styling (same options as summary button)
  • Button text: Customize individual product button text (default: "Add to cart")
  • Only visible when button option is selected

Important Notes

  • Block Limits: Only one of each block type can be added per section
  • Summary Behavior: When using "Button" CTA type, the summary section is automatically hidden
  • Mobile Responsiveness: Image positioning and layout automatically adapt for mobile devices
  • Default Preset: The section comes with a preset that includes all three blocks (Title, Price, Quantity Selector)
  • Disabled Groups: This section cannot be used in header, footer, or notifications groups

Usage Tips

  • Use the Title block to control what product information customers see
  • The Price block automatically handles sale prices and currency formatting
  • Choose the appropriate CTA Type based on your desired user experience
  • The Product metafield option provides the most flexibility for product-specific recommendations
  • Fixed height is useful for maintaining consistent section sizing across pages

Best Practices & Tips

  • Always define a product list or collection for consistent results.
  • Use the custom.quick_buy_products metafield to set product-specific recommendations.
  • Style the section using layout, padding, and colour options.
  • It’s mobile-friendly out of the box—no need to configure separately.
  • Great for bundles, gift sets, related products, or curated lists.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.