Please help me find the appropriate file for a code

Sandra45MJ
Explorer
79 0 9

Hello,

 I am trying to install a wishlist button using this guide. 

It is said to look for the cart icon code in header.liquid, however this code is not there. So my question is, where else can I find it in order to place the wishlist button above it?

Thanks.

I'm using Debut. 

url: www.crueltyfreebabe.com

Replies 13 (13)

aadityatadas
Excursionist
22 4 5

so you didn't found any of this: 

  • sections/header.liquid
  • snippets/header-bar.liquid
  • layout/theme.liquid
Sandra45MJ
Explorer
79 0 9

I did find those.
What I didn't find was the code for the cart icon, which I am supposed to locate so I can place the wishlist icon above it.

drakedev
Shopify Partner
685 148 229

Hi, @Sandra45MJ 

in Debut theme the header is built in file header.liquid if you look the code, at around line 134, you'll see 

 

          <a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
            {% include 'icon-cart' %}
            <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
            <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %} critical-hidden" data-cart-count-bubble>
              <span data-cart-count>{{ cart.item_count }}</span>
              <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
            </div>
          </a>

 


You can add the code to show the wishlist icon before this block of code, and follow a similar approach.

 

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
Sandra45MJ
Explorer
79 0 9

Okay, I did it, but when I click preview I still don't see the heart icon. Am I supposed to also insert the CSS code? And if yes, where?
(I am assuming that I need to use the codes provided in "Option 1B: Themes that do not use font-awesome")

drakedev
Shopify Partner
685 148 229

You need to upload the file to the /assets/ folder of your theme and reference it in the code (I suggest you to use an SVG, but also a PNG would work)

 

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
Sandra45MJ
Explorer
79 0 9

sorry but i have no idea what you just said to me 😄

Lilith
Shopify Staff
603 73 185

Hi, @Sandra45MJ!

My name is Lilith, I'm on the Social Care team at Shopify. Wishlists are amazing! I'm thrilled to see that you're taking steps to really create a loyal customer base for your ethical products business.

Shopify isn't able to support changes to your theme code of this level, be sure to make a copy of your theme as a backup. It's always good to be prepared in case a snippet of code may not be compatible with your theme.

I'll jump in here and help you locate where the code is to make it easier for you to modify your site the way you want. I'm using the latest version of Debut.

In the thread, I see you've checked the theme files and you seem to be comfortable with finding where those are. Here are the steps you want to follow when you're on the code editing page:

1. Open Sections.

2. Click on header.liquid.

3. Use a keyboard shortcut for searching (Ctrl + F or Cmd + F) and search for cart or site-header__icon site-header__cart

4. The code you're looking for should be hovering around line 138.

For reference I've taken a screenshot and pasted the sample snippet of code that you're looking for:

21-23-33891-27413

 

<a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
            {% include 'icon-cart' %}
            <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
            <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}" data-cart-count-bubble>
              <span data-cart-count>{{ cart.item_count }}</span>
              <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
            </div>
          </a>

Since you're going to implement a wishlist section of your store, I imagine that customer retention will be a key focus for you. Your brand mission is perfectly suited for something like this and would be really well complimented with a rewards program.

Rewards programs would encourage your visitors (future customers) and current customers to sign up for an account, subscribe to your email/text list, and buy more than once with you. Your cruelty-free products are a great offering and it's more likely that customers will switch from a non-ethical brand to an ethical brand if there is an incentive to do so. This means that your brand mission will get more recognition and have a larger reach when newly converted customers share their experience.

We have lots of reward apps that can help you easily add it to your store, but some of my favorite ones that I've personally worked with are Smile.io, Loyalty, Rewards & Referrals and Loyalty Program.

Have you thought of combining the wishlist with a simple rewards program for your business?

Let me know how you do with the information above! I'm happy to answer any questions you think of as you work on your business.

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Sandra45MJ
Explorer
79 0 9

Thank you. Do I insert the HTML code for a theme that uses font-awesome, or the HTML+CSS codes for themes that don't use it?

Lilith
Shopify Staff
603 73 185

@Sandra45MJ stepping in here again to help. I've tested the steps in your guide and they seemed to have worked fine and quickly.

I'm using Debut as my test theme.

I used Option 1A from your 3rd party guide:

27-04-39598-87826

 

 

Below I have a screenshot of where I added the code from that set of steps. I followed the steps only in Option 1A.

27-51-76565-53790

 

As you can see I added the code from your guide right above the cart icon code that myself and drakedev have helped you find in the above replies.

Here's the result without doing anything else other than those 2 steps in your guide:

27-52-53958-40869

 

If you're still having trouble, I would recommend reaching out to the author of this tutorial as they would be best to help with their steps and troubleshooting them.

You can also provide some screenshots and preview links here in the thread as well if you want other developers or me to help. It's a bit tough to gauge what's happening on your side if we're unable to visually see the code you're working on, the preview link or screenshots.

Don't forget to hit that green save button whenever you've changed the code to what you want. Here's what that button would look like:

27-11-93007-83797

 

Let us know how you do with the changes.

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Sandra45MJ
Explorer
79 0 9

Thank you so much Lilith for your elaborate answer. However, it seems like I'm still having trouble, as the icon isn't appearing. Please find the screenshot of the code after I've saved it.

 

Screenshot 2021-08-29 at 15.14.39.png

Lilith
Shopify Staff
603 73 185

 @Sandra45MJ  thanks so much for the screenshot!

From your image I picked this out:

 

06-51-76525-23988

 

 

What I'm seeing here is that your theme is extraordinarily modified and missing many files.

This would be why it may not be working.

The guide you have depends on the files and assets of a theme to listen to the instructions of the code you paste in. If a file or asset is missing, then the theme won't be able to follow the directions of the code you paste because it won't be able to find the files or assets that the code needs to function.

In this case, I highly recommend that you download a fresh new copy of the Debut theme and try this out.

If it works on a new copy (full copy with all files brand new), then this means that you have a theme that is too modified to work with the guide you have.

This means you can use the new Debut copy instead or you can hire out some help from a Shopify Expert (partner) to help you custom build your site.

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Sandra45MJ
Explorer
79 0 9

Thank you so much.

I'm not sure how this could have happened. But I will try downloading a new copy. Does this mean that all code modifications will be lost and I will have to upload my products again?

Lilith
Shopify Staff
603 73 185

@Sandra45MJ it could happen if an app replaced the structure of the theme, maybe someone changed some code or it may have happened by accident.

Eitherway, downloading a new copy and testing that out will be the best way to see if that was what happened. If there are a lot of customizations you want to keep in your theme, you can certainly see if you can get a partner to rebuild it for you or just have them add that wishlist icon for you in a different way.

No need to upload products again, think of the theme as your store's outfit. Changing an outfit won't change the inner workings of the store, it will only change the way it looks on the outside. Everything you change in the admin will be there, the theme is the only thing that will change.

Keep me posted on how the new theme works with your wishlist icon guide!

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog