Skip to main content
All CollectionsSparrowShopMarketing & Promotions
How Do I Add a Banner to the Homepage Carousel?
How Do I Add a Banner to the Homepage Carousel?

Follow these steps to add additional graphics to your hero carousel up on the homepage.

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

Accessing the carousel

Step 1

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

Step 2

Select 'Blocks’

Step 3

Find the block titled ‘Banner - Homepage - Carousel'

Step 4

Open the dropdown on the right-hand side and press 'Edit'

Step 5

Press ‘Edit with Page Builder’

Step 6

Hover over the element and press the plus icon to add a new carousel slide

Step 7

Select the new dot that appears and press the settings icon for that slide

Option 1: Uploading an image slide

Step 8

Set the 'Minimum Height' to 400px

Step 9

Upload your desired image for desktop devices

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

Step 10

Upload an image for mobile devices

Note: Make sure your image has the following dimensions – between 300 and 400px width and 400px height (PNG or JPG). Leaving space between the edges and your content will ensure that your content is not cut off.

Step 11

Select a background size that suits the image you have uploaded

  • Cover - will zoom in on the image to fit the user's device size

  • Contain - will make sure the entire image is visible on all user devices, even if it is smaller than the container size

Step 12

Select a background-position

  • This is where the image will focus on if it needs to zoom in

Step 13

Set a border-radius of 10px

Step 14

Scroll back to the top and press 'Save'

Step 15

Close full-screen edit mode

Step 16

Press 'Save'

Option 2: Adding a text-based slide

Step 8

Set the 'Minimum Height' to 400px

Step 9

Upload your desired image for desktop devices

Note: Make sure your image has the following dimensions – 1024px width and 400px height (PNG or JPG)
​
Uploading a background image that is abstract or not content-specific is ideal.

Step 10

Select a background-position

  • This is where the image will focus on when it zooms in on mobile

Step 11

Enter the text you would like to be displayed on the slide

Note: Typically you should use <h1> tags as seen in the example below for main headings

Step 12

(Optional) Enter a link that a user will be directed to when they click on the slide or button

Step 13

(Optional) Select whether you want a button displayed via the dropdown

Step 14

(Optional) Enter the button text

Step 15

(Optional) Select whether you want a colour overlay shown over your image

Step 16

(Optional) Select the colour and opacity you want for your overlay

Step 17

Select the alignment you want for your content

Step 18

Set a border-radius of 10px

Step 19

Scroll back to the top and press 'Save'

Step 20

Select your text and edit the styles further here

Step 21

Close full-screen edit mode

Step 22

Press 'Save'

This is the styling of a <h1>, <h4> and button element by default.

Did this answer your question?