Genie Product Page
Your Hero section gives the first snapshot of your product including name, tagline, date, location, any promotions and a call to action to book your experience.
The Hero section will also include a secondary navigation bar. The navigation bar headings are set to the genie theme section titles and will be populated automatically based on the sections you add to your product page. The links to each section will automatically be adopted from the sections on the page.
The Hero section includes the following sections:
Product Name
Product Tagline
Product dates: The product page will automatically display your start and finish dates based on the ‘Depart On’ and ‘Duration’ you select on the product edit page.
Country Location: This will pull automatically from the country you select from the Location field in the product edit page.
‘Book Now’ - Call to Action button: this will automatically link through to your experience booking page where customers will select and purchase their variants.
Promotion: Any promotions you have set up and applied to the product will appear here. You can read more about how to set up promotions here.
Hero Image: Your hero image will be displayed as a full width background image. Use your best image here! Recommended image size 1440px x 450px
Secondary Nav Bar: This bar isn’t editable and will be populated automatically based on the sections you add to your product page. When a user clicks on the nav item it will jump down to the relevant section on the page.
You can read more about setting up your Hero section here along with our image guidelines here.
Describe your product in more detail. Include all key moments and activities whilst creating sound bytes that will make people want to find out more and book your experience.
The Overview section includes the following:
Overview Image: Overview image displays on the left hand side along the Overview text. Recommended Image Size 645 px x 645 px
Overview Text: The recommended word count for the Overview text 100 words to optimise for the theme’s image size and mobile display.
The Highlights section is designed to let you hero the unique selling points of your experience with images and copy. We advise a minimum of 3 highlight blocks if you are using this section on the product page to optimise display. If you add more than three images here a left to right scroll will appear for users to toggle through.
The Highlights section includes the following:
Highlight Block Heading
Highlight Copy: This will be displayed underneath the hero image.
Highlight Image: Recommended image size 400px x 400px.
You can read more about uploading Highlights here.
The Host section allows you to create more familiarity and let your customers know who will be running your experience.
You can have multiple hosts for a single product and people will be able to click left or right using the arrows to learn more about each host.
The Host section includes the following:
Host Image: Display an image of your host. Recommended Image Size 400px x 400px.
Host Name
Host Description
Host Instagram: Will link out to the host’s instagram profile if entered - if not entered this will not display.
The top to bottom order of your hosts in the product edit page will relate to the order they appear in left to right on the product page.
You can read more about uploading Hosts here.
The schedule section allows you to display what activities/events will be happening either day by day or by time.
The schedule section includes the following:
Schedule element Heading: This is the title for each schedule element eg. ‘Day 1/Arrival Day/9:00AM
Schedule element Overview: This is where you describe what will happen on each given schedule element
Schedule element Image: You can add an image to each schedule element. Recommended Image Size 645px x 645px
What’s Included: You can tell customers what is included on each Schedule element eg. Arrival Transfers/Breakfast
What’s Not Included: You can tell customer what is not included on each schedule element if you need to make this explicitly clear eg. for optional activities which the customer has to pay for themselves when there
The top to bottom hierarchy of the schedule section will determine the left to right order of the way it appears on the product page.
You can read more about uploading a Schedule here.
The What’s Included section allows you to display everything which is part of the main experience price and is one of the primary ways to highlight the value of your trip. Equally you can expressly show what is ‘Not Included’ in this section to ensure that customer’s know this won’t be part of the price, will need to be bought as an Add-On or will need to be arranged themselves.
The Schedule section includes the following:
What’s Included: Each element you enter in the product edit page will be displayed as their own text element with a tick icon next to it for visual confirmation.
What’s Not Included: Each element you enter in the product edit page will be displayed as their own text element with a cross icon next to it for visual confirmation. The ‘Not Included’ section will be slightly greyed out to ensure differentiating from the ‘What’s Included’ section.
You can read more about setting up your What’s Included and What’s Not Included section here.
If you have set up your product as an ‘Experience’ which ‘Includes Accommodation’’ this is where your Variants will be displayed. Your variants are the main item your customer’s will be booking and will be displayed as either ‘Private’ or ‘Shared Accommodation’ depending on how you are selling your product.
This section will also contain another call to action to book which will take the user through to your booking page.
The Variant display section includes the following:
Variant Name
Variant Image: Recommended Image Size 555px x 370px
Variant Tagline
Variant Price: This will display the cheapest per person price and will be displayed as a ‘From’ price in case the unit price differs based on occupancy. If you have a promotion set up and applied to the variant it will also display here.
Book Now CTA
Deposit Amount: If you have deposit payments enabled the initial deposit price will be displayed here to help merchandise the price.
You can read more about setting up your product Variants here.
The gallery allows you to display up to x10 images to give your customers a better visual understanding of the experience.
The gallery section includes:
View Gallery: Gives customers the chance to view all the pictures in your gallery in a clickable pop out.
Gallery images: Your first four gallery images will be displayed on the product page directly. They will be ordered according to first four images added to your product. The theme will resize your images to work within the gallery grid however, please follow the image sizing guidelines to ensure a fast loading page. Large images will slow down your page loading time.
You can read more about setting up your gallery section here.
The location section will pull through from your ‘Venue’ block on the Product Edit page (see below)
This allows you to enter more information about the venue/place your guests will be staying/visiting whilst on the experience.
The location section includes:
Venue Heading
Venue Tagline
Venue Copy
Venue Image: Recommended image size 1145px x 670px
You can read more about setting up your Venue section here.
The Trip Tips sections offer you the chance to communicate a wide variety of extra information that your customers may need to know about the experience whilst also offering a view on some of the unique aspects of the experience.
The Trip Tips will display in the order you save them in the product edit page and the image and copy will alternate from the left and right side.
The Trip Tips section includes:
Trip Tip Heading
Trip Tip Image: Recommended image size 415px x 315px
Trip Tip Body
You can read more about setting up Trip Tips here.
The reviews section allows you to add in customer reviews/testimonials in order to increase confidence in your company and experience and to celebrate your past experiences.
Reviews will be displayed with a clickable left to right scroll if you enter multiple reviews and will appear in the same order you enter them top to bottom on the product edit page.
The Reviews Section includes:
The Customer Name: This is what you will enter in the ‘Source’ heading when adding a Review in the product edit page. This is the name of the person who gave the review/testimonial. (If you have also entered a ‘Source Link’ URL on the product edit page the hyperlink will be attached to the customer name)
Review Text: This is where you enter the copy of the actual review/testimonial.
Review Image: This will be the image you enter in the ‘Image’ box on the Product edit page. Recommended Image Size 400px x 400px
The Add Ons section allows you to visually and individually display and make easy to book any Extras that you have on sale for your product. Extras can be configured on the Product Edit page on the section below.
Add ons will be displayed in the order left to right that you create them in from top to bottom on the product edit page.
If you have 3 or more Extras they will be displayed as below.
The Add Ons section includes:
The Extra Name
The Extra Tagline
The Extra Price: This section will automatically pull through the price of the extra along with a Call to Action to book which will take the customer through to your booking page. If you’re extra is marked as ‘Sold Out’ this will display on the CTA and the link to the cart shop will be disabled.
The Extra Image: These can be added per Extra. Recommended Image Size 400px x 400px
If you have just 2 Extras they will be displayed as below.
Note: If you have just 2 Extras the recommended image size is 645px x 400px
If you have just 1 Extra it will display as below.
Note: If you have just 1 Extra the recommended image size is 645px x 400px
You can read more about setting up Extras here.
Use accommodations to show guests where they will be staying during an experience. Room booking information should be entered as variants.
If you add multiple accommodations these will display vertically down the page with the accommodation image and text alternating between the left and right hand side of the page.
The Accommodation section includes:
The Accommodation Name
The Accommodation Description
The Accommodation Image: Recommended image size 555px x 370px
You can read more about setting up Accommodations here.
Create considered and well written FAQs to help customers understand your product, book with ease and increase sales conversion and reduce your customer support.
The FAQs will display vertically based on the order you add them in to the product edit page. The questions will all be collapsed in an accordion and users will be able to click on the arrow on the right to expand this to view the answer.
The FAQ section includes:
Question
Answer Section: This will be collapsed until a user clicks on the arrow on the right hand side.
You can read more about setting up your FAQ section here.
If you are running the same experience across multiple dates you can link these together using the ‘Series’ feature on the product page. See here for more information about setting up a ‘Series’.
If you have multiple experience dates in the same series they will appear at the bottom of the product page as below so that users can view all available dates and their prices.
Depending on how you have your pricing and dates set up the Dates section includes:
Experience date, duration and location.
Promotion amount (only if set up and applied to that experience date)
Available inventory (only if stock levels are set on that experience date)
Deposit Amount (only if deposits are turned on for that experience date)
Book Now Button: This will link through to the booking page. Users will also be able to change dates on the booking page if they are in the same series.
Experience Price (If a promotion is applied to the experience date the new promotion price will also be displayed here along with the original experience price cross out)
Note: If you only have one date for your experience and it is not in a series the ‘Dates’ section will not appear.
The booking bar on your product page will be populated automatically as part of the genie theme so you don’t need to configure this on the product edit page anywhere. The booking bar will be sticky on the bottom of the page to ensure there is always a call to action to book available for the user.
Based on how you have your product set up the booking bar will contain:
Product Name, Location, Dates and duration
Promotion amount (only if set up and applied to that experience date)
Available inventory (only if stock levels are set on that experience date)
Deposit Amount (only if deposits are turned on for that experience date)
Book Now Button: This will link through to the booking page
Experience Price (If a promotion is applied to the experience date the new promotion price will also be displayed here along with the original experience price cross out)
Note: If you have multiple experience dates in the same series the ‘Book Now’ button copy will say ‘View Dates’ instead and when clicked will kick the user down to the dates section where they can then choose the date they would like to book.
Promotions are visible discounts which will be shown to all customers on your product page as well as the booking page.
You can read more about how to set up promotions here.
To make promotions really visible on the product page they will automatically display in the instances below on the product page if you have them set up and applied to a variant.
Hero Section
Variant Section
Booking Bar
Dates Section (Only if multiple dates set up in a Series)
Deposits
You can enable deposits on products to allow people to secure their place without paying the full amount up front. You can see below where you can enable this on the Product Edit page.
To make the deposit amount really visible on the product page they will automatically display in the instances below on the product page if you have them set up and applied to a product.
The product page will automatically display the deposit amount that the user has to pay and display that as a monetary amount based on the deposit percentage you select.
Variant Section
Booking Bar
Dates Section (Only if multiple dates set up in a Series)
The section headers included in the Genie theme's product page are Overview, Highlights, Dates. If you would like to request a change of the section headers please raise a request using the Help Centre on your dashboard by going to Support > Help Centre.
Your brand information is required to complete your page and ensure your booking page is connected to your product pages and website.
You can add your brand details in from your dashboard by going to Settings > Your Brand.
From this page go to ‘Your Art’ to enter:
Cover Photo
Graphic Logo
Wordmark Logo
On your product page your logo will then display in the instances below with the Genie theme:
Top left on your top nav
2. Your logos will then also display on your Booking page in the instances below
3. Your circular logo will display as below above your product name and tagline.
Favicon
Your favicon logo is what will appear in the search bar in the tab alongside the URL browser on your product page.
You can upload and edit your favicon through your dashboard by going to My Site > Advanced.
You can add and edit your product page style directly from the dashboard. Just go to My Site > Style.
Here you can change the colours and fonts which will display on your product page.
Below you can see examples of where the style edits would appear on your product page.
Primary Colour
Secondary Colour
Site Background Colour
Note: Genie’s background colour is set to white and cannot be edited
Site text colour
Note: Genie is fixed to just allow for a singular text colour throughout the page and this is fixed as black throughout. Subtitles and Header colours can be changed by editing the primary colour in your site styles.
Headings Font Family
Body Font Family
Fonts
Genie will automatically populate with default Headings and Body fonts. However you can add in your own fonts by going to My Site > Style from your dashboard.
From the page below click the ‘Add Font’ button and then add in your font file and confirm you have copyright permission.
Once you have saved your fonts in you will be able to select these from the dropdown on the font family selectors from the Style page.
