Go to the new documentation
EN IT

Insert 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 admin for each section.

See also

If instead you want to add a banner to an existing section then...

Before you continue

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

Add a new banner section

  1. Go to the Website section in the admin.
  2. Go to the Design subsection.
  3. Click Customize on the template where you want to insert the banner section. The template editor will open.
  4. Click HTML and CSS.
  5. Click the file name where you want to insert the banner section. The file source will open in the middle of the page.
  6. Insert the following code in the position where the banners should appear. 
      <!-- .if banners(15) -->
  <section class="banners banners-15">
    <!-- .for banners(15) -->
    <div class="banner"><!-- .show banner --> <img src="banner.jpg"> <!-- .end --></div>
    <!-- .end for -->
  </section>
  <!-- .end if -->
    where instead of 15 in "banners(15)" and "benners-15" you should write a unique section number not used by another section in the template.
  7. Click Save to save the file changes.
  8. Click < at the top right next to HTML and CSS.
  9. Click Banners; the new banner section will appear in the left column.

Give the banner section a name in the admin

When you add a banner section in the template source code, this section appears in the admin among the banner sections but without a name.

  1. Go to the Website section in the admin.
  2. Go to the Design subsection.
  3. Click Customize on 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 in the left column. The file source will open in the middle of the page.
  6. Inside the "locations" field add the following: 
      {
      "location" : 3,
      "label" : {
          "en" : "Winter promotions",
          "it" : "Promozioni invernali"
      }
  }
    where instead of 3 you should indicate the banner location as it appears in the template code:
    <!-- for banners(3) -->
  7. Click Save to save the file changes.