Each banner occupies its own block on the page — a banner line. For each banner line, you need to define its location on the page and the type of banner that will be configured for it.
There are no restrictions on the number of banner lines and their location on the Homepage, which allows you to make the home page informative and attractive to customers. Keep in mind that a large number of banners can slow down page loading, so think carefully about which images you need.
To place a banner on the home page, you need to:
Determine which banners you want to display on the homepage.
If necessary, create new lines or change the existing ones.
Prepare images of the correct size for each banner.
Upload images, customize and enable banners in the admin panel.
Please note: We have created a new banner management interface and are gradually updating our clients' stores.
The following instructions apply to both the old and new interfaces.
Preparing banner lines for loading banners
You need to determine the number of banners you want to place on the homepage, as well as their type and size.
Example of banner lines on the homepage
An example of displaying banners in the Shaniya design gallery template:
Banner line 1: wideblock, size L;
Banner line 2: 3x, size M, padding: S, rounding: S;
Banner line 3: 2x, size: M, padding: S; rounding: S;
Banner line 4: block, size: L.
You can see other banner combinations in our design template gallery.
Creating or changing banner lines
To create new banner lines, change banner parameters in existing lines, or change their location, go to the Website → Design → Design editor section of the admin panel and expand the Homepage item. Click Add banner or expand an existing banner line and set the necessary banner parameters. A preview in the design editor allows you to immediately evaluate the changes you've made.
Important: Before changing the banner lines, we recommend that you save the images you used before. After applying the changes, your previous images may be deleted.
Preparing images for banners
To display banners correctly, images must meet the following requirements:
The image size must fully correspond to the selected banner type and size.
The image should be in JPEG or PNG format.
If you choose a cover type banner, you should leave a 500px indents from the left and right edges, and place important information in the center.
If you choose the padded setting, when preparing the image, you should allow 10-15px from the edge to be covered by the indent.
Images should be of high quality.
Setting up and enabling banners on your website
Once the necessary banner lines are created, upload the images to the admin panel and enable banners.
New interface
Go to the Website → Banners section and click + New banner in the appropriate line.
Fill in the Title field — try to give the banner a clear name so it's easier to find later.
Upload the banner image by clicking on the field or dragging and dropping a file into it.
Specify the link or page to which the user will be redirected when they click on the banner.
If necessary, specify the border color, alternative text, and title for the image.
Select the desired setting for the Open link in new tab switch.
Make sure the Show on storefront switch is turned on and click Save.
You can also upload banners directly in the design editor.
Go to Website → Design → Design editor → Homepage and expand the desired banner row.
Hover your cursor over the image upload field and press + in the thumbnail row that appears (for the first banner in the row, just click on the field).
Configure the banner in the same way as in the Website → Banners section.
Old interface
Go to Website → Banners and click Add.
In the Page field, select Homepage.
In the Placement field, select the desired line.
Make sure that the Template field is set to Image.
Upload the banner file to the Image field , set the URL and additional settings as needed.
Select the Active checkbox and click Save.
Links
In the Link (URL in the old interface) field, you can set the address to be redirected to by clicking on the banner — a website page or a link to a third-party resource.
Page (Site page name in the old interface) — select the appropriate page from the drop-down list.
Custom link (Own link in the old interface) — specify a link to any page (both on your site and in other sources).
If a customer should be redirected to the page with a specific product or the filtering results by clicking on a banner, you need to select custom link and enter a relative link (without a domain) in the second part of the field.
If a customer should be redirected to the page of another website by clicking on a banner, the link should be absolute (for example, https://cartum.io/functions/)
Banners for different language versions
For each language version of the site, you can upload different images, set different links, and write the appropriate alt and title meta tags.
New interface
Old interface
Please note:
If no banner is uploaded for an additional language version, the banner set for the main language version of the site will be displayed.
If a banner is not set up for the main language of the site, banners from other language versions will not be displayed. If such a banner is enabled, a blank space will be displayed on the site.
Creating a slider (changing images)
For banners of the block, wideblock, cover, blockplus type (only large banners), you can set up a slider — images that automatically change at a certain interval.
To set up the slider, you need to create several banners in one banner line.
The order of displaying banners in a line
The order in which banners are displayed in a slider and in a line with multiple banners is determined by their positions in the Website → Banners section list.
You can change the display sequence by dragging the banners by the markers in the left column.
New interface
Old interface
