Time needed: from 5 minutes 🕑
Difficulty: ⭐⭐⬜⬜⬜
Banners will help you draw customers' attention to promotional offers, benefits, popular products, and other features of your online store.
Please note: We have created a new banner management interface and are gradually updating our clients' stores. You can learn more about this interface in the article What has changed in working with banners.
The following instructions apply to the old interface.
Let's take a closer look at how to work with banners.
How to create a banner
New Interface
Step 1.
In the Website → Banners section, click New banner.
Step 2.
In the window that opens, select the location for the new banner:
Homepage — previously created banner lines are available;
Header — a banner that appears on every page of the site;
Inner pages — a banner for catalog pages, displayed at the top or bottom of the page.
Step 3.
Please enter a descriptive Title for the banner. This is needed to identify the banner in the admin panel; customers will not see the banner title.
Step 4.
Toggle the Show on storefront switch to display the banner on the website.
Step 5.
Upload an image for the banner according to the recommended dimensions. The dimensions depend on the type of banner you have selected.
Please note: You need to upload a separate banner for each language version enabled on the website.
Step 6.
Choose the frame color of your choice.
Step 7.
If the banner is to be clickable, specify the link or page the user will be directed to after clicking.
Step 8
If necessary, turn on the Open link in new tab toggle.
Step 9
For banners above the header
Select the banner height (S, M, or L), the version of the site where the banner should be displayed (desktop, mobile, or both), and configure the button to close the banner on the site. Instead of an image, or in addition to it, you can specify text for the banner, its color, and the background color.
For banners on the homepage and catalog pages
If necessary, provide alternative text and a title for the image.
Step 10.
Click Save.
Tip: For banners on the desktop version of the site's home page, you can follow the same steps in the Website → Design → Design Editor → Homepage section.
Old interface
Step 1.
In the Website → Banners section, click + Add.
Step 2.
In Page field, select the page for which you are creating the banner.
Step 3.
Select the banner line in the Placement field.
Step 4.
In the Template field, select Image.
Step 5.
Specify a clear Title for the banner. It is needed to identify the banner in the admin panel, customers will not see the banner name.
Step 6.
Select the Active checkbox to display the banner on the site.
Step 7.
Add the image for the banner according to the recommended size. The size depends on the chosen type of banner.
Please note: you need to upload a separate banners for each language version that is enabled on your website.
Step 8.
Choose the Border color as desired.
Step 9.
If the banner is to be clickable, specify the URL that the user will be taken to after clicking.
Step 10.
Save the changes and check how the banner looks on the website.
How to create a slider
Slideshows can be set up for banners of the Block, Wide Block, Cover, Block Plus (L size only) types. The banners will change automatically every five seconds.
For a slider, you need to load several different banners in one line. That is, you need to go through the full cycle of actions described above, and then repeat it the required number of times.
New Interface
Step 1
In the row where the first slider banner is located, click + New banner.
Step 2
Upload the next banner and configure it the same way as the previous one.
Step 3.
Click Save.
Old interface
Step 1
Click + Add.
Step 2
Upload the next banner and configure it in the same way as the previous one by selecting the same banner line in the Placement section.
Step 3.
Click Save.
