Theme components install & config guide
Rentshelf ships the storefront picker as a theme app extension. You have two installation options. Pick one.
Option A — App embed (recommended)
Section titled “Option A — App embed (recommended)”This turns the picker on for every product page automatically. Zero theme editing.
- In the admin, go to Rentshelf → Settings.
- Click Open App embeds panel. The theme editor opens directly on the App embeds side panel.
- Find Rental Calendar Widget in the list.
- Toggle it on.
- Click Save in the top-right of the theme editor.
That’s it. Visit /products/<handle> on your storefront and the picker appears inline with the add-to-cart form.
App embed settings
Section titled “App embed settings”All picker copy, colors and labels are controlled from Rentshelf → Settings → Storefront widget in the admin (not inside the theme editor). The theme editor only exposes placement settings:
| Setting | Purpose | Default |
|---|---|---|
| Inject selector | CSS selector for the form/section the picker should be injected into. | form[action*="/cart/add"] |
| Inject position | Before or after the matched element. | Before the add-to-cart button |
| Hide native price selector | CSS selector for the theme’s price element to hide when the picker is active (prevents “double-price” confusion). | .price, .product__price, [data-product-price], .product-price |
If your theme uses an unusual structure, tweak these selectors. Defaults work on Dawn, Horizon, Studio and every top-selling paid theme.
Option B — Section block (manual placement)
Section titled “Option B — Section block (manual placement)”Use this if you want the picker in a specific spot in the product template (e.g. below the description, not above the add-to-cart).
- In the admin, go to Rentshelf → Settings.
- Click Open product template. Theme editor opens on the product template.
- Click Add block → Apps.
- Pick Rental Picker. It lands wherever the cursor was — drag it into position.
- Click Save.
The section block exposes more settings directly inside the theme editor (copy overrides, trust badges, colors). These override whatever’s in Rentshelf → Settings.
How the picker detects rental vs non-rental products
Section titled “How the picker detects rental vs non-rental products”The picker is delivered on every product page when using the app embed. On first load it calls an internal endpoint (/apps/rental/config) with the product handle. If the product isn’t configured as a rental, the picker removes itself from the DOM and the page looks normal.
Non-rental products are completely unaffected.
Troubleshooting
Section titled “Troubleshooting””The picker isn’t showing up”
Section titled “”The picker isn’t showing up””- Is Rental Calendar Widget enabled in the theme editor → App embeds panel?
- Is the product linked in Rentshelf → Products and marked Active?
- Reload the product page with a hard refresh (
⌘+Shift+R/Ctrl+Shift+R). - Open the browser devtools → Network tab → filter by
rental. You should see a successful call to/apps/rental/config?product_id=.... If it returns 404, the product isn’t linked; if it fails with a different error, check the next point. - Is the app installed correctly? Reinstall from Settings → Apps and sales channels if needed.
”The picker shows twice”
Section titled “”The picker shows twice””You’ve enabled both the app embed and the section block. Pick one. If using the section block, turn Rental Calendar Widget off in the App embeds panel.
”The native price still shows”
Section titled “”The native price still shows””Your theme uses a non-standard CSS class for the price element. Open devtools, find the element, and add its selector to the Hide native price selector setting.