Using a booking app

Rentline does not include a booking calendar, live availability, deposits, or late fees. Those features need a server, so they come from apps. Rentline works with any booking app from the Shopify App Store that supports Online Store 2.0 app blocks.

Rentline does not recommend a specific app. Our support covers the theme. Questions about an app’s calendar, availability, or pricing go to the app developer. See the Support policy.

Add the app block to the product page

1. Install the booking app from the Shopify App Store.
2. Follow the app’s setup steps.
3. In the theme editor, open Products > Default product.
4. In the Rental product section, click Add block.
5. Under Apps, select the app’s block.
6. Drag the block to where you want it, for example below the price.
7. Click Save.

The Featured product section also accepts app blocks.

Hide the period picker

Many booking apps let customers pick dates, and the app chooses the price. Then the Rentline period picker is not needed.

1. Select the Rental period picker block.
2. Set Rental period style to Hidden.
3. Click Save.

When the picker is hidden, the product form keeps the first available rental period selected. If your app does not choose the variant, keep the period picker visible.

Also look at these blocks:

Block	Keep or remove?
Requested dates	Remove it when the app shows a calendar. Two date fields confuse customers.
Rate table	Keep it if the app uses your variant prices. Remove it if the app has its own prices.
Rental cost estimator	Remove it if the app calculates prices in a different way.
Quote request	Keep it. Customers can still ask about long rentals or delivery.

Quick view does not show app blocks. Keep Theme settings > Rental > Card button on rental products set to Open product page (the default), so that customers always see the app’s calendar before they add a rental to the cart. Accelerated checkout buttons such as Shop Pay also go to checkout before the app collects its data. Ask the app developer how the app handles these orders.

What shows in the cart

Booking apps often save dates and other details as line item properties. The cart drawer and the cart page show every property on the line, for example “Start date: Mon, Oct 26”.

Properties with a name that starts with an underscore (_) are hidden. This is a Shopify convention for internal data. Properties with an empty value are also hidden.

Test the app

1. Open a product page in your online store, not only in the theme editor.
2. Pick dates in the app and add the product to the cart.
3. Check that the cart drawer or cart page shows the correct price and dates.
4. Go to checkout and check the price again.
5. Change the rental period or the dates and do the test again.

If the cart drawer does not update after the app adds a product, contact the app developer. Give them the information below.

For app developers

Rentline gives booking apps standard integration points. Nothing in the theme is specific to one app.

Mount points

• The main product section (sections/product.liquid) accepts @app blocks with no limit.
• The featured product section (sections/featured-product.liquid) accepts @app blocks.

Product form

• The product form is a standard <form action="/cart/add"> with name="id".
• properties[...] inputs inside the form, or linked to it with the form attribute, are submitted unchanged.
• The price element has the stable attribute data-product-price.

Event: variant:change

The theme dispatches this event on document when the customer selects a different variant on the product page.

document.addEventListener('variant:change', (event) => {
  const { variant, sectionId } = event.detail;
  // variant: the selected variant object
  // sectionId: the ID of the product section that changed
});

Event: cart:refresh

After your app changes the cart (for example with /cart/add.js), dispatch this event. The theme then renders the cart drawer, the cart page, and the header cart count again.

await fetch('/cart/add.js', { method: 'POST', body: formData });
document.dispatchEvent(new CustomEvent('cart:refresh'));

Line item properties

The cart drawer and the cart page show all line item properties, except keys that start with _ and properties with an empty value. Values are shown as the app saves them. Only the two Requested dates properties (names in Theme settings > Rental) are formatted as dates.