GC.CMS — homepage carousel & banners
Required image resolutions
- Desktop background: 2560×597 px (required)
- Mobile background: 1500×1500 px (highly recommended)
- Desktop image: 1500×1500 px (optional) — it is advisable to keep a margin of 330 px of transparency, because with screen responsiveness the edges may be cropped.
- Mobile image: 600×600 px (optional)
- Mobile image: 900×600 px (optional), e.g. to reduce margins
Warning
Due to page loading speed, the accepted file format is webp with a maximum weight of 50 kB. You may use the free squoosh.app to compress your images. At least both background images — desktop and mobile — are required.
Example of a banner:
Where to edit the banner
To edit the banner, you need access to the CMS from your website administrator.
In this tab you can:
- Banners may vary depending on the language version.
- Create a new banner.
- Edit an existing banner.
- Edit the entire JSON code.
Adding or editing a banner
An image of the specified size can be used as the background, but at different resolutions the margins of the image may be cropped. Therefore, you can also select from the menu below to have the background in a defined colour or gradient and add the image itself (rectangular or circular), which will adjust its size to the display resolution and appear on the right side of the banner.
You can also define a button on the banner that redirects the user to a specific place in your store's offer.
The text on banners can be defined in HTML. Below are a few examples of text sizes that scale well on different devices:
<span>Caption big letters</span>
<span>Caption normal letters</span>
<span>Caption small letters</span>
Adding an image
Editing the JSON file
After editing, save your changes and refresh the cache.