Genie Product Page

A guide to using and adding information about your experience using the product page template from the genie theme.

Hero Section

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:

  1. Product Name

  2. Product Tagline

  3. 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.

  4. Country Location: This will pull automatically from the country you select from the Location field in the product edit page.

  5. ‘Book Now’ - Call to Action button: this will automatically link through to your experience booking page where customers will select and purchase their variants.

  6. 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.

  7. 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

  8. 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.

Overview Section

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:

  1. Overview Image: Overview image displays on the left hand side along the Overview text. Recommended Image Size 645 px x 645 px

  2. Overview Text: The recommended word count for the Overview text 100 words to optimise for the theme’s image size and mobile display.

Highlights Section

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:

  1. Highlight Block Heading

  2. Highlight Copy: This will be displayed underneath the hero image.

  3. Highlight Image: Recommended image size 400px x 400px.

You can read more about uploading Highlights here.

Host Section

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:

  1. Host Image: Display an image of your host. Recommended Image Size 400px x 400px.

  2. Host Name

  3. Host Description

  4. 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.

Schedule Section

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:

  1. Schedule element Heading: This is the title for each schedule element eg. ‘Day 1/Arrival Day/9:00AM

  2. Schedule element Overview: This is where you describe what will happen on each given schedule element

  3. Schedule element Image: You can add an image to each schedule element. Recommended Image Size 645px x 645px

  4. What’s Included: You can tell customers what is included on each Schedule element eg. Arrival Transfers/Breakfast

  5. 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.

What’s Included

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:

  1. 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.

  2. 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.

Variant Display Section

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:

  1. Variant Name

  2. Variant Image: Recommended Image Size 555px x 370px

  3. Variant Tagline

  4. 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.

  5. Book Now CTA

  6. 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:

  1. View Gallery: Gives customers the chance to view all the pictures in your gallery in a clickable pop out.

  2. 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.

Location Section

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:

  1. Venue Heading

  2. Venue Tagline

  3. Venue Copy

  4. Venue Image: Recommended image size 1145px x 670px

You can read more about setting up your Venue section here.

Trip Tips Section

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:

  1. Trip Tip Heading

  2. Trip Tip Image: Recommended image size 415px x 315px

  3. Trip Tip Body

You can read more about setting up Trip Tips here.

Reviews Section

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:

  1. 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)

  2. Review Text: This is where you enter the copy of the actual review/testimonial.

  3. Review Image: This will be the image you enter in the ‘Image’ box on the Product edit page. Recommended Image Size 400px x 400px

Add Ons Section

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:

  1. The Extra Name

  2. The Extra Tagline

  3. 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.

  4. 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.

Accommodation Section

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:

  1. The Accommodation Name

  2. The Accommodation Description

  3. The Accommodation Image: Recommended image size 555px x 370px

You can read more about setting up Accommodations here.

FAQ Section

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:

  1. Question

  2. 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.

Dates Section

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:

  1. Experience date, duration and location.

  2. Promotion amount (only if set up and applied to that experience date)

  3. Available inventory (only if stock levels are set on that experience date)

  4. Deposit Amount (only if deposits are turned on for that experience date)

  5. 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.

  6. 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.

Booking Bar Section

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 on genie

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)

Section Headers

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:

  1. 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.

Adding your styles to genie

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.

  1. Primary Colour

  1. Secondary Colour

  1. Site Background Colour

Note: Genie’s background colour is set to white and cannot be edited

  1. 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.

  1. Headings Font Family

  1. 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.