Add new basket to my store

sumnb0011
Excursionist
14 0 4

Hello,

I am using the Debut Shopify theme. www.popcycleco.com 

I am trying to add a new basket icon to my store - I have added the SVG file to my files.

How do I add the new basket to my store? I added it into line 211 on header.liquid and removed the old code but this just removed the basket from my page.

The SVG code is below:

<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 100 100"><defs><style>.cls-1{fill:none}.cls-2{fill:#010101}</style></defs><path class="cls-1" d="M32.41 37V16.14c0-6.26 4.65-11.33 10.39-11.33h14.4c5.75 0 10.4 5.07 10.4 11.33V37"/><path class="cls-2" d="M71 36.48h-5.35V14.73c0-4.9-3.65-8.88-8.14-8.88h-15c-4.5 0-8.16 4-8.16 8.88v21.75H29V14.73C29 6.6 35.05 0 42.51 0h15C65 0 71 6.6 71 14.73z"/><path class="cls-1" d="M11.58 34.93h76.85v60.26H11.58z"/><path class="cls-2" d="M92.71 100H7.29V31.38h85.42zm-80-5.85h74.63V37.23H12.66z"/></svg>

Thanks 

KetanKumar
Shopify Partner
16096 1771 5942

@sumnb0011 

sorry for this is 

can you please share your header code so i will check and update code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
sumnb0011
Excursionist
14 0 4
Hello,
 
Thanks for your response - here is the code from header.liquid
 
<div class="header-container
            drawer__header-container
            nav-{{ section.settings.navigation_type }}"
     data-section-id="{{ section.id }}" data-section-type="header-section" data-template="{{ template.name }}">
    
      <!-- Header -->
 <header class="site-header" role="banner">
<div class="{% if section.settings.navigation_wrapper == 'fluid' %}wrapper-fluid{% else %}wrapper{% endif %} header-wrapper">
          
          <!-- left icons -->
          <div class="nav-containers nav-container-left-icons">
            <ul class="inner-nav-containers">
              <li class="site-nav__item site-nav--open">
                <a href="" class="site-nav__link site-nav__link--icon js-drawer-open-button-left" aria-controls="NavDrawer">
                  <span class="icon-fallback-text">
                    <span class="fas fa-bars fa-fw" aria-hidden="true"></span>
                    <span class="fallback-text">{{ 'general.drawers.navigation' | t }}</span>
                  </span>
                </a>
              </li>
              {% if shop.customer_accounts_enabled %}
                <li class="site-nav__item {% if section.settings.navigation_type != "hidden" %}large--hide {% endif %}">
                  <a class="site-nav__link site-nav__link--icon" href="/account">
                    <span class="icon-fallback-text">
                      <span class="fas fa-user fa-fw" aria-hidden="true"></span>
                      <span class="fallback-text">
                        {% if customer %}
                          {{ 'layout.customer.account' | t }}
                        {% else %}
                          {{ 'layout.customer.log_in' | t }}
                        {% endif %}
                      </span>
                    </span>
                  </a>
                </li>
              {% endif %}
            </ul>
          </div>
          
          <!-- Logo -->
          <div class="nav-containers nav-container-logo">
            <ul class="inner-nav-containers">
              
                {% assign image_size = section.settings.height_logo | prepend: 'x' %}
                {% assign image_size_mobile = section.settings.height_logo_mobile | prepend: 'x' %}
              
{% if template.name == 'index' %}
                <h1 class="site-header__logo" itemscope itemtype="http://schema.org/Organization">
              {% else %}
                <div class="site-header__logo" itemscope itemtype="http://schema.org/Organization">
              {% endif %}
                <a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">
                {% if section.settings.inverted_logo and template.name == 'index' or template.name == 'collection' or template.name == 'article' %}
                          <img class="logo inverted-logo" src="{{ section.settings.inverted_logo | img_url: image_size }}"
                            srcset="{{ section.settings.inverted_logo | img_url: image_size }} 1x, {{ section.settings.inverted_logo | img_url: image_size, scale: 2 }} 2x"
                            alt="{{ section.settings.inverted_logo.alt | default: shop.name }}"
                            itemprop="logo">
                        {% else %}
                      <span class="inverted-logo">{{ shop.name }}</span> 
{% endif %}
                    
