Shop pages

Every Experience and Accommodation product has a standalone Shop page, available at:

https://site.com/shop/product-slug

The Shop page provides a complete booking flow, including:

• Viewing key product information.
• Selecting variants, extras, and modifiers.
• Adding items to the cart.
• Updating quantities.
• Removing items from the cart.
• Reviewing the booking before checkout.

The page also displays core product details such as the product name, country, dates, tagline, and hero image.

Customising the Shop page

The Shop page shares your theme's styling.

Creator-defined Site Styles, including brand colours, are applied automatically to supported elements.

Additional styling can be added through your theme's index.css.

To scope styles to the Shop page, use the .cart-shop selector.

.cart-shop .my-component {
  /* Custom styles */
}

Limitations

The Shop page cannot be customised beyond CSS.

You cannot:

• Modify the page's HTML.
• Add custom JavaScript.
• Change the booking flow or page structure.

Developer considerations

When styling the Shop page:

• Scope custom styles using .cart-shop.
• Test styling changes across a range of product configurations, including variants, extras, modifiers, deposits, and payment plans.
• Remember that global styles from index.css are also applied to the Shop page.

For new themes, we recommend building booking experiences with Easol's booking blocks rather than relying on the standalone Shop page.