Settings
Controls the basic layout and positioning of the search box.
- Title
- Title alignment
- Search box alignment
- Width
- Padding
- Display style
- Open search results in a new window
Customize a Search Box
After choosing a search box style, you can customize the layout, appearance, and search options from the page editor.
Customization Areas
Search box customization is organized into three main areas.
Appearance
Controls how the search box looks on your website.
- Corner radius
- Font family
- Font colors
- Background color
- Border color
- Box shadow
- Header color
- Icon colors
Search Options
Controls which search fields are shown to visitors.
- Travel type
- Destination
- Departure date
- Travel length
- Price range
- Departure port
- Cruise line
- Ship name
How to Edit a Search Box
Follow these steps to update a search box from the page editor.
1
Open the Page Editor
From the admin area, open the page that contains the search box you want to edit.
2
Select the Advanced Search Section
Find the Advanced Search section on the page.
Select Edit on that section to open the search box settings.
3
Customize the Search Box
Use the Settings, Appearance, and Search Options sections to customize the search box. As you make changes, the preview updates automatically.
Common Customizations
Use this table to quickly find the setting you need based on what you want to change.
Goal
Setting to Change
Match your website colors
Appearance → Background Color, Header Color, Border Color
Make the search box smaller
Settings → Width or Padding
Use a compact layout
Settings → Display Style → Condensed
Show fewer search fields
Search Options → Selected Search Fields
Open search results outside the embedded area
Settings → Open Search Results in a New Window
Make the box feel softer or more modern
Appearance → Corner Radius and Box Shadow
Visual Examples
These examples show how common design settings affect the search box.
Padding
Padding adds space inside the search box around the fields.
Compact padding
More padding
Corner Radius
Corner radius controls how rounded or square the corners appear.
Square corners
Rounded corners
Box Shadow
Box shadow helps the search box stand out from the page background.
No shadow
With shadow
Common Settings Explained
Some customization settings use design terms. These descriptions explain what each setting changes.
Setting
What it changes
Example
Title
The heading text displayed above or inside the search box.
“Find Your Next Vacation”
Title Alignment
Controls whether the title is aligned left, centered, or right.
Centered title above the form
Width
Controls how wide the search box appears.
Full width or narrow centered box
Padding
Adds space inside the search box around the fields and content.
More padding creates a more open layout
Display Style
Changes the overall layout of the search box.
Default, Condensed, or Card
Open Search Results in a New Window
Opens the search results page in a new browser window or tab instead of loading the results inside the embedded area on your site.
Recommended when the search box is placed in a smaller column or when the search area should not expand down the page
Corner Radius
Controls how rounded or square the corners appear.
0px is square; higher values are more rounded
Background Color
Changes the main background color of the search box.
White, light gray, or a brand color
Border Color
Changes the outline color around the search box or fields.
Light gray border around the form
Box Shadow
Adds a shadow around the search box.
Helps the search box stand out from the page
Header Color
Changes the background color of the search box header area.
Dark blue header above the fields
Search Options
Controls which fields appear in the search box.
Destination, Departure Date, Cruise Line