This article explains how to install the Shopify store theme code required to display the Check ETA feature. Once enabled, a button will be added to the store that when clicked will display the ETA date of the earliest Purchase Order that can fulfil the order.
You can configure:
- The text on the button
- The text displayed before the ETA date e.g. Warehouse Delivery Date
- The text displayed if an ETA is unknown
Modifications to your Shopify theme should only be done by an experienced developer.
Installation
Download Pre-Order asset files
To install the Shopify Pre-Order ETA feature, download the assets using the link above and follow the steps for each of the Shopify theme files listed below.
Instructions are included in the file "rex-product-eta.md"
layout/theme.liquid
Add the following code to the end of the header:
{% include 'rex-product-eta' %}
snippets/rex-product-eta.liquid
- Expand the Assets section
- Click Add a new asset
- Click the Choose File button on the Upload a File tab
- Navigate to where you have downloaded the files
- Select rex-product-eta.liquid
- Click Open
- Click Upload asset
- The file will be uploaded.
assets/rex-product-eta.js
- Expand the Assets section
- Click Add a new asset
- Click the Choose File button on the Upload a File tab
- Navigate to where you have downloaded the files
- Select rex-product-eta.js
- Click Open
- Click Upload asset
- The file will be uploaded.
assets/rex-product-eta.css
- Expand the Assets section
- Click Add a new asset
- Click the Choose File button on the Upload a File tab
- Navigate to where you have downloaded the files
- Select rex-product-eta.css
- Click Open
- Click Upload asset
- The file will be uploaded.
Configure settings in the rex-product-eta.js
- Edit the file rex-product-eta.js (uploaded in a previous step)
- At the top of the file in the constructor update the following settings:
Setting | Details |
this.buttonTextStart | The text displayed in the Check ETA button when first loaded e.g. Check ETA |
this.buttonTextAvailable | The label displayed in front of the ETA data when an ETA is returned e.g. Expected Warehouse Delivery Date |
this.buttonTextUnknown | The text displayed when no ETA is available e.g. ETA not found, please contact us for more information about this product |
this.predecessorSelector | DOM selector for the element after which the ETA button will be displayed. Defaults to the Add to Cart button. |
this.variantSelector | DOM selector(s) for variant selector controls in the theme. Defaults to a comma separated list of common selectors used in many themes but may need to be updated. |
this.quantitySelector | DOM selector for the quantity input box if being used in the theme |
Frequently Asked Questions
Product isn't available for pre-order
For a product to be available for pre-order, ensure you have configured the following items correctly:
- Shopify Store
- Product
- Purchase Orders
Follow the instructions for Enabling Shopify Pre-Orders for more information.