All Collections
Magento 2.x Integration
Magento 2.x - Adding Zones using Widgets
Magento 2.x - Adding Zones using Widgets

Overview of the Zone Widget in the Magento 2.x extension

Peter Brooksbank avatar
Written by Peter Brooksbank
Updated over a week ago

You may want to add additional Zones on your site. This can easily be done by adding Magento "Widgets". Our extension add a new widget type called "PureClarity Zone".

You can create Zone widgets using the standard Magento process for creating widgets (see example below).

The Zone widget has the following options:

Zone ID

This is the ID of the Zone, and should match what is configured in your campaigns in PureClarity. If it does not match any campaigns, no content will show.

Fallback Block Id

If the Zone isn’t populated by PureClarity when the page is rendered, your custom static block will be insert instead.

To get the ID of a block, go to Content > Blocks in Magento admin, then on the grid displayed there, you'll see the IDs listed in the "Identifier" column

Magento CMS blocks listing, with identifier column

Zone Display Mode

This controls what devices this Zone shows on, there a 3 modes:

PureClarity Widget Zone Display mode option

Default - Will display on all devices

Mobile Only - Will only show on mobile devices

Desktop Only - Will only show on mobile devices

Apply Margin

When enabled, a 10px margin will be added above and below the Zone content area.

CSS Custom Classes

Add any custom css classes you may want/need, to help the Zone fit in with your theme.

Example - Adding a Search Results Zone

As an example of how to add your own Zone widgets to your site, let’s add a Zone to the Search Results Page.

1: Navigate to Content > Widgets. Click "Add Widget".

"Add Widget" button at the top of the Widget list

2: Choose “PureClarity Zone” from the "Type" drop down.

Widget setup page, with type & design theme options

3: Choose your current theme from the "Design Theme" drop down.

This needs to be the theme that is active on the store view PureClarity is installed on.

4: Click "Continue".

Completed Widget setup page

5: Configure the "Storefront Properties" of the Widget

Storefront Properties overview

Widget Title

Add a title for your reference, such as “PC Zone SR-01” to represent a Search Results Zone.

Assign to Store Views

Choose the store view to show this Zone on, this should match the store view that PureClarity is installed on.

Sort Order

If you have other widgets in the same place, this can be used to determine which shows first

Storefront properties filled in as per the example

6: Configure the "Layout Updates" for the Widget

Layout updates are used by Magento to determine the positioning of a Widget with in this site. In our example we're going to add the Zone to the top of the Search Results page

  1. Press the “Add Layout Update” button

  2. Select “Specified Page” from the “Display on” dropdown menu

  3. Choose “Quick Search Form” in the "Page" dropdown and “Before Main Columns” in the "Container" dropdown.

This should give you a layout update that looks like this:

Layout updates filled in as per the example text

6: Click "Save"

Hit the Save button at the top of the page to save the Widget.

Save button at the top of the Widget create page

Your Custom Zone Widget is now configured and ready to use.

As Magento uses caches to help the frontend run faster, so you will need to clear the following caches in order for your Zone to appear on the frontend of your site:

  • Layouts

  • Blocks HTML output

  • Page Cache

When adding new Zone widgets you may need to clear the Magento cache to see it appear.

If you have a campaign set up in PureClarity admin, your Zone can now be seen on the search results page!

Did this answer your question?