Add app to cart page

Display Hakuna product protection on your cart page by customizing your theme. All you have to do is add a new app block to the cart page, hide some cart elements, and map selectors. You'll only need to do this once since the changes will be applied to all carts using this template.

1. Add a new app section

Make sure you have at least one product in your shopping cart so that you can position the app section properly

• In your Shopify admin, go to Online Store -> Themes

• Navigate to the theme you want to edit, and click Customize

Navigate to the themes and click Customize

• Navigate to the Cart page

Select the Cart page

• Click Add block in the sidebar, and select the Hakuna protection widget

Add the Hakuna protection widget as a new block

• Position it below the other cart items

Position the block

Don't forget to click Save 😉

2. Edit theme code

When adding Hakuna to your cart page, you'll need to prevent it from being displayed there as a line item so it doesn't get listed twice. Here's how to do it using the Shopify Dawn theme:

Keep in mind that your solution may look a little different since it depends on the structure of your theme. If you run into any issues or have any questions, please reach out to us.

Open the code editor

• Open your Shopify admin, and go to Online Store -> Themes

• Navigate to your current theme, and click Customize

Open your themes and click on customize

• Click the 3 dots in the upper left-hand corner and select Edit code

Click on Edit code

Add code snippet

Find the template responsible for rendering line items in the cart, and add the following code snippet. Use the search to find the file more easily.

• Navigate to the main-cart-items.liquid file

• Paste the code snippet below {%- for item in cart.items -%}

{% if item.product.vendor == "hakuna" %} 
   {% assign hideHakunaStyle = "display: none;" %}
{% else %}
  {% assign hideHakunaStyle = "" %}
{% endif %}

Extend style attribute

After you've added the code snippet, extend the style attribute of the HTML tag wrapping line items by the hideHakunaStyle variable.

• Add style="{{ hideHakunaStyle }}" to the cart-item HTML tag

style="{{ hideHakunaStyle }}"

Click Save

3. Map selectors

We use selectors to let our widget know which cart sections to update. The Hakuna Shopify app will automatically map selectors with default values. You will likely need to replace these default selectors with ones specific to your theme for cart elements to update properly.

Get the correct selectors

If we already shared the correct selectors with you, you can start inputting them right away. If we haven't shared the correct selectors with you yet, get in touch with us so we can support you in finding them.

Input the correct selectors

• In your Shopify admin, go to Online Store -> Themes

• Navigate to the theme you want to edit, and click Customize

• In the lefthand sidebar, click App embeds

• Search for Hakuna Embed and then click on it to expand it

• In the Cart drawer sections selectors section, replace the default selectors with the correct values:

  • Cart drawer section name

  • Cart drawer section ID

  • Cart drawer selector where to apply updates

  • Main cart footer section name

  • Main cart footer section ID

  • Main cart footer selector where to apply updates

Where to input the selectors

Click Save one last time 😍

That's it! Hakuna product protection will now be displayed on your product pages and in the cart.

This is what your cart will look like