Pipeline Theme - Cart Text To Icon

nicodemuynck
Tourist
9 0 0

Hi Shopify friends!

 

I've got my store almost ready: https://by-maem.myshopify.com/

However at the end of the menu I have my shopping cart (winkelwagen) but want this in an icon instead of the word.
Similar to this one here: https://www.zoenvoorgust.nl/cart


Anyone who can point me in the right direction?

0 Likes

@nicodemuynck I developed some custom code specifically for your case:


1. In your Shopify Admin go to online store > themes > actions > edit code
admin-page.png

2. In your theme.liquid file, find the </head> (press CTRL + F or command + F on Mac)
3. paste this code right above the </head> tag:

 

<script>
function customCart(){
var a = document.querySelector(`.cart-text-link`);

if (!a)return
var html = `<style>.custom-cart{
    width: 25px;
    height: 25px;
    margin-left: 16px;
    position: relative;
    top: 5px;
	fill: #656565;
}</style>

<svg aria-hidden="true" focusable="false" role="presentation" class="custom-cart icon icon-cart" viewBox="0 0 25 25"><path d="M5.058 23a2 2 0 104.001-.001A2 2 0 005.058 23zm12.079 0c0 1.104.896 2 2 2s1.942-.896 1.942-2-.838-2-1.942-2-2 .896-2 2zM0 1a1 1 0 001 1h1.078l.894 3.341L5.058 13c0 .072.034.134.042.204l-1.018 4.58A.997.997 0 005.058 19h16.71a1 1 0 000-2H6.306l.458-2.061c.1.017.19.061.294.061h12.31c1.104 0 1.712-.218 2.244-1.5l3.248-6.964C25.423 4.75 24.186 4 23.079 4H5.058c-.157 0-.292.054-.438.088L3.844.772A1 1 0 002.87 0H1a1 1 0 00-1 1zm5.098 5H22.93l-3.192 6.798c-.038.086-.07.147-.094.19-.067.006-.113.012-.277.012H7.058v-.198l-.038-.195L5.098 6z"></path></svg>
`
a.innerHTML = html
}

customCart();

</script>

 
Let me know whether it works.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Add a slider to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Contact: ezfycode@gmail.com.
nicodemuynck
Tourist
9 0 0

Hi Dante,

I've edited the file, however no change on the frontend.
https://by-maem.myshopify.com/

 

Screenshot 2020-08-20 at 09.30.52.png

0 Likes