TABLE OF CONTENTS
- Configure a Hero Image for Brand Pages
- Use Case 1: Configure a Hero Image for a Brand
- Use Case 2: Publish Brand Updates
- Use Case 3: Configure the Brand Details Page to Display the Hero Image
- Use Case 4: Verify the Hero Image on the Storefront
- Alternative Configuration Using Media Widgets
- Organizations that require greater marketing flexibility can manage hero images through Media Widgets.
Configure a Hero Image for Brand Pages
Overview
The Hero Image feature enables Administrators to display a prominent banner image at the top of a Brand Details page in the Storefront. This functionality helps promote brand identity, support marketing campaigns, and improve the visual experience for Buyers.
The feature leverages existing Znode capabilities, including Brand Management, Media Manager, Publishing, and Page Builder components. No additional APIs or custom infrastructure are required.
Business Use Cases
- Brand Promotion
- Display brand-specific marketing imagery on Brand Details pages.
- Campaign Management
- Promote seasonal campaigns, new product launches, or special offers using brand-specific banners.
- Enhanced Buyer Experience
- Create visually engaging Brand Details pages that reinforce brand messaging.
Prerequisites
Before configuring a hero image:
- The image asset exists in Media Manager or can be uploaded through Media Manager.
- The Brand Details page is available in Page Builder.
- Brand content can be published to the Storefront.
- Appropriate permissions are available to manage brands, media assets, and page configurations.
Use Case 1: Configure a Hero Image for a Brand
Associate an image with a brand so that it can be displayed as a hero banner on the Storefront.
Steps
- Navigate to Catalog Management > Brands in the Admin Console.
- Locate the required brand and select Edit.
- In the brand configuration page, locate the Hero Image field.
Note: Depending on the implementation, the Hero Image field may use the existing Brand Image field or a dedicated Hero Image field.
- Select Browse or Select Media to open Media Manager.
- To use an existing asset, select the desired image from Media Manager.
- To upload a new image:
- Select Upload.
- Browse to the image location.
- Select the image file.
- Complete the upload process.
- Select the desired image.
- Confirm that the selected image appears in the Hero Image field.
- Select Save.
Validation
Verify that:
- The brand record saves successfully.
- The selected image remains associated with the brand when the page refreshes.
Expected Result
The selected media asset is associated with the brand and stored as part of the brand configuration.
Use Case 2: Publish Brand Update
Publish the updated brand information so that the hero image becomes available to the Storefront.
Steps
- Navigate to the Store List in the Admin Console.
- Click on the Publish Icon for the relevant store.
- Monitor the publishing process until it completes successfully.
Validation
Verify that:
- The publish job completes successfully.
- No publishing errors are reported.
Expected Result
The published brand data includes the media information required for Storefront rendering.
Use Case 3: Configure the Brand Details Page to Display the Hero Image
Configure the Brand Details page to display the image at the top of the page.
Steps
- Open Page Builder.
- Locate the Brand Details Page configuration.
- Open the page for editing.
- Drag an Image component onto the page canvas.
- If the implementation uses a Hero component, add the Hero component instead of the Image component.
- Position the component at the top of the page layout.
- Configure the component to use the brand image data source.
- Configure the component to display the brand image path.
- Enable conditional display behavior so the component does not render when no image is associated with the brand.
- Save the page configuration.
- Publish the page changes.
Validation
Verify that:
- The image component appears in the page structure.
- The page publishes successfully.
- No page rendering errors occur.
Expected Result
The Brand Details page is configured to display the assigned hero image at the top of the page.
Use Case 4: Verify the Hero Image on the Storefront
Confirm that the image displays correctly for Buyers.
Steps
- Open the Storefront.
- Navigate to the Brands landing page.
- Select the brand configured with a hero image.
- Open the Brand Details page.
- Confirm that the hero image displays at the top of the page.
- Review the page on desktop and mobile devices.
Validation
Verify that:
- The image loads successfully.
- The image appears above brand content.
- The page layout remains intact.
- Image quality is acceptable across supported devices.
Expected Result
Buyers see the configured hero image when visiting the Brand Details page.
Alternative Configuration Using Media Widgets
Organizations that require greater marketing flexibility can manage hero images through Media Widgets.
Steps
- Navigate to CMS > Widgets.
- Create a new Media Widget or edit an existing Media Widget.
- Select the desired promotional image.
- Save the widget configuration.
- Associate the Media Widget with the Brand Details page.
- Publish the widget configuration.
- Publish the associated page changes.
Validation
Verify that the widget content displays correctly on the Brand Details page.
Expected Result
The hero banner is managed through a Media Widget rather than directly through the brand record.
Storefront Processing Flow
The following process occurs when a hero image is configured:
- An image is uploaded or selected in Media Manager.
- The image is associated with the brand.
- The Store published.
- The brand data includes the image information.
- The Storefront loads the brand data.
- Page Builder renders the image component.
- The hero banner appears on the Brand Details page.