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)

This turns the picker on for every product page automatically. Zero theme editing.

1. In the admin, go to Rentshelf → Settings.
2. Click Open App embeds panel. The theme editor opens directly on the App embeds side panel.
3. Find Rental Calendar Widget in the list.
4. Toggle it on.
5. 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

Most picker copy, colors and calendar style controls live in the Rental Calendar Widget settings inside the Shopify theme editor. App embed settings focus on automatic placement:

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)

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).

1. In the admin, go to Rentshelf → Settings.
2. Click Open product template. Theme editor opens on the product template.
3. Click Add block → Apps.
4. Pick Rental Picker. It lands wherever the cursor was — drag it into position.
5. Click Save.

The section block exposes copy, trust badges, calendar styles, colors, layout and rental product button controls directly inside the theme editor.

Rental product buttons

Linked rental products can use Rentshelf-specific button behavior while non-rental products keep the theme’s normal buttons.

You can configure the default behavior from Rentshelf → Settings, or override it on a specific product template from Rental Calendar Widget → Rental product buttons in the Shopify theme editor.

Use these controls when you want to:

• rename the theme Add to cart button to Rent Now, Book Now or another rental-friendly label;
• show Choose rental dates until the customer has selected valid pickup and return dates;
• hide or keep dynamic checkout buttons such as Buy it now on linked rental products;
• require valid rental dates before the product can be added to cart.

See Rental product buttons for the full setup guide.

Caution

Don’t enable both the app embed and the section block on the same product page — you’ll get two pickers. Pick one approach.

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.

Cart page behavior

Rental products carry their own quote into the cart. For Rentshelf-connected lines, the theme helper:

• shows the rental metadata collected by the picker;
• hides the product’s normal sale price so customers do not compare it with the rental quote;
• keeps the line total and cart subtotal aligned to the rental quote or the booking deposit due today;
• preserves Due today, Remaining balance, Payment option, delivery method, add-ons and customer inputs through checkout.

If you customize the cart template, keep line-item properties visible for rental products. They are how staff and customers see the booking window, deposit choice and operational notes.

Demo store password

Shopify development stores can remain password protected even when used as demos. If you share Rentshelf’s demo store with prospects, include:

• Store: https://rentshelf-demo-rentals.myshopify.com/
• Password: yuighi

Troubleshooting

”The picker isn’t showing up”

1. Is Rental Calendar Widget enabled in the theme editor → App embeds panel?
2. Is the product linked in Rentshelf → Products and marked Active?
3. Reload the product page with a hard refresh (⌘+Shift+R / Ctrl+Shift+R).
4. 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.
5. Is the app installed correctly? Reinstall from Settings → Apps and sales channels if needed.

”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”

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.

”The cart shows the product price and the rental total”

Update the theme helper and test the cart again. For rental-connected products, the cart should show rental metadata and one customer-facing total. The product’s normal sale price should be hidden on the cart line.

Next up

Check the rental product on your storefront.