Advanced settings

Use this guide if you want to add custom cart properties, switch how the offer handles the Shopify purchase option, inject custom CSS or JavaScript, override storefront button and modal text, or pin preorder widget elements to custom CSS selectors. The Advanced section of the offer editor collects these power-user and developer settings; most merchants won't need to change them. Some of them (cart properties, CSS/JS, text overrides) show up for customers, others are internal configuration only.

Before you begin

You need an existing preorder offer to reach the Advanced section. If you haven't created one yet, see Set up preorders.

Choose your setup

The Purchase option setting controls whether STOQ attaches a Shopify selling plan (purchase option) to preorder line items, or manages the preorder entirely through the storefront widget without one. Decide this before you configure payment and fulfillment, switching later resets both.

Switching from Use Shopify purchase option to Use without purchase option resets the offer's payment setting to full payment with no discount, and its fulfillment status to Unfulfilled. The Scheduled and On hold fulfillment statuses require the purchase option and are unavailable without it. Disabling the purchase option doesn't delete the existing Shopify selling plan group, it stops STOQ from syncing to it.

What customers will see

When STOQ writes properties to a cart line item, it marks some as hidden by prefixing the key with an underscore (_). Shopify hides these from customers in the storefront cart and checkout; they're only visible to you in Shopify admin and in STOQ's order views.

The fulfillment timeline property (from Show fulfillment timeline in cart) and the payment breakdown property (from Show payment details & savings in cart) are visible by default. Your custom cart attribute follows whatever key you type; start it with an underscore to hide it from customers. The offer editor's cart preview reflects this: visible properties show inline on the line item, hidden ones show in a separate "Visible in admin" panel.

A few other Advanced settings reach the storefront too: with Use Shopify purchase option turned on, customers see the preorder selling plan at checkout, and any CSS, JavaScript, or text overrides you set (Out of stock text, Add to cart text, Continue/Cancel button text) apply on the product page as soon as you save and refresh.

Set it up

Cart

Three checkboxes control what STOQ writes to each order line item in the cart:

When Add custom cart attribute is checked, enter your custom text using the placeholder format key: value. The default placeholder is:

{{ name }}: Save {{ discount }}, ships on {{ date }}

Click available variables to open a modal listing every variable you can embed:

Click Add to field next to any variable in the modal to append it to your custom attribute text. This custom cart attribute text is translated per language when multi-language is enabled on your store.

Purchase option

Select Use Shopify purchase option or Use without purchase option; see Choose your setup above for which to pick.

Currency and custom styles

Enter any valid CSS to override the default preorder widget styles. The STOQ preorder button element uses the class .restock-rocket-preorder-button. Changes take effect after you save and refresh your storefront. For the full list of class names you can target, see Customize preorder elements with CSS.

.restock-rocket-preorder-button { ... }

Enter JavaScript that runs on the storefront. Use the restock-rocket:loaded event to hook in after the preorder widget initialises:

document.addEventListener('restock-rocket:loaded', function() { ... })

Like the CSS field, this JavaScript field is stored on your shop settings and runs on every product page with a preorder widget, not just the offer you're currently editing.

Click Show more to reveal five additional text override fields. These are shop-wide defaults; they apply whenever the preorder widget is in the corresponding state.

These fields are translatable when multi-language is enabled. To override button text for a single offer instead, use the per-offer Button text field in the Widget section.

Developer settings

Turn on Dev mode to access a set of advanced CSS selector fields that control exactly where STOQ inserts preorder widget elements on product pages. By default, STOQ locates the Add to cart button automatically; use Dev mode only if your theme's markup doesn't match the defaults and preorder elements are appearing in the wrong place.

When Dev mode is enabled, the following product page selectors appear inside a highlighted panel:

Each position selector pairs with an Insertion type dropdown:

These selectors apply to all product pages for this shop. For collection, search, and other non-product pages, go to Preorders in the left menu, then the Settings tab, then the Pages sub-tab, and click Customize instead.

Check your setup

After saving, open your storefront product page and add a preorder item to the cart:

• If you enabled Show payment details & savings in cart or Show fulfillment timeline in cart, verify those values appear on the cart line item in the drawer and on the checkout cart page.
• If you added a custom cart attribute, confirm the key:value text shows in the cart attributes section of the order in Shopify admin after placing a test order.
• For CSS or JS changes, do a hard refresh on the storefront to clear any cached scripts.
• For Dev mode selector changes, confirm the button, disclaimer, badge, and other elements render in the intended locations.

Troubleshooting

Limitations

• The CSS, JavaScript, and text override fields (Currency format, Out of stock text, Add to cart text, Continue button text, Cancel button text) are stored on your shop settings, not the individual offer, so they apply across every preorder offer on your store. Use the per-offer Button text field in the Widget section if you need different button text for one offer.
• Dev mode selector overrides apply to all product pages for this shop. For collection, search, and other non-product pages, use the Pages sub-tab under Preorders → Settings instead, then click Customize.

FAQ

Related guides