Home About Blog Terms Docs Contact

Data-attribute configs

 

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>

 


 

 

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.