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.