A user reports that their theme’s cart icon displays correctly in mobile view but disappears in desktop view, showing only the notification number. They also want to add a clickable “Contact” URL to the header before the “Search” link.
Solution Provided:
class="header__linklist list--unstyled hidden-pocket hidden-lap" and adding custom markup for both the cart icon and contact linkFollow-up Issues:
unless cart_type == 'page')The discussion remains technical, focusing on theme customization through direct code editing in the Shopify theme files.
Hi,
In mobile view, our theme shows a cart icon as follows:
However, in desktop view, the cart disappears, leaving only the notification number (“0”):
How can we:
Thanks in advanced.
I’m Kate from PageFly - Landing Page Builder, I’d like to suggest this idea:
Icon cart
Step 1: You go to Online Store → Theme → action → edit code
Step 2: You find class=“header__linklist list–unstyled hidden-pocket hidden-lap”
Step 3: In this class you find class = “header__linklist-item”
Step 4: You add this code:
Contact URL Before Search
Step 1: You search class=“header__linklist list–unstyled hidden-pocket hidden-lap”
Step 2: You search class= “header__linklist-item” for Contact page you coppy it
- Contact
Step 3: In this class you find class = “header__linklist-item”
you pass code copy before “Search”.
Hi Kate,
Many thanks for your detailed response. I have a couple of follow up questions.
When i search for class= “header__linklist-item” I find:
- {{- 'header.general.cart' | t | escape -}}
How should I incorporate the code you suggested, or is there a way I can edit this existing
{% unless settings.cart_type == 'page' %}
On the contact URL, i added the new list item, but the link isn’t clickable. The URL is correct, but it doesn’t click. Is there a reason for this?
Thanks,
Andre
Edit
@AndreHairRight , Sorry for the late reply
Please try to replace the code I highlighted in red with the code below:
