Skip to main content
All CollectionsSparrowShopMarketing & Promotions
How Do I Add a Banner to the Top of a Page?
How Do I Add a Banner to the Top of a Page?

Follow this step-by-step guide to add a banner to the top of the page, below the navigation and above the page content.

Maysa Wozeer avatar
Written by Maysa Wozeer
Updated over 3 months ago

Step 1

Go to ‘Content’ in the left-hand side menu

Step 2

Select 'Blocks

Step 3

Find the block titled ‘Banner - Content Top (Template)

Step 4

Open the dropdown on the right-hand side

Step 5

Select ‘Edit

Step 6

Press the dropdown next to the save button

Step 7

Press ‘Save & Duplicate

Step 8

Make sure Enable Block is set to ‘Yes

Step 9

Enter a block title that describes the sale banner

Step 10

Edit the identifier to reflect the block title

Step 11

Press ‘Edit with Page Builder

Step 12

Hover over the image and either upload an image from your device or select one from the gallery.

Right-click the image to set a hyperlink e.g. to a terms and conditions page or a category page.

Note: Make sure your image has the following dimensions – 2048px width and 510px height (PNG or JPG)

Step 13

Close full-screen edit mode

Step 14

Press ‘Save

Step 15

Go to ‘Content’ in the left-hand side menu

Step 16

Select ‘Widgets


Step 17

Press ‘Add Widget

Step 18

Set type to ‘CMS Static Block

Step 19

Set design theme to your brand e.g. ‘Chemistworks’

Step 20

Press ‘Continue

Step 21

Enter a title for the widget e.g. ‘Banner - Sale - [Sale Description]

Step 22

Select ‘All Store Views

Step 23

Press ‘Add Layout Update

Step 24

Select the page type to display the banner on

Step 25

For categories, choose to display the banner on all category pages or select pages

Step 26

Set container to ‘After Page Header Top

Step 27

Press ‘Add Layout Update’ to add the banner to another page type

Note: ‘Anchor Categories’ will include all categories and subcategories visible on the website. ‘All Product Types’ will include all product pages.

Step 28

Scroll up and select ‘Widget Options

Step 29

Press ‘Select Block


Step 30

Select the banner you uploaded earlier

Note: You can search for the banner block based on ID, Title or Identifier

Step 31

Press ‘Save


Troubleshooting

If the banner doesn’t appear on the website automatically, follow the steps below:

Step 32

Go to ‘System’ in the left-hand side menu

Step 33

Select 'Cache Management

Step 34

Select the three cache types that are invalidated

Step 35

Select ‘Refresh’ and submit

Step 36

You should now be able to see the banner at the top of the category and/or product pages selected

Important: Once the promotion is over and you want to remove the banner from the website, please make sure you delete the widget.


Did this answer your question?