Add app to cart drawer

Display Hakuna product protection in your cart drawer by customizing your theme. All you have to do is define a position for the widget, hide some cart elements, and map selectors.

1. Edit theme code

You'll need to edit your theme code to define a position for the widget and hide some cart elements. 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 your Shopify admin, and go to Online Store -> Themes

• Navigate to your current theme, and click Customize

Open your themes and click on customize

• To open the code editor, click the 3 dots in the upper left-hand corner and select Edit code

Click on Edit code

• In the code editor, navigate to the cart-drawer.liquid file in the Snippets folder (you can use the search to find the correct file more easily)

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

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

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

style="{{ hideHakunaStyle }}"

• Add <div id="hakuna-cart-widget"></div> just before </cart-drawer-items>

<div id="hakuna-cart-widget"></div>

Click Save

2. 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.

Find the correct selectors

If we already shared the correct selectors with you, you can skip this step and 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. You do not have to do this on your own.

If you want to try your hand at finding the correct selectors on your own, you can follow the steps below. Please keep in mind that the steps will vary based on your theme code. If you get stuck, please reach out to us. We are more than happy to help you find them.

Find the cart drawer section name

Look for the element where line items are rendered

• Open your shop and navigate to a product detail page (it doesn't matter which)

• Open the developer console and click the Network tab

• Add the product to the cart to trigger an update to the cart drawer

• Click on the add-to-cart request and open the Payload tab to view the section fields

• Save the cart drawer section id value somewhere for later use

If there are no sections listed in the request payload, you should be able to find the section id by filtering for section, opening the request, and viewing the Payload.

Find the cart drawer section ID

Find the parent element of the section response

• Check the response for the section request by clicking on the Response tab in the developer console

• Find the parent element of the response and copy one of its selectors (e.g. id or class)

• Switch to the Elements tab

• Paste the copied selector into the search bar to find the element that should be replaced by the response of the section request

• Find its parent element

• Save the id of the parent element somewhere for later use

Find the cart drawer selector where to apply updates

Find the element that will be replaced by the HTML from the response

• Find the parent element of the section response

• Find one of its CSS selectors

• Save the value somewhere for later use, adding a "." to the beginning if using the class and adding "#" to the beginning if using the id

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:

  • Main cart items section name

  • Main cart items section ID

  • Main cart items 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 drawer.

This is what your cart drawer will look like