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)
- Access your themes section
- Open the Loft theme code
- 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.
- cart-template.liquid
- en.default.json
- 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;
}