{% if section.settings.default_logo %}
                        <img class="logo default-logo" src="{{ section.settings.default_logo | img_url: image_size }}"
                        srcset="{{ section.settings.default_logo | img_url: image_size }} 1x, {{ section.settings.default_logo | img_url: image_size, scale: 2 }} 2x"
                        alt="{{ section.settings.default_logo.alt | default: shop.name }}"
                    itemprop="logo">
                      
                      <img class="logo mobile-logo" src="{{ section.settings.default_logo | img_url: image_size_mobile }}"
                        srcset="{{ section.settings.default_logo | img_url: image_size_mobile }} 1x, {{ section.settings.default_logo | img_url: image_size_mobile, scale: 2 }} 2x"
                        alt="{{ section.settings.default_logo.alt | default: shop.name }}"
                    itemprop="logo">
                      {% else %}
                <span class="default-logo">{{ shop.name }}</span>
                            <span class="mobile-logo">{{ shop.name }}</span>
{% endif %}
                </a>
{% if template.name == 'index' %}
                </h1>
              {% else %}
              </div>
{% endif %}
            
            </ul>
          </div>
          
          <!-- Navigation menu -->
          <div id="AccessibleNav" class="site-nav nav-containers nav-container-menu">
            <ul class="inner-nav-containers">         
                {% for link in linklists[section.settings.main_menu_link_list].links %}
                  {% if link.links != blank %}
                  {% assign parent_index = forloop.index %}
                    <li
                      class="site-nav__item site-nav--has-dropdown {% if link.active %}site-nav--active{% endif %}"
                      aria-haspopup="true"
                      data-meganav-type="parent">
                      <a
                        href="{{ link.url }}"
                        class="site-nav__link"
                        data-meganav-type="parent"
                        aria-controls="MenuParent-{{ parent_index }}"
                        aria-expanded="false"
                        {% unless template.name == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
                          {{ link.title | escape }}
                          
                      </a>
                      <ul
                        id="MenuParent-{{ parent_index }}"
                        class="site-nav__dropdown {% if link.levels == 2 %}site-nav--has-grandchildren{% endif %}"
                        data-meganav-dropdown>
                        {% for childlink in link.links %}
                          {% if childlink.links != blank %}
                          {% assign child_index = forloop.index %}
                            <li
                              class="site-nav__item site-nav--has-dropdown site-nav--has-dropdown-grandchild {% if childlink.active %}site-nav--active{% endif %}"
                              aria-haspopup="true">
                              <a
                                href="{{ childlink.url }}"
                                class="site-nav__dropdown-link"
                                aria-controls="MenuChildren-{{ parent_index }}-{{ child_index }}"
                                data-meganav-type="parent"
                                {% unless template.name == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}
                                tabindex="-1">
                                  {{ childlink.title | escape }}
                                  <span class="fas fa-angle-right" aria-hidden="true"></span>
                              </a>
                              <div class="site-nav__dropdown-grandchild">
                                <ul
                                  id="MenuChildren-{{ parent_index }}-{{ child_index }}"
                                  data-meganav-dropdown>
                                  {% for grandchildlink in childlink.links %}
                                    <li{% if grandchildlink.active %} class="site-nav--active"{% endif %}>
                                      <a
                                        href="{{ grandchildlink.url }}"
                                        class="site-nav__dropdown-link"
                                        data-meganav-type="child"
                                        {% unless template.name == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless %}
                                        tabindex="-1">
                                          {{ grandchildlink.title | escape }}
                                        </a>
                                    </li>
                                  {% endfor %}
                                </ul>
                              </div>
                            </li>
                          {% else %}
                            <li{% if childlink.active %} class="site-nav--active"{% endif %}>
                              <a
                                href="{{ childlink.url }}"
                                class="site-nav__dropdown-link"
                                data-meganav-type="child"
                                {% if childlink.active %}aria-current="page"{% endif %}
                                tabindex="-1">
                                  {{ childlink.title | escape }}
                              </a>
                            </li>
                          {% endif %}
                        {% endfor %}
                      </ul>
                    </li>
                  {% else %}
                    <li class="site-nav__item{% if link.active %} site-nav--active{% endif %}">
                      <a
                        href="{{ link.url }}"
                        class="site-nav__link"
                        data-meganav-type="child"
                        {% unless template.name == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
                          {{ link.title | escape }}
                      </a>
                    </li>
                  {% endif %}
                {% endfor %}
            </ul>
          </div>
            
          <!-- right icons -->
          <div class="nav-containers nav-container-right-icons">
            <ul class="inner-nav-containers">
              {% if settings.position_currency_converter == "header" %}{% include "currency-selector" %}{% endif %}
              
              {% if shop.customer_accounts_enabled %}
              <li class="site-nav__item small--hide medium--hide {% if section.settings.navigation_type == "hidden" %}large--hide {% endif %}">
                <a class="site-nav__link site-nav__link--icon" href="/account">
                  <span class="icon-fallback-text">
                    <span class="fas fa-user fa-fw" aria-hidden="true"></span>
                    <span class="fallback-text">
                      {% if customer %}
                      {{ 'layout.customer.account' | t }}
                      {% else %}
                      {{ 'layout.customer.log_in' | t }}
                      {% endif %}
                    </span>
                  </span>
                </a>
              </li>
              {% endif %}
 
              {% if settings.search_enabled %}
              <li class="site-nav__item">
                <a href="/search" class="site-nav__link site-nav__link--icon js-drawer-open-button-top" aria-controls="SearchDrawer">
                  <span class="icon-fallback-text">
                    <span class="fas fa-search fa-fw" aria-hidden="true"></span>
                    <span class="fallback-text">{{ 'general.search.title' | t }}</span>
                  </span>
                </a>
              </li>
              {% endif %}
 
              <li class="site-nav__item">
                <a href="/cart" class="site-nav__link site-nav__link--icon cart-link js-drawer-open-button-right" aria-controls="CartDrawer">
                  <span class="icon-fallback-text">
                    <span class="fas fa-shopping-{{ settings.cart_icon }} fa-fw" aria-hidden="true"></span>
                    <span class="fallback-text">{{ 'layout.cart.title' | t }}</span>
                  </span>
                  <span class="cart-link__bubble animated infinite rubberBand {% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %} "></span>
                </a>
              </li>
            </ul>
          </div>
 
        </div>
      </header>
 
</div>
 
{% schema %}
  {
    "name": "Header",
"class": "header-section",
    "settings": [
      {
        "type": "image_picker",
        "id": "default_logo",
        "label": "Logo"
      },
 {
        "type": "image_picker",
        "id": "inverted_logo",
        "label": "Transparent header logo"
      },
 {
        "type": "range",
        "id": "height_logo",
        "label": "Logo height",
        "min": 30,
        "max": 70,
        "step": 2,
        "unit": "px",
        "default": 50,
"info": "Crop your logo image as close as possible for maximum size."
      },
 {
        "type": "header",
        "content": "Navigation"
      },
 {
        "type": "select",
        "id": "navigation_type",
        "label": "Navigation type",
"default": "center",
        "options": [
          { "value": "left",
            "label": "Left"
          },
          { "value": "right",
            "label": "Right"
          },
          { "value": "center",
            "label": "Center"
          },
          { "value": "center-logo",
            "label": "Logo center"
          },
          { "value": "hidden",
            "label": "Hidden"
          }
        ]
      },
      {
        "type": "select",
        "id": "navigation_wrapper",
        "label": "Navigation wrapper",
"default": "fluid",
        "options": [
          { 
"value": "",
            "label": "Default"
          },
          { "value": "fluid",
            "label": "Full"
          }
        ]
      },
 {
        "type": "link_list",
        "id": "main_menu_link_list",
        "label": "Menu",
        "default": "main-menu"
      },
 {
        "type": "header",
        "content": "Mobile header"
      },
 {
        "type": "range",
        "id": "height_logo_mobile",
        "label": "Logo height",
        "min": 20,
        "max": 50,
        "step": 2,
        "unit": "px",
        "default": 28
      }
    ]
  }
{% endschema %}
0 Likes
LamQSolutions
Tourist
9 2 2

Hi,

To change the cart icon, you can use my free app Custom CSS and add the following CSS

https://gist.github.com/lamqsolutions/95416f43b5cd79c7c2b2ce65c573b291

 Hope it helps!

Found my answer helpful? Please LIKE or Accept Solutions.
You may be interested in our app Scrolly Telling for creating scroll-based animations visually.
KetanKumar
Shopify Partner
16096 1771 5942

@sumnb0011 

can you please try this 

KetanKumar_0-1615196696432.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
sumnb0011
Excursionist
14 0 4

Hello, 

Unfortunately this did not work - do I need to remove the old basket code anywhere?

Thanks

0 Likes
LamQSolutions
Tourist
9 2 2

Hi @sumnb0011 

Did you try my solution above?

To change the cart icon, you can use my free app Custom CSS and add the following CSS

https://gist.github.com/lamqsolutions/95416f43b5cd79c7c2b2ce65c573b291

 Hope it helps!

Found my answer helpful? Please LIKE or Accept Solutions.
You may be interested in our app Scrolly Telling for creating scroll-based animations visually.
0 Likes
KetanKumar
Shopify Partner
16096 1771 5942

@sumnb0011 

add me on staff account so i will quick fix

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
sumnb0011
Excursionist
14 0 4

I have added you on staff - thank you

KetanKumar
Shopify Partner
16096 1771 5942

@sumnb0011 

great, thanks 

i have done this please check.

KetanKumar_0-1615378950095.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing