Help: The cart buttons on Mozilla aren't working properly!

Introduction 

If you’ve encountered issues with cart buttons on Mozilla, we’ll walk you through a fix.

Note: This fix is for older versions of Loft (below 1.3.6)

1. Access your themes section
2. Open the Loft theme code
3. Add code

1. Access your themes section

Login to your Shopify admin, and then click “Online Store” (on the left side of the admin). This takes you to the “themes” area of your Shopify store.

Example themes section

2. Open the Loft theme code

Next, click the button that says “Actions” - followed by “Edit code” which will load the live code editor. It consists of a left hand sidebar, which lists all the files on Loft, along with a right hand code editing panel.

Shopify code editor

3. Add code

You need to add code to 3 separate files.

1. cart-template.liquid
2. en.default.json
3. theme.scss.liquid

cart-template.liquid

Find the cart-template.liquid file in the "Sections" folder.

On line 35, switch the element to a "div" instead of a button, and add <a> tag in before translation code that has the href "collections/all":

Before

<button class="btn--tertiary cart-continue-button">{{ 'cart.general.continue_browsing_html' | t }}</button>

After

<div class="btn--tertiary cart-continue-button"><a href="collections/all"></a>{{ 'cart.general.continue_browsing_html' | t }}</div>

Do the same on line 215:

Before

<button class="btn--tertiary medium-down--one-whole cart-continue-button {% if section.settings.title != '' or section.settings.cart-ad-description_richtext != '' %}cart-enabled{%else%}cart-disabled{%endif%}">{{ 'cart.general.continue_browsing_html' | t }}</button>

After

<div class="btn--tertiary medium-down--one-whole cart-continue-button {% if section.settings.title != '' or section.settings.cart-ad-description_richtext != '' %}cart-enabled{%else%}cart-disabled{%endif%}"><a href="collections/all"></a>{{ 'cart.general.continue_browsing_html' | t }}</div>

On line 237, add <a> tag in before translation code with href "collections/all". Should look like this:

<p><a href="collections/all">{{ 'cart.general.continue_browsing_html' | t }}</a></p>

Do the same on line 248:

<p><a href="collections/all">{{ 'cart.general.continue_browsing_html' | t }}</a></p>

en.default.json

Find the en.default.json file in the "Locales" folder.

On line 112, remove the <a> tag around "continue shopping". It should now look like this:

"continue_browsing_html": "Continue Shopping",

theme.scss.liquid

Find the theme.scss.liquid file in the "Assets" folder. This block of code expands the <a> tag to fit the entire container, preventing hovering issues and click-through.

Under line 5981, add the following block of code:

Note: The code should be added under the css property "border-color: $primary-color; in the .cart-continue-button class.

color:{{settings.color_primary}};

&:hover{

   color:{{settings.color_accent}};

}

a{

   position: absolute;

   width: 100%;

   height: 100%;

   top: 0;

   left: 0;

}