# Enable BOPIS/Pre-order on Shopify

***

### description: >- Learn how to enable BOPIS/Pre-order on the Shopify PDP page through HotWax Commerce.

## Enable BOPIS/Pre-Order Scripts for Shopify

Retailers seeking to offer Buy Online, Pick Up In Store (BOPIS), or pre-order solutions on their Shopify store need to enable bopis/Pre-order scripts to implement changes on Shopify PDP and to show `Pre-Order` or `Pick Up Today` Button. Integrating these features seamlessly into their online store not only enhances the shopping experience for customers but also streamlines the operational process for retailers. With the `HotWax Commerce Integration App`, retailers can customize directly on the Shopify interface.

Here's how you can enable BOPIS/Pre-order on Your Shopify PDP

#### Step-by-Step Usage Instructions

1. **Login to HotWax Commerce:** Access your HotWax Commerce instance using your credentials.
2. **Navigate to Shopify Shop Menu:** Open the Hamburger menu and select the `Shopify Shop` menu.
3. **Open Shopify Shop View:** Click on the `Shop ID` to open the `Shopify shop view` page.
4. **Access Shopify Script Section:** Scroll down to the `Shopify Script` section on the `Shopify shop view` page.
5. **Add BOPIS or Pre-order JS:** Click the `Add` button and select either `BOPIS JS` or `Pre-order JS` from the dropdown menu. Press `Add` to confirm the selection.
6. **Verify JS Addition:** Ensure that the JS file is added successfully and reflects its version.
7. **Add BOPIS CSS or Pre-order CSS:** Click the `Add` button again and select either `BOPIS CSS` or `Pre-order CSS` from the dropdown menu. Confirm the addition.
8. **Verify CSS Addition:** Ensure that the CSS file is also successfully added below.
9. **Customize PDP (Optional):** If desired, customize the PDP for BOPIS or Pre-order by clicking on the file icon for JS and CSS, apply changes, and upload it back into HotWax Commerce using the `upload` button.
10. **Add Shopify Tag ID:** In the `Shopify Tag ID` column against the JS, click the `Add` function. Verify that the `Shopify Tag ID` is added and reflected. Since the CSS is already associated with the JS file, adding a Shopify Tag for the CSS file is not required.

This ensures seamless integration and reflects the modifications on the Shopify storefront instantly. Users can verify the pickup button at Shopify PDP and confirm that both scripts are added successfully.