Skip to main content

CMS Editor Block Library: Products

Display products, product categories, and destinations using flexible layouts, with content sourced directly from your dashboard configuration.

Product Categories

Add a grid of categories that link to filtered product lists.

Product Categories

  1. Drag the Product Categories block into the desired position on the page.

  2. In the Page Settings panel, add a title and a subtitle.

    Product Categories

  3. Toggle 'Hide categories without image' on to show only categories with images.

    Hide categories without image

  4. Choose whether to add categories automatically or manually.


    Automatic

  5. Toggle 'Featured Categories Only' on to display categories flagged as Featured in Products > Categories.

  6. Keep the destination field unselected to display global categories, or select a specific destination to display only categories associated with the destination.

  7. Choose the number of categories to display.

  8. If there are more categories than the selected number, toggle 'Show Load More Button' on to display a button that loads the remaining categories.

    Category Selection - Automatic


    Manual selection

  9. Manually select which categories to display.

    Category Selection - Manual selection


  10. Toggle 'Content Background' on to add a background colour or image.

  11. Toggle 'Card style' on to display the background within a rounded card instead of a full-width section.

    Content Background

  12. Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.

    Spacing


Destinations

Add a grid of destinations configured in your account settings.

Destinations

  1. Drag any Destination block into the desired position on the page.

  2. In the Page Settings panel, add a title and description.

    Title & Description

  3. Toggle 'Enable Continents Switcher' on to display continents with destinations configured in your account and allow customers to browse destinations by continent.

    Enable Continents Switcher

  4. Choose a layout:

    Layout


    • Large


    • Small


    • Strip


  5. Toggle 'Content Background' on to add a background colour or image.

  6. Toggle 'Card style' on to display the background within a rounded card instead of a full-width section.

    Content Background

  7. Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.

    Spacing


Product Highlight

Choose a product to highlight it on your website.

📒 NOTE

This block uses products created in the dashboard.

Product Highlight

  1. Drag the Product Highlight block into the desired position on the page.

  2. In the Page Settings panel, add a title.

    Title

  3. Select a product from the list of configured product in your account.

    Product

  4. Toggle 'Switch Layout' on to swap the positions of the text and product image.

    Switch Layout

  5. Keep the product title and description as configured in your account or enter a new ones.

    Product Title & Description


    📒 NOTE

    The product title and description is entered in the General Settings section of the product detail.


  6. Keep the product image as configured in your account or change by either entering a URL or uploading a new image.

    Product Image


    📒 NOTE

    The product image uploaded in Products > Branding in the Ventrata dashboard is displayed by default.


  7. Enter the CTA text for the primary and secondary buttons. Keep the default text or leave either field blank to hide the corresponding button.

    Primary & Secondary CTA text

  8. Choose a background colour for the highlight.

    Background Colour

  9. Toggle 'Disable Hover Effect' on to disable the default behaviour — the product highlight expands on hover.

    Hover Effect

  10. Toggle 'Content Background' on to add a background colour or image.

  11. Toggle 'Card style' on to display the background within a rounded card instead of a full-width section.

    Content Background

  12. Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.

    Spacing


Product Grid

Add a grid of select products.

Product Grid

  1. Drag the Product Grid block into the desired position on the page.

  2. In the Page Settings panel, add a title and a subtitle.

    Product Categories

  3. Toggle 'Hide categories without image' on to show only categories with images.

    Hide categories without image

  4. Choose whether to add products automatically or manually.


    Automatic

  5. Toggle 'Featured Products Only' on to display categories flagged as Featured in Products > Products.

  6. Keep the destination field unselected to display most popular products, or select a specific destination to display only products associated with the destination.

  7. Keep the category field unselected or select a specific category to display only products belonging to the category.

  8. Choose the number of products to display.

  9. If there are more products than the selected number, toggle 'Show Load More Button' on to display a button that loads the remaining products.

    Product Selection - Automatic


    Manual selection

  10. Manually select which products to display.

    Product Selection - Manual selection


  11. Toggle 'Show Product Duration' on to display duration labels for the product and its options.

    Show Product duration

  12. Toggle 'Content Background' on to add a background colour or image.

  13. Toggle 'Card style' on to display the background within a rounded card instead of a full-width section.

    Content Background

  14. Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.

    Spacing


Search Bar

Search the content available on your site — products, destination or articles.

Search Bar

  1. Drag the Search Bar block into the desired position on the page.

  2. In the Page Settings panel, add a title.

    Title

  3. Toggle 'Content Background' on to add a background colour or image.

  4. Toggle 'Card style' on to display the background within a rounded card instead of a full-width section.

    Content Background

  5. Choose top and bottom spacing between the element and surrounding elements on mobile or desktop. Select spacing from presets (S, M, L, XL) or use custom settings.

    Spacing

Did this answer your question?