Custom Cart SVG icon is showing on desktop web but not on mobile web

Custom Cart SVG icon is showing on desktop web but not on mobile web

Kasje
New Member
4 0 0

Hi - I am trying to change the cart icon of my shop to a custom SVG but the code below only seems to render on desktop but not on mobile and its driving me insane. I cannot seem to get it to work or find some mobile specific CSS in the shopify code. 

 

Hoping somebody can help me spot an issue either with the SVG code or with how i am thinking about this problem. 

 

<svg id="cart_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 91.8 73.9">
  <defs>
    <style>
      .cls-1 {
        stroke-width: 3px;
      }

      .cls-1, .cls-2, .cls-3 {
        fill: none;
        stroke: #3c4b3f;
        stroke-miterlimit: 10;
      }

      .cls-2 {
        stroke-linecap: round;
      }

      .cls-2, .cls-3 {
        stroke-width: 2px;
      }
    </style>
  </defs>
  <path class="cls-3" d="m30.3,7.2c0,12.8.2,25.7.3,38.5"/>
  <path class="cls-3" d="m66.8,61h-6.1v-2.4c0,0,.5-.6.5-.6l15.1-21.4-6.3-29.3H9.8c-.3-.2-.7-.6-1-1.3-.6-1.3-.3-3.1.9-4.1,1.1-1,2.5-.8,2.8-.8h59.3c.5,0,1.6.4,2.4,1.4.6.8.7,1.6.8,2.4.1,1,0,1.9-.1,2.4-1.4,0-2.8,0-4.2,0"/>
  <path class="cls-3" d="m61.3,58h-11.6s-2.3,0-2.3,0h-.3v-11h-13c-.3-.1-1.3-.5-1.9-1.6-.2-.3-.9-1.5-.4-2.8.6-1.5,2.3-1.9,2.4-1.9h13.4c.1,0,1.7.4,2.4,1.9.6,1.4,0,2.7-.2,2.8-.5.9-1.3,1.3-1.5,1.4-.3,0-.6,0-.9,0"/>
  <path class="cls-3" d="m65.5,51.8c-6.1,0-12.2,0-18.4,0"/>
  <polyline class="cls-3" points="47.1 58.4 47.1 60.2 46.1 61.2 38.7 61.2"/>
  <path class="cls-3" d="m76.7,36.5l12,5.6c.4.4.7.9,1,1.6.7,1.7.3,3.3,0,4.6-.1.6-.4,1.3-.7,2.1h-5.5"/>
  <path class="cls-3" d="m35.1,40.5v-3.7c.4,0,1.5,0,2.5-.8.9-.7,1.1-1.6,1.3-2.2.2-.6.3-1.6-.6-4.8-1.1-4.1-1.9-4.6-2.3-4.8-.7-.3-1.5-.3-2.3-.2-1.3.1-2.2.5-2.8.9,1,5,1.7,8.6,1.9,9.9,0,.2.1.8.5,1.3.5.6,1.3.7,1.8.7"/>
  <path class="cls-3" d="m29.8,25.3c-.4-.3-1.1-.8-2-1.1-.7-.2-1.5-.5-2.4-.2-1.4.5-2,2-2.1,2.3-.8,2.6-1.2,4.7-1.4,6.2-.1,1.1-.2,1.9.3,2.8.7,1.3,2.2,1.7,2.8,1.9h2.5l2.4-11.9"/>
  <path class="cls-3" d="m25.9,37.7c0,1.1,0,2.2,0,3.4.2,0,1.7,0,2.5.9.5.7.5,1.5.4,2.5,0,.9-.1,1.8-.8,2.4-.9,1-2.3.9-2.6.9h-11.3c-.3,0-1.4,0-2.4-.8-.2-.2-1.2-1-1.3-2.4,0-.3-.1-1.6.9-2.6.8-.7,1.7-.8,1.9-.8,4,0,8,0,11.9,0"/>
  <path class="cls-3" d="m13.2,48.1v12.9H3.1c-.3,0-.8-.3-1.2-.7-.9-.9-1.1-2.3-.6-3.4.5-1.3,1.8-1.8,2.3-2,1.4-.6,2.3-.3,4.8-.1,1.1,0,2.6.2,4.5.1"/>
  <path class="cls-3" d="m4.4,54.1v-15.7c.2-1,.7-3.4,2.6-5.3.4-.4,1.4-1.3,2.8-2,1.8-.8,3.5-.9,4.4-.9,2.6,0,5.2,0,7.8,0"/>
  <line class="cls-3" x1="72.1" y1="42.7" x2="60.1" y2="31"/>
  <line class="cls-2" x1="56.9" y1="33.6" x2="62.8" y2="27.8"/>
  <circle class="cls-1" cx="26.7" cy="61.3" r="11"/>
  <circle class="cls-3" cx="27.2" cy="61" r="4.5"/>
  <circle class="cls-3" cx="79.3" cy="61" r="4.5"/>
  <circle class="cls-1" cx="79.3" cy="61" r="11"/>
</svg>
Replies 2 (2)

Kasje
New Member
4 0 0

For context this is the CSS under base.css for the icon itself 

.header__icon--cart .icon {
height: 30px;
width: 30px;
padding: 1px;
}

.header__icon--cart {
position: relative;
margin-right: -1.2rem;
}

and this is the code from header.liquid 

 

<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
{%- liquid
if cart == empty
render 'icon-cart-empty'
else
render 'icon-cart'
endif
-%}
<span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
{%- if cart != empty -%}
<div class="cart-count-bubble">
{%- if cart.item_count < 100 -%}
<span aria-hidden="true">{{ cart.item_count }}</span>
{%- endif -%}
<span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
</div>
{%- endif -%}
</a>

RahulJhamtani
Visitor
1 0 0

Hey @Kasje , I am facing the same issue. My cart icon renders on desktop website but not on mobile website. Can you help me with the solution if you found any?