Add app to cart page
This step increases customer touchpoints leading to higher attachment rates
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 Cart page
Click Add block in the sidebar, and select the Hakuna protection widget
Position it below the other cart items
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
Click the 3 dots in the upper left-hand corner and select 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 -%}
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 thecart-item
HTML tag
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:
Click Save one last time 😍
That's it! Hakuna product protection will now be displayed on your product pages and in the cart.
Last updated