Rental Widget - Configuration Options
Description of each of the configuration options available on the Rental Widget theme block
Last updated
Description of each of the configuration options available on the Rental Widget theme block
Last updated
If you're looking for instructions on setting up the Rental Widget for the first time, and how to add it to your product page template, check out Add and Configure the Rental Widget
Calendar week starts on Allows you to decide if the calendar is displayed as Sunday to Saturday, or Monday to Sunday (or starting on any other day).
Calendar width The width as a percentage of the Rental Widget's container. This is normally fine at 100%, but in certain themes you may want to adjust it if the calendar is displaying as too wide.
The configuration options in the "Product Options (Variants) sub-section allow you to modify the appearance of the variant selection pills, as pictured below.
You can change the appearance of both the deselected and selected states.
This sub-section allows you to update the appearance of the calendar part of the Rental Widget.
We would have liked to have more configuration options here, but Shopify limits the total number of configuration options allowed on a theme block to 25, all of which are already being used by the Rental Widget.
Date text color The text color for a regular, available date. I.e. a date that can be selected by the customer.
Unavailable date box color The background color of a date box that is an unavailable date
Unavailable date text color The color of the text within a date box that is an unavailable date
Blocked date box color The background color of a date box that is a blocked date
Blocked date text color The color of the text within a date box that is a blocked date
For a detailed explanation of Unavailable dates and Blocked dates, check out: Rental Widget - Unavailable and Blocked Dates
You can also customise the messages which appear when you hover/tap on an Unavailable or Blocked date by adding some code to your theme. Just see: Changing the Tooltip and Alert messagesTo customise the hover/tap messages for unavailable and blocked dates, see Changing the Tooltip and Alert messages
Selected date box color The background color of a date box that is part of the rental dates that the customer has selected. The text color for this box is automatically set as black if you choose a light box color, and as white if you choose a dark box color.
Hover date box color The background color of a date box that is part of the rental dates that the customer is hovering on (desktop only). The text color for this box is automatically set as black if you choose a light box color, and as white if you choose a dark box color.
This sub-section allows you to update the appearance of the Add To Cart button in the Rental Widget.
Buttons box color The fill color of the Add To Cart button.
Buttons text color The color of the text label on the Add To Cart button.
Price Label Shown just above the Add To Card button, after a customer has selected variant options.
Add To Cart button text The text label that appears on the add to cart button. E.g. "Rent Now".
Text above calendar - Post A text block to include above the calendar within the Rental Widget, when the customer has selected the "Post" option as their Delivery Method. You may be using a different name to "Post" (set in the Rental Settings), but the Rental Widget will still name this configuration option as Post.
Text below calendar - Post A text block to include above the calendar within the Rental Widget, when the customer has selected the "Post" option as their Delivery Method.
Text above calendar - Pickup A text block to include above the calendar within the Rental Widget, when the customer has selected the "Customer Pickup/Dropoff" option as their Delivery Method.
Text below calendar - Pickup A text block to include above the calendar within the Rental Widget, when the customer has selected the "Customer Pickup/Dropoff" option as their Delivery Method.
Text above calendar - Local A text block to include above the calendar within the Rental Widget, when the customer has selected the "Local Delivery" option as their Delivery Method.
Text below calendar - Local A text block to include above the calendar within the Rental Widget, when the customer has selected the "Local Delivery" option as their Delivery Method.
Custom CSS
A field where you can write custom CSS that will be embedded on pages that have the Rental Widget. This can be used to customize the Rental Widget appearance above and beyond what can be done with the configuration options above.
Please ensure you are experienced with CSS when using this field. Product Rentals Pro doesn't validate the CSS you enter, so it's possible you can cause breaks or errors on the page if you provide invalid CSS syntax.
See the page below for more detailed instructions and examples for customizing the Rental Widget appearance with CSS.
Rental Widget - Custom Styling