Add app to cart drawer
This step increases customer touchpoints leading to higher attachment rates
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
To open the code editor, click the 3 dots in the upper left-hand corner and select 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 -%}
Add
style="{{ hideHakunaStyle }}"
to thecart-item
HTML tag
Add <div id="hakuna-cart-widget"></div> just before </cart-drawer-items>
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.
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:
Click Save one last time 😍
That's it! Hakuna product protection will now be displayed on your product pages and in the cart drawer.
Last updated