Voucher Banner is Covering the Mini Cart (z index)

Owned by Becky Haire
Last updated: May 26, 2022 by Sarah Holst
2 min read

 

Issue Overview

When certain HTML widgets are used, the z index, or display order, isn’t correct. When this occurs, the voucher banner appears on top of the mini cart. This can happen with the voucher banner for resorts that may add the voucher functionality later on.

Solution Options

There are two ways to correct this:

  1. Add an additional widget that places the mini cart z index above everything else.

  2. Swap an existing widget at the top of the list with your voucher banner widget so the voucher banner is listed on page one.

NOTE: You can do one or the other, both are not necessary. As always, please make these changes in your test site and confirm the expected behavior before making the change in production.

Detailed Configuration

Method One: Add an additional widget that places the mini cart z index above everything else.

  1. Refer to the HTML Configuration Guide

  2. Click Add new HTML Widget

    1. Name: Minicart Banner z-index Fix

    2. Source Code (NOTE: the top pixel amount may need to be adjusted for your theme):

      <style> .vouchers-enabled #mini-cart { top: 58px; position: absolute; z-index: 1000; } </style>

    3. Widget Zone: body_start_html_tag_after

  3. Click Save

  4. Clear cache

 

Method Two: Swap an existing widget at the top of the list with your voucher banner widget

  1. Find a temp or CSS widget on page 1 of your HTML widget list

  2. Create a new Html Widget and copy the name, source code, and widget zone of the one you found in step 1

  3. Edit the original HTML widget, from step 1, and change all the info to be the Voucher Banner widget. Detailed setup can be found in the HTML Configuration Guide.

  4. Delete the old voucher banner widget if it exists lower on the list

  5. Clear cache

Screenshots

BEFORE:

 

AFTER: