Banner Management

Cloud ecommerce starter Ecommerce Enterprise dedicated
Functionalities

A step by step guide on how to use the banner extension in LightR Commerce.2

Promotion banners contains the following elements:
    - Banners - this section contains individual banners for the promotional videos o promotional images. Banner
    - Banner groups - the group contains multiple banners inside of it. There are 4 templates of the groups as follows:
        -- 1 banner output - Full witdh banner 
        -- 2 banner output - Boxed banner of 2 images
        -- 3 banner output - Boxed banner of 3 images.
        -- 4 banner output - Boxed banner of 4 images.

Banners on the Storefront are called using widget functionality. See guide for more details.

It's a 4 step process:
    Step 1: Create Banners
    Step 2: Define banner groups
    Step 3: Call banners on the frontend.
    Step 4: Apply the changes to Storefront.

Manual

Available banner options

1 banner template
2 banner template
3 banner template
4 banner template

The right usage

The lightR commerce Banner manager is specifically designed for images that illustrate the message that is printing in the content areas and to catch the attention of the store visitor to click on the button that is displayed over the banner.

The image that is used inside the banner should support this. We recommend images with products printed on a fair background or real life images with not many details. What we discourage is the usage of images with text messages as the automatic clipping can cut the text and auto resizing for mobile user can result in unreadable text.

Responsive

LightR commerce Banner management is using a advanced image rendering engine to server the right image size to the front end user. We do this to give you the best user experience and avoid loading large file sizes to users who do not require this. Banners are programmed to generate the best view of your banner depending on the device that is visiting the lightr store. It is doing it by a applying a fixed height and width ratio. For each bannergroup the ratios are different for desktop and mobile.

The original uploaded banner is loaded to the maximum fitting these ratios. In case the ratio of the original uploaded image does not meet requested device ratio the LightR Commerce banner management in automatic clip or expand the image to meet the ratio. 

notice the clipping at the green marked are in the example.  

 

Recommended ratio

Depending which banner group your are going to set on the front end of your lightR Commerce store we recommend uploading the following image ratios. Always with a minimum pixel width of 1600px.

width:height

1 Banner layout: 7:2

2 Banner layout: 1:1

3 Banner layout: 3:2

4 Banner layout: 4:3

Step 1

  1. Go to:  Content -> YoungDogs banner -> Manage banner
  2. To upload the image click on Add New Banner
  3. Add a title
  4. Add Content 
  5. Choose the Media Type
    • Options available:
      •  Image
      •  Video
  6. Upload media file.
  7. If in 4 you've chosen Video, add the video url, if not leave empty.
  8. Add a hiperlink to the page where the banner should take a customer on click. 
    • IMPORTANT - if no url (link) is required you need to fill it with "/" (slash)
  9. Repeat the process as many times as required to add the promotion material.       

Step 2

  1. Go to:  Content -> YoungDogs banner -> Manage BannerGroups
  2. To create a group click Add New BannerGroup
  3. Add a name
  4. Add title
  5. Choose template
    • 1 banner template - Full witdh banner 
    • 2 banner template - Boxed banner of 2 images
    • 3 banner template - Boxed banner of 3 images.
    • 4 banner template - Boxed banner of 4 images.
  6. Click on Add Banner 
  7. Select the previously created banner(s) to form a group.
  8. Save the Banner Group.
    • You can modify the priority of the banners using position setting. 

Step 3

  1. Go to: Content -> Elements -> Widgets
  2. Click on Add New widget
  3. Select a type of widget: YD Banner
  4. Choose design theme: LightR Storefront
  5. Click Continue
  6. Add Widget title
  7. Choose a Store View - All Store views 
    • - Currently only 1 store view is supported on Lightr. 
  8. Define sort order on the page. 
    • - If you will use multipe banners in the same location, On home page, you want to place 2 banner groups, then it will sort these elements accordingly.
  9. Define the position: Layout Updates -> Add Layout Update
  10. Choose where you want  to display the banner. 
    • Display on -> Specific page(*) ->
      • 10.1 Choose a page
      • 10.2 Choose position (container)
      • 10.3 Select the Template - this should be the same as in Step 2 - 5 
    • * - Based on this selection you'll be provided with different options, in our example we want to display it on the Homepage of the store. 
  11. Switch to Widget Options
  12. Choose the group that you've created in Step 2.
  13. Save your configuration.

Step 4

Apply the changes

  1. Navigate to System -> Tools -> Cache Managment
  2. Click Flush Magento Cache.
  3. Wait for 1-2 minutes and the banner will appear on the storefront.

available in Features Cloud ecommerce starter Ecommerce Enterprise dedicated Magento 2 base lightR
Technical Documentation

None.


External Documentation