EN IT
Open2b version 7.8

Add banners

You can add as many banner sections as you want in the template. Individual banners can then be easily added, edited, and removed from the back office for each section.

Before you proceed

Adding a banner section, even if it may seem simple, still requires some knowledge of HTML and CSS. You may also need to modify HTML and CSS to correctly display the banners on the store and in the desired style.

Create a new banner section

Before you can add a new banner section to a template page, you must define it in the editor.json file.

  1. Go to the Website section of the back office.
  2. Go to the Design subsection.
  3. Click Customize next to the template for which you want to name the banner section. The Template Editor will open.
  4. Click HTML and CSS.
  5. Click editor.json in the file list on the left. The file source will open in the center of the page.
  6. Inside the "locations" field add the following:
      {
          "location" : "Offers",
          "label" : {
              "en" : "Winter offers",
              "it" : "Offerte invernali"
          }
      }
    where instead of Offers you should provide the name used to reference the banner in template code. The name must start with a capital letter and must not contain spaces (more precisely, it must follow the syntax of a Go identifier).
  7. Click Save to save changes to the file.
  8. Click Exit to leave the Template Editor.

Add a banner section to a page

  1. Go to the Website section of the back office.
  2. Go to the Design subsection.
  3. Click Customize next to the template you want to add the banner section to. The Template Editor will open.
  4. Click HTML and CSS.
  5. Click the filename where you want to insert the banner section. The file source will open in the center of the page.
  6. Add the following import instruction at the beginning of the file, as the first line or second line if the first line is an extends instruction:
    {% import "/imports/banners.html" %}
    provided that the "/imports/banners.html" import is not already present.
  7. Add the following instruction where the banners should appear:
    {% show Banner(banners.Offers, "") %}

    where instead of Offers you should write the name of the banner section to display. To show the banners as a slideshow with timing "6000/500":

    {% show Banner(banners.Offers, "6000/500") %}
  8. Click Save to save changes to the file.
  9. Click < at the top left next to HTML and CSS.
  10. Click Banners; the new banner section will appear in the left column.