After installing PreProduct from the Shopify App Store or BigCommerce site, you may need to add a line of code to your product page. There are two installation options:

1. Use your store’s native buttons
2. Let PreProduct create its own buttons

PreProduct will try to auto-install, but we’re happy to check and help with installation – just email us and we can request temporary access to your store.

Install by tagging buttons #

(Uses your existing add-to-cart buttons for pre-orders)

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/>

Install by adding snippet #

(Uses PreProduct’s button for pre-orders)

PreProduct can be added through Shopify 2.0’s drag-and-drop theme customizer. Here’s how:

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>