The Highlights banner section introduces your customers to offered services, hours of operation, and other brief details about your store. This section is fixed to the second home page position (or first if Slideshow disabled) for versions before 5.8.0. For recent versions (v5.8.0+), this is a dynamic section.
Use the theme editor to customize the section's appearance and add the content blocks.
Add Highlights banner to your home page (v5.8.0+)
- In the theme editor (Customize), click [+] Add section
- Locate Highlights banner
- Click the section, then Add
- Save
Customize the section's appearance
Assign specific colors to the highlights block elements by clicking the rounded-rectangle swatch beside Text color, Icon color, and Background color.
Add the content blocks
Include up to 4 Highlights banner blocks, each with its own Icon or Image, Heading, Text, and Link.
Select a preset block or [+] Add highlight to get started.
Choose an Icon using the provided dropdown. To use an Image instead, click Select image.
Full icon list
Empire includes the following icons for the Highlights banner home page section
- Award trophy*
- Car*
- Cell phone
- Chat
- Chat alternate
- Credit card
- Delivery
- Delivery cart*
- Delivery door*
- Delivery package*
- Delivery hand-off*
- Discount*
- Envelope
- Gift card
- Heart
- Information*
- Label tag
- Lock
- Number 14*
- Number 24*
- Number 30*
- People
- Pin
- Question mark
- Rating star*
- Rating five-star*
- Smile
- Store
- Tape measure*
- Thumbs up*
- Transfer
* Added in v5.9.0
Images resized or cropped to 50 x 50px are ideal for the Image option.
Include a Heading, Text, and Link using the labeled fields.
Adjust spacing and alignment
Use the Section width dropdown to select either Full width or Content width.
Enable Show section spacing to increase the separation between this section and the others.
Select either Left or Center from the Icon layout dropdown.
Select a layout for mobile devices
If you're using the latest version of Empire, use the Layout dropdown under MOBILE to control how the blocks are organized for smaller, mobile devices.
The options are:
- Grid
- Slideshow
Slideshow reflects the desktop layout and customers can view the overflow content by swiping sideways.
Grid stacks the blocks to fit within the narrow width of the mobile device.
