| name | bopis-customizer |
| description | Use this skill when modifying the "Buy Online, Pick Up In Store" (BOPIS) feature, including the pickup button text, modal design, or store search logic. Triggered by keywords: BOPIS, pickup today, store finder, local pickup. |
BOPIS Customization Skill
This skill provides comprehensive guidance for modifying the "Buy Online, Pick Up In Store" (BOPIS) experience in this theme. The BOPIS feature is a custom integration (prefixed with hc-) that uses HotWax Commerce logic.
🏗 Architecture Overview
🛠 Common Customizations
1. Changing Button Text
The button text is hardcoded in the JavaScript injection.
- Where:
assets/bopis.js
- Search for:
Pick Up Today
- Note: There are multiple instances (one for the main button, one for the modal submission).
2. Styling the Button
The "Pick Up Today" button uses the hc-open-bopis-modal class.
- Where:
assets/bopis.css
- Class:
.hc-open-bopis-modal
- Tip: To match the theme's native buttons, use CSS variables like
--color-button and --font-button-size.
3. Modifying the Modal Layout
The modal HTML is stored in a string variable inside assets/bopis.js.
- Search for:
$pickUpModal
- Tip: If adding new fields, ensure you update the
handleAddToCartEvent to process them.
4. Adjusting Store List Result
The store cards (shown after searching) are generated in the displayStoreInformation function.
- Where:
assets/bopis.js -> displayStoreInformation function.
- Class:
#hc-store-card
🚀 Vibecoding Best Practices
When asking an agent to modify BOPIS:
- Specify the Layer: Tell the agent if the change is visual (CSS) or functional (JS).
- Handle Injections: Remind the agent that the button is dynamically injected into
<div class="hc-bopis-button"></div>.
- Check the Sku: The BOPIS logic relies on the SKU found in
<input class="hc_product_sku">.
⚠️ Known Gotchas
- Shopify Assets Cache: After modifying
bopis.js or bopis.css, ensure you are viewing the site on a fresh session or bypass cache.
- Duplicate Buttons: The code checks
existingBopisButton.length == 0 before injecting. If you change the selector names, you might end up with duplicate buttons.
