How to add a Promotional banner to your storefront

Use this guide to find information on how to add a promotional banners to each of your storefronts on the Bemakers platform.

The promotional banner displays near the top of your page, adding a visual element that sets the tone for your Storefront. It is also a great way to highlight your brand's new offerings and products and promote store sales.

Let's get started!

1. Go to the Commerce section and choose Banners
2. Select the Market you would like the banner to appear on
3. Click Add promotional banner. 

Name

When you create banners for your webshop, it's important to give each banner a unique name. This will help you easily distinguish between multiple banners that you may have created, and enable you to select the most appropriate banner to display on a specific collection. So, make sure to choose clear and descriptive names for your banners that accurately reflect their content or purpose.

Background

Here you can select the image or video as a background for the banner. 

Image background 

The image should be at least 1200 pixels wide and be high definition. 

To add an image, make sure that the image background option is checked and click on Upload image. Select the picture from your computer that you would like to upload.

• Use images that are at least 1200 pixels wide and 600px high. Use as high resolution as you can, we'll optmize it for speed and scale.
• Ensure images are wider than they are tall
• Don't use images with text in the actual image file. Instead, add text over the image
• Image will scale towards the center depending on the users screen size - if there's content in the image you want to make sure is visible, make sure it's centered in the image and well clear of the edge of the image.
  Note: Since images and screen sizes vary a bit, we can't ensure what's visible by the user. This is considered to be a background image - add important information as text over the image in the editor.
• Image file type should be .jpg or .png
• If you want a text-only message at the top of your site, add an announcement bar instead of a banner

Video background 

To add a video to your promotional banner, please ensure that the video has been uploaded to either YouTube or Vimeo services. Follow these steps:

1. Check that the Video background option is selected.
2. Copy the link of your video from YouTube or Vimeo.
3. Paste the video URL into the Video URL field

🔇 Videos will be embedded without sound. This is a restriction from Youtube and Vimeo, since autoplaying video with sound is generally considered to be a bad user experience.

Note: There is an option to add the dark overlay to background image or video and it's enabled by default. If you don't want the overlay to be added to this banner then uncheck the Add dark overlay to background checkbox 

Aspect ratio

You can define how the image or video will be displayed on the banner. There are two options available:

• Keep Aspect Ratio: With this option, the image or video will maintain its original format. It will be displayed in its original size.
• Crop: Selecting this option will crop the image to fit a 400px height and width based on the user's screen size. This means the image will be resized and cropped to ensure it fits within the specified dimensions without distorting the aspect ratio.

Text

Here is where you add the messaging you want to include in the banner. The text is divided into two sections, a heading, and a subheading. This is optional if you choose not to have any text in the banner, simply leave it blank.

Button

The button allows a call to action. You can link to a specific product, category, or an external link. To configure, give the button a label and add the link it will direct to the consumer. This is also optional, if you choose not to have it, simply leave it blank.

Publish your banner: Set status & assign to a collection

You can choose to leave the banner on draft or for it to be active. 

Only active banners are displayed on the webshop. 

Collections

If you have active collections on the webshop you can check see all of them under Collections and can select the ones on which current banner needs to be displayed. You can select one or several collections 

If you have active collections already set up on your webshop, you can easily choose where to display your banner. On the Collections section you will see a list of all the collections that you have created. You can select one or multiple collections where you want your banner to appear.