Home About Blog Terms Docs Contact

Installing the PreProduct snippet


Shopify Store 1.0 Install (most stores) #


Summary #

To manually install PreProduct onto your storefront, you will need to copy and paste <div id="preproduct-pledge" data-id="{{product.id}}" style="text-align:left!important;"></div> into your product page theme file (e.g. product-template.liquid), just after {{ product.description }} or wherever on the product page you would like the PreProduct widget to appear. Below is a quick guide on how to do this.



Step by step #

1. Copy the following code snippet to your clipboard:

<div id="preproduct-pledge" data-id="{{product.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.


Step 1 adding code snippet


3. Now click on the sections folder from the list and then find your product page template e.g. ‘product-template.liquid’, ‘/templates/product.liquid’ or ‘/snippets/product-form.liquid’.

Now you can paste the code snippet anywhere you would like it to appear on the page. Placing it before the description can be carried out by hitting the command key and f or the control key and f to open the find function of your browser, then by typing in product.description (or ‘product.content’) and hitting enter. You should see something like the below example:

{{ product.description }}


4. Paste the PreProduct code snippet from step 1 directly after the above. Now save your theme.

Step 2 - pasting code snippet

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



Manual uninstall



To manually uninstall PreProduct from your storefront, you will need to do the exact opposite of the above. Finding <div id="preproduct-pledge" data-id="{{product.id}}" style="text-align:left!important;" ></div> in your product page theme file, and deleting it.


Shopify Store 2.0 Install (themes created after August 2021) #


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


store 2.0 install proccess


*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.