Cart change on Pipeline

Highlighted
Tourist
3 0 2

Hi, I would like to change the "CART" on Pipeline to a cart icon. I am happy to use the same icon that is available on the mobile version of the site. Any suggestions on how to do that?

website- justshoesforkids.com

 

 

1 Like
Highlighted
Shopify Partner
7457 1032 2592

Hello, @Jodi_G 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your header section code
So I will check and provide a solution here.

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
1 Like
Highlighted
Tourist
3 0 2

Thank you! I appreciate the help. @KetanKumar 

Here is the code- 

 


{%- assign transparent_header = false -%}
{%- if template contains 'collection' and collection.image and section.settings.transparent_collection -%}
{%- assign transparent_header = true -%}
{%- elsif template contains 'article' and article.image and section.settings.transparent_article -%}
{%- assign transparent_header = true -%}
{%- elsif template contains 'blog' and section.settings.transparent_blog -%}
{%- assign transparent_header = true -%}
{%- elsif template contains 'page' and section.settings.transparent_page -%}
{%- assign transparent_header = true -%}
{%- elsif template == 'index' and section.settings.transparent_home -%}
{%- assign transparent_header = true -%}
{%- endif -%}

<style>
.header--transparent:not(.header--sticky):not(.header--stuck) .nav--desktop .main-menu>li>a{
color: {{ section.settings.transparent_text_color }};
}
.header--transparent:not(.header--sticky):not(.header--stuck) .icon{
fill: {{ section.settings.transparent_text_color }};
}
.header--transparent:not(.header--sticky):not(.header--stuck) .header-cart__bubble{
background-color: {{ section.settings.transparent_text_color | color_modify: 'alpha', 0.5 }};
}
</style>


<div class="header__wrapper{% if transparent_header %} header--transparent{% endif %}"
data-header-transparent="{{ transparent_header }}"
data-header-sticky="{{ section.settings.header_sticky }}"
data-section-id="{{ section.id }}"
data-section-type="header">

{% if section.settings.header_enable_account or section.settings.header_enable_search or section.settings.header_message != '' %}
<div class="info-bar showMobile">
<div class="wrapper text-center">

{% if shop.customer_accounts_enabled and section.settings.header_enable_account %}
<div class="header-account-link">
<a href="{{ routes.account_url }}">
<img src="{{ 'account.svg' | asset_url }}" alt="{{ 'customer.account.title' | t }}">
</a>
</div>
{% endif %}

{% if section.settings.header_message != '' %}
<div class="header-message uppercase{% if section.settings.header_enable_account or section.settings.header_enable_search %} header-message--crowded{% endif %}">
{% if section.settings.header_message_url != blank %}
<a href="{{ section.settings.header_message_url }}">{{ section.settings.header_message | escape }}</a>
{% else %}
{{ section.settings.header_message | escape }}
{% endif %}
</div>
{% endif %}

{% if section.settings.header_enable_search %}
<div class="header-search__wrapper">
<div class="header-search">
<form action="{{ routes.search_url }}" method="get" class="input-group search" role="search">
{% if section.settings.search_only_products %}<input type="hidden" name="type" value="product">{% endif %}
<input class="search-bar" type="search" name="q" title="{{ 'general.search.submit' | t }}">
<button type="submit" class="btn search-btn" aria-label="{{ 'general.search.submit' | t }}"></button>
</form>
</div>
</div>
{% endif %}

</div>
</div>
{% endif %}

<header class="site-header {{ section.settings.height }}" role="banner">
<div class="wrapper">
<div class="nav--desktop">
{% include 'nav-contents' with 'desktop' %}
</div>
<div class="nav--mobile">
{% include 'nav-contents' with 'mobile' %}
</div>
</div>
</header>
</div>


<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": {{ shop.name | json }},
{% if section.settings.logo %}
{% assign image_size = section.settings.logo.width | append:'x' %}
"logo": {{ section.settings.logo | img_url: image_size | prepend: "https:" | json }},
{% endif %}
"sameAs": [
{{ settings.social_twitter_link | json }},
{{ settings.social_facebook_link | json }},
{{ settings.social_instagram_link | json }},
{{ settings.social_pinterest_link | json }},
{{ settings.social_google_link | json }},
{{ settings.social_youtube_link | json }},
{{ settings.social_vimeo_link | json }},
{{ settings.social_tumblr_link | json }},
{{ settings.social_fancy_link | json }}
],
"url": {{ shop.url | append: page.url | json }}
}
</script>

{% if template.name == 'index' %}
{% assign potential_action_target = shop.url | append: "/search?q={search_term_string}" %}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": {{ shop.name | json }},
"potentialAction": {
"@type": "SearchAction",
"target": {{ potential_action_target | json }},
"query-input": "required name=search_term_string"
},
"url": {{ shop.url | append: page.url | json }}
}
</script>
{% endif %}

{% schema %}
{
"name": "Header",
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo image"
},
{
"type": "range",
"id": "logo_max_limit",
"min": 5,
"max": 495,
"step": 5,
"unit": "px",
"label": "logo width",
"default": 120
},
{
"type": "link_list",
"label": "Menu",
"id": "main_menu_linklist"
},
{
"type": "header",
"content": "Meganav image"
},
{
"type": "image_picker",
"id": "meganav_image",
"label": "Meganav image",
"info": "500 x 800px .jpg max"
},
{
"type": "url",
"id": "meganav_link",
"label": "Meganav Image Link"
},
{
"type": "header",
"content": "Sticky header"
},
{
"type": "select",
"id": "header_sticky",
"options": [
{ "value": "static", "label": "Default header"},
{ "value": "sticky", "label": "Sticky header"},
{ "value": "scroll", "label": "Sticky header only when scrolling up"}
],
"label": "Header behavior",
"default": "static"
},
{
"type": "header",
"content": "Transparent header"
},
{
"type": "checkbox",
"id": "transparent_home",
"label": "Enable on the home page",
"default": false
},
{
"type": "checkbox",
"id": "transparent_collection",
"label": "Enable on collections",
"default": false
},
{
"type": "checkbox",
"id": "transparent_blog",
"label": "Enable on the blog",
"default": false
},
{
"type": "checkbox",
"id": "transparent_article",
"label": "Enable on articles",
"default": false
},
{
"type": "checkbox",
"id": "transparent_page",
"label": "Enable on pages",
"default": false
},
{
"type": "color",
"id": "transparent_text_color",
"label": "Text and icons color",
"default": "#ffffff"
},
{
"type": "image_picker",
"id": "transparent_logo",
"label": "Alternate logo"
},
{
"type": "header",
"content": "Top Bar"
},
{
"type": "text",
"id": "header_message",
"label": "Announcement text",
"info": "45 characters or less recommended"
},
{
"type": "url",
"id": "header_message_url",
"label": "Announcement link"
},
{
"type": "checkbox",
"id": "header_enable_account",
"default": true,
"label": "Show account link in header"
},
{
"type": "checkbox",
"id": "header_enable_search",
"default": true,
"label": "Show search in header"
},
{
"type": "checkbox",
"id": "search_only_products",
"label": "Only search products"
}
]
}
{% endschema %}

1 Like
Highlighted
Shopify Partner
7457 1032 2592

@Jodi_G 

Thanks for code but sorry i can't cart if possible to this.

I need your store login details. Yes, I know your login details are confidential. For this second option, I have added your store to my Shopify partner account so I will check your code easily and manage what you think about it?

 

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