Most of the customisations you’ll want to do are handled via the PreProduct app. However, certain configs can be made via data-attributes on the PreProduct snippet.

Run outside of regular Shopify product pages #

-Add data-headless=“true” within the PreProduct snippet. For example:

<div id=“preproduct-pledge” data-headless="true" ></div>

Change express checkout button text (if enabled) #

-Add data-express-btn-txt within the PreProduct snippet with a value. For example:

<div id=“preproduct-pledge” data-express-btn-txt="pre-order :)" ></div>

Specify a starting variant (stops auto-redirects for specific variant pre-orders) #

-Add data-starting-variant within the PreProduct snippet to let PreProduct know which variant will be selected on initial load. We can use liquid for regular Shopify themes like so:

<div id=“preproduct-pledge” data-starting-variant={{ product.selected_or_first_available_variant.id }} ></div>

Specify a redirect location when adding to cart #

-Add data-cart-redirect-url within the PreProduct snippet to tell PreProduct to reload the current location. Or alternatively, add a value with your desired redirect location. e.g. data-cart-redirect-url=”/collections”

<div id=“preproduct-pledge” data-cart-redirect-url ></div>

Using your native store button for pre-orders #

-This is handled by adding a data-attribute directly to your buy-now <button> tag. More info here.

Specify an isolated pre-order cart area #

– When PreProduct is set up with the front-end redirect: ‘Redirect to cart (isolate pre-orders) ‘ you can add the attribute data-native-cart-pre-order-cta-container to a HTML tag on your cart page to specify an area to load in to.

<section data-native-cart-pre-order-cta-container > </section>