Alchemist Search Experiences Blocks
If you have a large collection of experiences, these blocks can help make it quick and easy for customers to search and filter upcoming experiences.
Jump to block:
Search Page
The Search Page block features a filter functionality that allows customers to search through your collection of upcoming experiences. When a customer lands on the page, all upcoming experiences are shown. The block displays each experience in its own “card” and will automatically pull through its details, including pricing, title, description, and image.
Before using this block, make sure you have created experiences and have published them.
Content Fields
| Header | Add a catchy title for the block. |
| Text | Use the text editor to add a description under the header. |
| Display button |
Tick the checkbox to display a call to action button. |
| Display experience dates |
Tick this checkbox to display the dates in each experience card. This is pulled automatically from the Depart on settings of your experiences. |
| Display experience city |
Tick this checkbox to display the city in each experience card. This is pulled automatically from the Location settings (Town/City) of your experiences. |
| Display experience country |
Tick this checkbox to display the country in each experience card. This is pulled automatically from the Location settings (Country) of your experiences. |
| Display experience duration |
Tick this checkbox to display the duration in each experience card. This is pulled automatically from the Duration settings of your experiences. |
| Customise 'enquire' button text |
If you have enquiry only payment settings enabled for your experiences, you can customise the default “Enquire” button label here. |
| Search button text |
Customise the label on the search button. By default, it's set to "Search". |
| Enable search by active promotions |
Tick this checkbox to allow customers to filter your experiences by promotions. |
| Enable search by experience category |
Tick this checkbox to allow customers to filter your experiences by category. This is connected to the Category in the Overview settings of your experiences. |
| Enable search by experience subcategory |
Tick this checkbox to allow customers to filter your experiences by subcategory. This is connected to the Subcategory in the Overview settings of your experiences. |
| Enable search by experience country |
Tick this checkbox to allow customers to filter your experiences by country. This is connected to the Location settings of your experiences. |
| Enable search by experience departure month |
Tick this checkbox to allow customers to filter your experiences by month. This is connected to the Depart On settings of your experiences. |
| Enable search by experience departure year |
Tick this checkbox to allow customers to filter your experiences by year. This is connected to the Depart On settings of your experiences. |
| Enable search by experience duration |
Tick this checkbox to allow customers to filter your experiences by duration. This is connected to the Duration settings of your experiences. |
| Hide search navigation bar |
Tick this checkbox to remove the navigation bar from the search page block. Not recommended if you have over 12 experiences. |
Layout Fields
| Number of experiences per row | Toggle the slider to adjust the number of experiences to be displayed per row. There's a minimum of one and a maximum of three experiences per row. |
| Align cards to the centre | Tick this checkbox to align experience cards to the centre if there is empty space in the row. For example, if you have selected Three experiences per row and only have two experience cards in a row, this will position the two cards in the centre. |
| Align text to the centre | Tick this checkbox to align the heading and search filter buttons to the centre. By default, it's aligned to the left. |
Design Fields
| Background image | Upload an image to override the search page hero section's background colour with a background image. For the best results, upload an image with a minimum width of 1920px. |
| Remove background image overlay | Tick the checkbox to remove the default dark overlay that is applied on the background image. |
| Background colour | By default the search page hero section's background colour is set to your site background colour (learn how to change site-wide colours here). Add a HEX code to change the block's background colour. |
| Text colour | Add a HEX code to change the colour of the header, text and call to action button in the block. By default, it is set to your site text colour. |
| Button colour |
Add a HEX code to change the background colour of the search button. By default, it is set to your primary colour. |
| Button text colour | Add a HEX code to change the text colour of the search button. By default, it is set to white (#FFFFFF). |
| Search dropdown background colour | Add a HEX code to change the background colour of the filter dropdown buttons. By default, it is set to white (#FFFFFF). |
| Search ropdown text colour | Add a HEX code to change the text colour of the filter dropdown buttons. By default, it is set to black (#000000). |
| Search navigation bar background colour | The search bar is positioned between the filter buttons and experience cards. It displays the total number of experiences being shown on the page as well as a button for customers to reset the filter. Add a HEX code to change the background colour of the bar. By default, it is set to your secondary colour. |
| Search navigation bar text colour | Add a HEX code to change the text colour of the bar. By default, it is set to your site text colour. |
| Search results background image | Add a background image to be displayed behind the experience cards. This will override the results background colour. |
| Search results background colour | Add a HEX code to change the background colour of the results section displaying the experience cards. By default, it is set to your site background colour. |
| Experience card background image | Add a background image to be displayed on the text portion of the experience cards. This will override the card background colour. |
| Experience card background colour |
Add a HEX code to change the background colour of the text portion of the experience cards. By default it is set to your secondary colour. |
| Experience card text colour | Add a HEX code to change the colour of the text in the experience cards. By default it is set to your site text colour. |
| Experience card button colour |
Add a HEX code to change the colour of the call to action button in the experience cards. By default it is set to your primary colour. |
Search Hero
The Search Hero allows customers to filter and search your catalogue of experiences anywhere on your website. Unlike the Search Page block, the Search Hero doesn’t display all upcoming experiences and results from the search query in the block. Instead, it redirects the customer to a page containing the Search Page block to display the search results.
This means that you must have a page on your website containing the Search Page block for the Search Hero to function properly.
Block Fields |
|
| Background image | Upload an image to override block's background colour with a background image. For the best results, upload an image with a minimum width of 1920px. |
| Remove background image overlay | Tick the checkbox to remove the default dark overlay that is applied on the background image. |
| Center text | By default, all text and buttons are aligned to the bottom left of the block. Tick the checkbox to position all elements in the center instead. |
| Full screen height | Tick this checkbox to have the background image take up the full height of your screen. |
| Background colour | By default the block's background colour is set to your site background colour (learn how to change site-wide colours here). Add a HEX code to change the block's background colour. |
| Text colour | Add a HEX code to change the colour of the header and text in the block. By default, it is set to white (#FFFFFF). |
| Button colour |
Add a HEX code to change the background colour of the search button. By default, it is set to your primary colour. |
| Button text colour | Add a HEX code to change the text colour of the search button. By default, it is set to white (#FFFFFF). |
| Dropdown background colour | Add a HEX code to change the background colour of the filter dropdown buttons. By default, it is set to white (#FFFFFF). |
| Dropdown text colour | Add a HEX code to change the text colour of the filter dropdown buttons. By default, it is set to black (#000000). |
| Logo | Upload a logo to be displayed above the header text. |
| Increase logo size | Tick the checkbox to increase the size of the logo in the block. |
| Header | Add a catchy title for the block. |
| Text | Add a description text under the header. |
| Search results page url | Enter the URL of the page that contains the Search Page block. |
| Button text | Customise the label on the search button. |
| Show promotion filter |
Tick this checkbox to allow customers to filter your experiences by promotions. |
| Show category filter |
Tick this checkbox to allow customers to filter your experiences by category. This is connected to the Category in the Overview settings of your experiences. |
| Show subcategory filter |
Tick this checkbox to allow customers to filter your experiences by subcategory. This is connected to the Subcategory in the Overview settings of your experiences. |
| Show country filter |
Tick this checkbox to allow customers to filter your experiences by country. This is connected to the Location settings of your experiences. |
| Show departure month filter |
Tick this checkbox to allow customers to filter your experiences by month. This is connected to the Depart On settings of your experiences. |
| Show departure year filter |
Tick this checkbox to allow customers to filter your experiences by year. This is connected to the Depart On settings of your experiences. |
| Show duration filter |
Tick this checkbox to allow customers to filter your experiences by duration. This is connected to the Duration settings of your experiences. |
| Add widget |
Tick this checkbox to display a widget in the bottom corner of the block. |
| Widget code |
Copy and paste the widget code, for example a TripAdvisor badge for your company. |
Filter Bar
Note: This is an advanced feature that will require some familiarity with HTML.
The Filter Bar allows customers to filter through sections on a page by clicking on links in the bar. If you have several Featured Experience blocks on your page for example, the Filter Bar can make navigating to each section easier and faster. While the Filter Bar can be used to filter any type of content (it doesn’t have to be experiences), it can only filter sections using the same type of block by default – please contact a developer to apply filters to different types of blocks. You can filter up to 10 sections with the Filter Bar.
Block Fields |
|
| Background image | Upload an image to override block's background colour with a background image. For the best results, upload an image with a minimum width of 1920px. |
| Background colour | By default the block's background colour is set to your secondary colour (learn how to change site-wide colours here). Add a HEX code to change the block's background colour. |
| Text colour | Add a HEX code to change the colour of the filter labels in the bar. By default, it is set to your site text colour. |
| Active link text colour |
Add a HEX code to change the colour of the filter label that is currently active. |
| Center links | Tick this checkbox to align the links in the bar to the center. By default, they are aligned to the right-side of the bar. |
| Block class to filter |
Add a common class attribute shared by all the blocks' <section> tags that will be included in the filter. Below are common classes for popular blocks:
|
| Section text (1,2,3...) | Add a label for each link in the filter bar. |
| Section block id (1,2,3...) |
For each link, add the ID of the block you’d like to filter. To locate the block ID, open your page in Google Chrome browser and go to View > Developer > Inspect elements. In the developer panel, hover your cursor over each <div class=”block custom-block”> until you see the block you’d like to filter is highlighted in the browser. Copy the string of letters and numbers inside id=”[your block id]”.
Important: Make sure to include a hash symbol "#" in front of the ID and that there are no spaces. |
Jump Bar
Note: This is an advanced feature that will require some familiarity with HTML.
Rather than filtering through sections, the Jump Bar skips to a section on the page when you click on a link in the bar. Again, this can be used to make navigating a longer page easier and faster. Unlike the Filter Bar, the sections you jump to can be using different types of blocks. You jump to up to 10 sections with the Jump Bar.
Block Fields |
|
| Background image | Upload an image to override block's background colour with a background image. For the best results, upload an image with a minimum width of 1920px. |
| Background colour | By default the block's background colour is set to your secondary colour (learn how to change site-wide colours here). Add a HEX code to change the block's background colour. |
| Text colour | Add a HEX code to change the colour of the jump bar labels in the bar. By default, it is set to your site text colour. |
| Active link text colour |
Add a HEX code to change the colour of the filter label that is currently active. |
| Center links | Tick this checkbox to align the links in the bar to the center. By default, they are aligned to the right-side of the bar. |
| Section text (1,2,3...) | Add a label for each link in the jump bar. |
| Section block id (1,2,3...) |
For each link, add the ID of the block you’d like to jump to. To locate the block ID, open your page in Google Chrome browser and go to View > Developer > Inspect elements. In the developer panel, hover your cursor over each <div class=”block custom-block”> until you see the block you’d like to jump to is highlighted in the browser. Copy the string of letters and numbers inside id=”[your block id]”.
Important: Make sure to include a hash symbol "#" in front of the ID and that there are no spaces. |
Comments
0 comments
Article is closed for comments.