After installing PreProduct from the Shopify App Store, enable the Pre-order support theme app embed. This is the standard Shopify setup and works with regular themes and page builders such as PageFly and Shogun. Most stores do not need to add code to their product page.

Using BigCommerce? Follow the separate BigCommerce installation guide. The Shopify steps below do not apply to WooCommerce; follow the setup shown inside PreProduct for WooCommerce or email hello@preproduct.io for help.

Enable pre-order support on Shopify #

1. Open Setup in PreProduct and find the Enable pre-order support section.
2. Click Reveal Shopify link, then click Enable pre-order support.
3. Shopify’s theme editor opens at Online Store → Themes → Customize → App embeds. Switch on the PreProduct embed named Pre-order support (previously called “Optimized button loading”), then click Save.
4. Return to PreProduct. The Setup screen will show Already enabled. The Home screen warning, “Pre-order support is not enabled on your theme”, will be replaced by a success banner.

You can also enable the embed manually from Shopify admin by going to Online Store → Themes → Customize → App embeds, switching on Pre-order support, and clicking Save.

Why this is required: Shopify is deprecating ScriptTag app scripts. Apps cannot create new script tags from 1 October 2026, and existing script tags stop loading on 1 March 2027. The theme app embed replaces that delivery method for PreProduct’s storefront script.

Changing themes? App embeds are enabled per theme. If you publish a new or different theme, enable Pre-order support on that theme too.

Check your theme (optional) #

PreProduct automatically detects add-to-cart buttons on most stores, so no button setup is usually required. On the Setup screen, expand the Button tagging card labelled “No setup required for most stores”, then click Check my theme. PreProduct opens your storefront and confirms whether it detected and tagged the buy button.

If the check cannot detect your button, use the manual button-tagging fallback below or email hello@preproduct.io.

During onboarding, complete Enable pre-order support first, then Check PreProduct can detect your buy buttons. You can then switch on Shopify checkout validations for pre-order enforcement, separating pre-order and ship-now items, and maximum-limit enforcement.

Manual button tagging (fallback) #

(Only needed when Check my theme cannot detect your existing add-to-cart button)

PreProduct can convert your existing add-to-cart buttons to pre-order buttons when a product has an active listing.
This approach:

• Maintains your store’s branding
• Works with advanced features like quick-buy
• Preserves your existing product page flows

In your theme’s code, paste data-native-pre-order-btn data-starting-variant={{product.selected_or_first_available_variant.id }} within your  <button ... >  tag like the below example. Just be sure to leave an empty space before and after it, and of course feel free to email us and we’ll request temporary store access and add it for you instead.

<button id="add-to-cart" type="submit" 
  data-native-pre-order-btn data-starting-variant="{{product.selected_or_first_available_variant.id }}" 
>
    Add to Cart
<button/>

Use PreProduct’s own button (fallback) #

(Uses PreProduct’s button for pre-orders)

If your theme needs a separate PreProduct button instead of its native add-to-cart button, you can add the PreProduct block through Shopify 2.0’s drag-and-drop theme customizer. Keep the Pre-order support app embed enabled as described above.

Using the Shopify 2.0 Customize editor #

1. Navigate to a single product page in the customizer preview
2. Add the PreProduct widget to the product page only

Don’t have a Shopify 2.0 theme? You can manually add the PreProduct snippet by following the instructions below.

Adding to your storefront manually #

You’ll need to locate your product page theme file, then add our snippet on a new line either after the {% endform %} tag, or wherever you’d like the pre-order button to appear on the product page. Read on for a step-by-step guide.

<div id="preproduct-pledge" data-id="{{product.id}}" data-starting-variant={{ product.selected_or_first_available_variant.id }} style="text-align:left!important;"></div>

Step by step

1. Copy the following code snippet to your clipboard:  

<div id="preproduct-pledge" data-id="{{product.id}}" data-starting-variant={{ product.selected_or_first_available_variant.id }} style="text-align:left!important;"></div>

2. Click on Online Store in your Shopify toolbar, followed by the Actions button above the preview of your store, then click Edit code from the dropdown menu.

3. In your theme editor’s left sidebar, search for one of these commonly used files (listed by likelihood):

• ‘buy-buttons.liquid’
• ‘product-form.liquid’
• ‘main-product.liquid’
• ‘product-template.liquid’
• ‘product.liquid’

4. Once you’ve found your buy buttons (usually above {{ form | payment_button }}), you can add the code snippet. To locate the right spot:

• Search for “endform” using ‘Command+F’ (Mac) or ‘Control+F’ (Windows)
• Add the snippet after this line or wherever your buy-now form ends

Any problems setting up, don’t hesitate to email us at hello@preproduct.io and we will get you up and running.

Manual Uninstall #

To remove PreProduct from your storefront manually:

1. Find your product page theme file (typically product-template.liquid, product-form.liquid, or product-main.liquid)
2. Locate and delete the PreProduct code snippet

<div id="preproduct-pledge" data-id="{{product.id}}" data-starting-variant={{ product.selected_or_first_available_variant.id }} style="text-align:left!important;" ></div>