Category Banner Adverts

Add two advertising spaces for the category page.

Wireframe

Category Banner


Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

  • Read through the Getting Started Guide to get a better sense of how the Control Panel, Database and Front End store interact.
  • Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
  • Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.

Coding Instructions

Step 1: Setup the ad group

To add adverts to the category page you will first need to create an advert group.

  1. In the control panel, go to Setup & tools > All settings & tools > Webstore Advertising Groups.
  2. Setup a new advert group named category_banner_adverts.

Step 2: Create the adverts

Create an advert and set the "Group" to category_banner_adverts and "Select location for ad to appear" to the desired category page. Repeat this step for the second category banner.

Step 3: Add the category page code

Open /httpdocs/assets/themes/[THEME-NAME]/templates/cms/category.template.html and paste the following code into the template where you would like it to appear:

[%advert type:'text' limit:'2' ad_group:'category_banner_adverts'%]
    [%param *body%]
        <div class="col-sm-6">
            <a href="[@url@]" target="[@target@]">
                <img class="img-fluid img-responsive" src="[%asset_url type:'adw' id:'[@ad_id@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%/param%][%/asset_url%]" alt="[@headline@]">
            </a>
        </div>
    [%/param%]
[%/advert%]

Final Result

Category adverts


Customising this Section

More information on how to customise this section can be found within the Advert Documentation.

Was this article useful?

Be notified when this page is updated. Optional.