Hero
Use this block to add large rotating banners with linked products.
There are also other blocks which can be used to add images:
- Image (simple images)
- Carousel (small images on a swipeable carousel)
- Parallax (an image that sits behind content, adding depth to a page)
- Feature (a styled image)
- Multi-Feature (multiple static images in a single block)
- Wide Feature (image with a block of text)
Appearance
Editing the Block
Each image has an expandable menu, allowing it to be edited individually.
Images may be dragged around to resequence them.
Content
| Field | Purpose |
| Title | Enter a short title - this will be output as a text overlay, on top of the image |
| Link URL | Enter a link URL - if populated, this will add a link to the image. |
| Link Text |
Text to be shown with a button, if a link is set
If left blank, the whole image will act as a button |
| Additional Text | Enter some short text - this will be output as a text overlay, on top of the image below the title |
| Related Products |
Search for Products by name or SKU Code to link them to this hero image
They will display below the image
If you have multiple images in a Hero Block, the Products will change along with the image |
| Delete This Image? | Use this control to delete an image |
Use the Image dialogue to select images to upload to this block.
Settings
| Field | Purpose |
| Block Width |
Choose from:
|
| Visibility |
Set the block visibility from the list:
|
| Text Colour |
Choose from:
|
| Text Position |
Alter the alignment of the block text:
|
Additional Options
These options allow you to auto assign Products to Hero Images, without assigning specific Products.
| Field | Purpose |
| Include featured products | Auto add featured products to the images in this Hero block |
| Include recommended products | Auto add recommended products to the images in this Hero block |
| Include sale products | Auto add sale products to the images in this Hero block |
Advanced
Padding
Adding padding will insert space within the current block; this will adjust the position of content within the block.
More information is available here.
Margin
The margin will add additional space around the current block.
More information is available here.