Once you’ve added PreProduct via the Shopify App Store or created an account, a line of code needs to be added to your product page. We’re more than happy to request temporary access and do this for you (just email us). There are currently two ways to install PreProduct, depending on if you’d like PreProduct to use your native buttons or create it’s own.

Install by tagging buttons #

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

By tagging your existing add-to-cart buttons, PreProduct can convert them to pre-order buttons whenever the related product is on pre-order. This is great for keeping your storefront on brand, as well as supporting more complicated flows like quick-buy, bundles etc.

From 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)

The Shopify 2.0 update enables PreProduct to be added from the drag-and-drop theme customizer in the Shopify admin. Below is a GIF on what this looks like (please note that the PreProduct widget won’t show properly unless previewing in your live storefront).

*The PreProduct widget should only be added to the product page. This can be done by navigating through the customizer preview until you are on a single product page. If you don’t have a Shopify 2.0 theme, then you can manually add the snippet to your theme code instead.

To manually install PreProduct onto your storefront, you will need to copy and paste our snippet (below) into your product page theme file (which will be called something like product-template.liquid, product-form.liquid, product-main.liquid etc) on a new line after {% endform %} or wherever on the product page you would like the PreProduct widget to appear.

<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. Now enter product into the left-side search bar of your theme editor. We’re looking for the file which contains your buy buttons. In order of likeliness to contain it, here are the most common file names:  ‘product-buy-buttons.liquid’,  ‘product-form.liquid’, ‘main-product.liquid’, ‘product-template.liquid’, ‘product.liquid’. 

Now you can paste the code snippet anywhere you would like the pre-order button to appear on the page. Placing it after your buy-now form is often best. If you click command+f (Mac) or control+f (windows), then type in endform. You should see one of the below examples, it should have {{ form | payment_button }} somewhere in the nearby lines above it. If you don’t see a promising match, pick another file to search.

{% endform %} 
<!-- or -->
{%- endform -%}

4. Paste the PreProduct code snippet from step 1 onto a new line after the above. Now save your theme.

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

Manual Uninstall #

To manually uninstall PreProduct from your storefront, you will need to do the exact opposite of the above.

Finding the below snippet in your product page theme file, and deleting it.

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