How to use the advanced theme settings in EZ Preorder
The Theme Settings page in EZ Preorder & Back In Stock tells the app where your theme's add to cart button, variant picker and product cards are, so it can put the preorder button in the right place. Most stores never need to edit these fields: choose your theme in the Theme Selector first, and change individual fields only if support asks you to or you are comfortable with CSS selectors. Changes take effect on your storefront as soon as you click Save.
Available on: All plans. The Featured product and Collection page fields can be edited on the Growth, Professional and Scale plans; on Free and Core they are greyed out with an Upgrade to Growth link.
Where to find it: EZ Preorder → Configuration → Theme Settings.
Before you change theme settings
- Try a theme preset first. A preset fills in ready-made values for 358 themes. See What Shopify themes work with EZ Preorder.
- Rule out the common causes. A missing preorder button is usually caused by the app embed being off or the variant not meeting its preorder rule, not by these settings. See The preorder button is not showing on my product page.
- Note the current values. Copy the fields you plan to change somewhere safe, so you can put them back.
- Changes are saved together. Editing any field shows the save bar at the top of the page. Click Save to apply your changes or Discard to undo them.
What a CSS selector is
A CSS selector is a short piece of text that points to an element on a web page, such as .product-form (an element with the class product-form) or [name="id"] (an element with the attribute name="id"). EZ Preorder's theme settings are CSS selectors. To find one, open your product page in Chrome, right-click the element (for example your Add to cart button) and choose Inspect. The browser's developer tools show the element's tag, classes and attributes. If you are unsure, contact support and tell us which element you are trying to target.
Product page settings
The Product page card in EZ Preorder's Theme Settings controls how the preorder button replaces your theme's add to cart button on product pages.
| Setting | What it does | Default |
|---|---|---|
| Submit button selector of add to cart form | Points to your theme's add to cart button. EZ Preorder hides this button and inserts the preorder button in its place, copying its classes so it looks the same. If nothing on the page matches, no preorder button appears. Required. | form[action$="/cart/add"] button[type="submit"] |
| Variant selector | Points to the input that holds the selected variant's ID. EZ Preorder reads it to know which variant the shopper chose, and listens for changes to it. If nothing on the page matches, no preorder button appears. Required. | [name="id"] |
| Variant switch override | Turns on a script that follows the selected variant through the page address instead of the Variant selector. Turn it on only if the preorder button does not update when shoppers switch variants. | Off |
| Custom JS | A theme-specific script that tells EZ Preorder when the variant changes. Only EZ Preorder support can view or edit it. | Empty |
| Hidden elements | Elements to hide while the preorder button is showing, such as the Buy it now button. They reappear when the shopper switches to a variant that is not on preorder. | .shopify-payment-button |
The preorder button must sit inside your theme's product form to work. If the Submit button selector of add to cart form points to a button outside the form, the preorder button appears but adding to cart does nothing.
How to add or remove hidden elements
The Hidden elements field in EZ Preorder takes one CSS selector at a time:
- Type a selector in Hidden elements, for example
.product__price. - Press Enter. The selector appears as a tag below the field.
- To remove a selector, click the × on its tag.
- Click Save.
The default .shopify-payment-button hides Shopify's dynamic checkout button (Buy it now), so shoppers use the preorder button. Each selector hides only the first matching element on the page.
Variant switch override and Custom JS
Variant switch override in EZ Preorder is a switch for the generic variant script, which works with most themes that change the page address (the ?variant= part of the URL) when a shopper picks a variant.
- Turning it on saves the generic script. From then on, EZ Preorder follows the variant in the page address and no longer listens to the Variant selector.
- The switch shows On whenever any custom script is saved, including a script from a theme preset or one written by support.
- Turning it off removes the saved script, whichever script it was. Turning it on again adds the generic script, not the one you had before. To get a preset's script back, choose that preset again in the Theme Selector. To get a support-written script back, contact support.
Custom JS cannot be typed or pasted by merchants. The field is visible only to EZ Preorder support, and the app refuses any other script with the message "Custom JS can only be changed by EZ PreOrder support." You can still:
- turn the generic script on or off with Variant switch override,
- get a theme's own script by choosing its preset in the Theme Selector,
- save all your other theme settings: a script support added earlier is kept when you save.
If your theme needs its own script, contact support. See The preorder button does not update when switching variants.
Featured product settings
The Featured product card in EZ Preorder's Theme Settings has one field, Section selector, which points to your theme's Featured product section. It is required, defaults to .featured-product, and can be edited on Growth, Professional and Scale.
The Section selector matters on product pages too, on every plan: when a product page contains an element that matches it, EZ Preorder looks for the add to cart button inside that section. A theme preset sets this value for you. To show the preorder button in a Featured product section on your home page, turn it on in Configuration → Collections & Featured Product. See Preorder button on collection pages and featured products.
Collection page settings
The Collection page card in EZ Preorder's Theme Settings tells the app how to find each product card on a collection page. Preorder badges and the collection page preorder button use these fields. They can be edited on Growth, Professional and Scale.
| Setting | What it does | Default |
|---|---|---|
| Product wrapper selector | Points to each product card in the collection grid. | .product-card-wrapper |
| Product id selector | Points to the element inside each card that carries the product's ID. | h3 |
| Product id attribute selector | The name of the attribute on that element whose value ends with the product's ID. | id |
| Product image selector | Points to the element inside each card where the preorder badge is placed. | .card__media |
| Button selector (under Quick add) | Points to the button that opens your theme's quick add window. | modal-opener |
| Modal selector (under Quick add) | Points to the content of the quick add window, where the preorder button goes. | .quick-add-modal__content-info |
Advanced settings
The Advanced card in EZ Preorder's Theme Settings holds settings for heavily customized themes. The card itself says: "We don't recommend changing these on your own."
| Setting | What it does | Default |
|---|---|---|
| Delay time to render pre order button (ms) | Waits this many milliseconds (1000 ms is 1 second) before adding the preorder button and the deposit options to the page. Your theme's own button is hidden straight away. Use it only when your theme redraws the product form after the page loads and removes the preorder button. Whole numbers only. | 0 |
| Custom loading indicator | Use native loading spinner copies your theme's own spinner into the preorder button. Use custom loading spinner adds EZ Preorder's spinner instead, for themes whose spinner does not carry over. | Use native loading spinner |
| Submit button loading spinner selector | Points to the spinner element inside your theme's add to cart button, which EZ Preorder copies into the preorder button. | .loading-overlay__spinner |
| Add 'type' attribute to button | Helps EZ Preorder find your theme's original button again when it has to bring it back, for example when a shopper switches to a variant that is not on preorder. Turn it on when your Submit button selector of add to cart form does not include type="submit", or when a preset sets it. | Off |
Restock Alerts form selector
The Restock Alerts card in EZ Preorder's Theme Settings fixes themes where the EZ PreOrder - Notify Me block (the back in stock alerts signup button) records the wrong variant. Restock alerts are also called back in stock alerts or Notify Me alerts.
When the switch on the card is on, the Notify Me block reads the selected variant from the variant input inside the form you name in Form selector, instead of the first variant input on the page. The page address (?variant=) still takes priority when it is present. Form selector is required while the switch is on.
To find your form selector, click How to find it? under the field. In short: right-click your Add to Cart button, choose Inspect, and look for the form element that wraps the button and the variant picker. Common values are form.product-form, #product-form and form[action*="/cart/add"]. For other Notify Me problems, see The Notify Me button is not showing.
How to reset to default selectors
The Reset to default selectors button in EZ Preorder puts your theme settings back to the defaults, which match Dawn.
- Go to Configuration → Theme Settings.
- In the left column, below the settings menu, click Reset to default selectors.
- Click Save in the save bar. Nothing changes on your storefront until you save.
Reset clears the theme preset and sets these fields to their defaults: Submit button selector of add to cart form, Variant selector, Custom JS (cleared, so Variant switch override turns off), Add 'type' attribute to button, Delay time to render pre order button (ms), Custom loading indicator, Submit button loading spinner selector, the Featured product Section selector, and every Collection page field.
Reset keeps your Hidden elements (if the list is empty, it adds .shopify-payment-button back) and your Restock Alerts form selector settings.
Limitations
- One set of theme settings per store. The settings apply to whichever theme is live. If you switch themes, choose the new theme's preset.
- Only support can edit Custom JS. Merchants can switch the generic script on or off and apply preset scripts, but cannot enter their own code.
- Selectors depend on your theme's code. A theme update or a code edit that renames classes can stop a selector from matching. Re-select your preset after a major theme update.
- Hidden elements hide one element per selector. Each selector hides only the first matching element on the page. To hide a second copy, such as a sticky Buy it now bar, add a selector that matches that copy specifically, or contact support.
Troubleshooting
The preorder button disappeared after I changed a selector. The selector probably no longer matches anything on the page. Click Discard if you have not saved, or put back the value you noted. You can also use Reset to default selectors or choose your theme preset again.
The preorder button stopped updating on variant switch after I chose a preset or reset. Both replace any saved custom script. Turn on Variant switch override, or contact support if your theme needs its own script.
Both the preorder button and my theme's add to cart button show. Your Submit button selector of add to cart form matches a different button from the one shoppers see. Choose your theme preset or contact support.
The Buy it now button still shows next to the preorder button. Check that .shopify-payment-button is in Hidden elements, or add the selector your theme uses for that button.
The Featured product and Collection page fields are greyed out. These fields are editable on Growth, Professional and Scale. Click Upgrade to Growth to see plans.
Frequently asked questions
Do I need to change the advanced theme settings?
Usually not. Choose your theme in the Theme Selector, check your storefront, and contact support before editing selectors yourself.
Can I add my own JavaScript to EZ Preorder?
No. Custom JS can only be added or changed by EZ Preorder support. You can turn the generic variant script on or off with Variant switch override.
Why did Variant switch override turn itself on?
It shows On whenever a custom script is saved. Choosing a theme preset that includes a script, or support adding one, turns it on.
Does Reset to default selectors delete my preorder products or settings?
No. It only resets the selectors listed on the Theme Settings page. Your preorder list, button text and other configuration stay the same.
What does Delay time to render pre order button do?
It makes EZ Preorder wait the number of milliseconds you enter before adding the preorder button. Leave it at 0 unless your theme removes the button right after the page loads.
Related articles
- What Shopify themes work with EZ Preorder: the Theme Selector, presets and the full theme list.
- The preorder button is not showing on my product page: check the common causes before editing selectors.
- The preorder button does not update when switching variants: when to use Variant switch override.
- Preorder button on collection pages and featured products: turn on the features the Collection page and Featured product fields support.
- The Notify Me button is not showing: fix restock alert signups on your theme.
- How to get help and contact support: ask support to set up selectors or a custom script.