|  Pipeline theme
Latest
Latest
  • About Pipeline
    • Pipeline theme documentation
    • Learn Pipeline
  • Updates
    • What's new in Pipeline
    • Pipeline releases
  • Sections
    • Pipeline sections
      • Explore all the sections
      • Accordion group
      • Accordion single
      • Blog posts
      • Collections list
      • Collection product grid
      • Contact form
      • Custom HTML
      • Custom Liquid
      • Custom content
      • Featured article
      • Featured product
      • Gallery
      • Gallery text
      • Icon columns
      • Image banner
        • Countdown timer
        • Collage
      • Image with text
      • Logo list
      • Map
      • Mosaic
      • Newsletter
      • Page
      • Product grid
      • Product slider
      • Product slider tabs
      • Products with image
      • Recently viewed products
      • Rich text
      • Scrolling promotion
      • Shop the look
      • Slideshow
      • Tabs
      • Text columns with images
      • Video
      • Video banner
  • Settings
    • Theme settings
      • Global theme settings
      • Color
      • Typography
      • Layout
      • Search
      • Product card
      • Product form
      • Cart
      • Social media
      • Currency
      • Favicon
      • Advanced
      • Checkout
      • Custom CSS
      • Theme style
  • Header
    • Announcement bar
      • Settings and colors
      • Free shipping message
      • Text announcement
      • Icon column
      • Custom HTML
    • Header
      • Header styles
      • Icon styles
      • Toolbar
      • Navigation images
      • Collection block
      • Linking to menu items
      • Transparent header
      • Sticky header
      • Highlight sale menu
      • Collection images
  • Footer
    • Pipeline footer
      • Footer
      • Subfooter
  • Products
    • Product pages
      • Pre-orders
      • Breadcrumbs
      • Tabs and accordions
      • Tabs with metaobjects
      • Product page layout options
      • Product zoom
      • Inventory count down
      • Size charts
      • Unique product content
      • Alt-text sizing information
      • Swatch size
      • Color swatches (legacy)
      • Product siblings
      • Complementary products
      • Buy it with
  • Collections
    • Collection pages
      • Subcollections
      • Badges / Stickers
      • Custom filter options
      • Collection sorting
      • Layout options
      • Speed performance
  • Cart
    • Pipeline Cart
      • Cart types
      • Cart page
      • Cart drawer
      • Cart popup
      • Editing cart text
      • Cart upselling
      • Settings
  • Promotions
    • Upselling
      • Complementary products
      • Buy it with
      • Upsell with Quick View
      • Cart upselling
      • Upsell multiple products
      • Basic version
  • overlay
    • Cart drawer
      • Drawer cart
      • Popup cart
    • Popups
      • Cookies consent message
      • Newsletter popup
      • Text popup
  • Siblings
    • Product siblings
      • About product siblings
      • How to setup siblings
      • Siblings metafields
      • Cutline
      • Siblings collection
      • Siblings product setup
      • Add siblings block
  • Search
    • Predictive search
  • Pages
    • Page templates
      • Overview
      • Unique page content
  • FAQ
    • Frequently asked questions
      • Default theme content
      • Context picker
      • Check your theme version
      • Share preview link
      • How to download latest theme version
      • Migrating your settings
      • Improving the speed of your site
      • Optimizing performance of your Product Card & Collection pages
  • Apps
    • Shopify apps
      • Supported apps
      • App integration
      • Search and Discovery
  • License
    • Theme license
  • Support
    • Contacting support
Powered by GitBook
On this page
  • How to
  • Step 1
  • Step 2
  • Step 3
  • Bonus setup
  1. Products
  2. Product pages

Pre-orders

Replace the add-to-cart button with a pre-order button using metafields

Last updated 1 year ago

Pipeline can display a "Pre-order" button on any of your products without having to create a custom product template. We use a metafield that you can define easily and then start using the feature. Simply toggle on/off any product that needs to display the "Pre-order" button.

On the main product page, the Add to Cart button is replaced with a Pre-order button:

How to

There are a few basic steps to set up and start using the pre-order feature. Here is a quick summary of the steps:

Basic steps

  1. Using the Shopify Admin under Settings, define a product metafield. The Content type is True or false.

  2. In the Product Setup, toggle the setting to true for any product you wish to display the "Preorder" button.

  3. Under Shopify Admin -> Payments, ensure your store can Manually capture payment

Step 1

In the Shopify Admin -> Settings -> Custom data, choose Products:

  • Use the "Add definition" button to create a new product definition

  • For the Name, use "preorder" or "Preorder" (no hyphen/dash)

  • Change the Namespace and key from custom.preorder to theme.preorder (important):

  • Verify that you've changed to theme.preorder

  • Add an optional description

  • Click on Select type, type in "true", and then choose "True or false":

  • Verify that your settings look like the following:

  • Use the Save button to complete.

Step 2

Now your can toggle on/off the setting on any of your products (the fun part).

  • Under the Shopify Admin -> Products, choose a product.

  • Scroll to the bottom of the product setup, and to the Metafields section, here you'll find the new Preorder field.

  • Toggle On to make that product display a "Pre-order" button on the product detail page.

Step 3

Shopify recommends that you manually capture payments if selling products that are not ready to ship. Contact Shopify Support for any assistance with your Payments setup. Here is a support article from Shopify:

Bonus setup

You can add a custom product badge called "Pre-Order" to display on your collection pages or any section that used the Product Card:

Follow our instructions on how to create a custom badge in Pipeline to easily add this feature:

Badges / Stickers
Capturing paymentsShopify Help Center
Logo