Skip to content

Widget customization

The storefront rental picker is customized from the Shopify theme editor. Open the product template, select the Rental Calendar Widget app block, then adjust the copy, calendar style, trust row, colors, layout and rental product buttons for that theme.

FieldUsed for
HeadingMain picker title (e.g. “Rent this product”).
SubheadingSmall text below the heading.
Start / End labelsLabels on the two date inputs.
Add-ons labelSection heading above add-ons.
Total / Deposit labelsLabels on the summary card.
Rent / Buy tab labelsIf you enable the Rent/Buy tab switcher.
Trust row (1–3)Short trust badges under the total (e.g. “Free cancellation”, “Insured rentals”).

Leave any field blank to use the default copy shipped with the app.

The Rental Calendar Widget also includes a Rental product buttons section.

Use it when this theme template needs to override the button defaults saved in Rentshelf → Settings.

FieldUsed for
Override app button settings for this widgetTurn on only when this widget should use different button behavior from the app Settings page.
Rental button textText shown on the theme Add to cart button for linked rental products, such as “Rent Now” or “Book Now”.
Choose dates button textText shown when valid rental dates are required before adding the product to cart.
Theme Add to cart buttonChoose whether Rentshelf renames the theme Add to cart button for linked rental products.
Dynamic checkout buttonsHide or keep dynamic checkout buttons such as Buy it now on linked rental products.
Require valid rental dates before add to cartPrevent customers from adding a rental product before choosing valid dates.

These settings only apply to products linked in Rentshelf. Non-rental products stay unchanged.

Use Calendar style to match the picker to the storefront:

StyleBest for
Classic cardsClean Shopify product pages that need clear date boxes and familiar range states.
Boutique soft rangeFashion, dress hire, beauty, event and lifestyle themes that need a softer calendar panel.
Minimal compactDense product pages where the picker should feel light and unobtrusive.
Editorial showcasePremium product pages where the calendar can take more visual presence.

The picker uses a design-system-style color palette. Every field is a hex value.

FieldRole
PrimaryMain accent — buttons, tabs, selected dates.
Background / SurfacePicker background and card surface.
BorderOutlines on inputs and cards.
Text / MutedBody text and helper text.
Selected / Range / Unavailable / TodayCalendar day states.

If you’re matching your theme, the two most important values are Primary and Background. Everything else will look correct with sensible defaults.

  • Card radius — corner rounding (0 = sharp corners, 24 = very rounded). Pick one value that matches your theme’s aesthetic.
  • Show tabs — toggle the Rent/Buy switcher.
  • Show calendar widget — toggle the inline calendar (vs text-only date inputs).
  • Show calendar legend — the key at the bottom of the calendar explaining colors.
  • Show trust row — toggle the three trust badges below the total.

Theme editor changes preview immediately. Click Save in the theme editor, then reload the storefront product page to confirm the public view.

Click Reset to defaults at the bottom of the section to restore every field to its shipped default in one click.