Change cart icon in lorenza theme

jasminsharp97 · ‎09-16-2024

I'm working in the Lorenza theme, and this is my store:

Password: chohme

I want to do is change the cart icon to a custom svg I have. How do I do that?

BSS-TekLabs · ‎09-16-2024

- Here is the solution for you @jasminsharp97
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<script>
window.addEventListener('load', function() {
    document.querySelector(".header__icon--cart .icon-header-button__icon .icon").innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="47.998" height="40.34"><g fill="#1a171b"><path d="M47.273 0h-6.544a.728.728 0 0 0-.712.58L38.63 7.219H.727a.727.727 0 0 0-.7.912l4.6 17.5c.006.021.019.037.026.059a.792.792 0 0 0 .042.094.747.747 0 0 0 .092.135.831.831 0 0 0 .065.068.626.626 0 0 0 .167.107.285.285 0 0 0 .045.029l13.106 5.145-5.754 2.184a4.382 4.382 0 1 0 .535 1.353l7.234-2.746 6.866 2.7A4.684 4.684 0 1 0 27.6 33.4l-5.39-2.113 13.613-5.164c.013-.006.021-.016.033-.021a.712.712 0 0 0 .188-.119.625.625 0 0 0 .063-.072.654.654 0 0 0 .095-.135.58.58 0 0 0 .04-.1.73.73 0 0 0 .033-.084l5.042-24.137h5.953a.728.728 0 0 0 0-1.455zM8.443 38.885a3.151 3.151 0 1 1 3.152-3.15 3.155 3.155 0 0 1-3.152 3.15zm23.1-6.3a3.151 3.151 0 1 1-3.143 3.149 3.155 3.155 0 0 1 3.148-3.152zM25.98 8.672l-.538 7.3H14.661l-.677-7.295zm-.645 8.75-.535 7.293h-9.328l-.672-7.293zM1.671 8.672h10.853l.677 7.3h-9.61zm2.3 8.75h9.362l.677 7.293H5.892zM20.2 30.5 9.175 26.17H31.6zm14.778-5.781h-8.722l.537-7.293h9.7zm1.822-8.752h-9.9l.537-7.295h10.889z"/><circle cx="8.443" cy="35.734" r=".728"/><circle cx="31.548" cy="35.734" r=".728"/></g></svg>`
})
</script>

document.querySelector(".header__icon--cart .icon-header-button__icon .icon").innerHTML = `your SVG icon`

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)

Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Dan-From-Ryviu · ‎09-16-2024

Hi @jasminsharp97

You can replace the default svg code in the icon-cart.liquid file with your svg code.

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

jasminsharp97 · ‎09-16-2024

How do I figure out my SVG code?

BSS-TekLabs · ‎09-16-2024

- Here is the solution for you @jasminsharp97
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<script>
window.addEventListener('load', function() {
    document.querySelector(".header__icon--cart .icon-header-button__icon .icon").innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="47.998" height="40.34"><g fill="#1a171b"><path d="M47.273 0h-6.544a.728.728 0 0 0-.712.58L38.63 7.219H.727a.727.727 0 0 0-.7.912l4.6 17.5c.006.021.019.037.026.059a.792.792 0 0 0 .042.094.747.747 0 0 0 .092.135.831.831 0 0 0 .065.068.626.626 0 0 0 .167.107.285.285 0 0 0 .045.029l13.106 5.145-5.754 2.184a4.382 4.382 0 1 0 .535 1.353l7.234-2.746 6.866 2.7A4.684 4.684 0 1 0 27.6 33.4l-5.39-2.113 13.613-5.164c.013-.006.021-.016.033-.021a.712.712 0 0 0 .188-.119.625.625 0 0 0 .063-.072.654.654 0 0 0 .095-.135.58.58 0 0 0 .04-.1.73.73 0 0 0 .033-.084l5.042-24.137h5.953a.728.728 0 0 0 0-1.455zM8.443 38.885a3.151 3.151 0 1 1 3.152-3.15 3.155 3.155 0 0 1-3.152 3.15zm23.1-6.3a3.151 3.151 0 1 1-3.143 3.149 3.155 3.155 0 0 1 3.148-3.152zM25.98 8.672l-.538 7.3H14.661l-.677-7.295zm-.645 8.75-.535 7.293h-9.328l-.672-7.293zM1.671 8.672h10.853l.677 7.3h-9.61zm2.3 8.75h9.362l.677 7.293H5.892zM20.2 30.5 9.175 26.17H31.6zm14.778-5.781h-8.722l.537-7.293h9.7zm1.822-8.752h-9.9l.537-7.295h10.889z"/><circle cx="8.443" cy="35.734" r=".728"/><circle cx="31.548" cy="35.734" r=".728"/></g></svg>`
})
</script>

document.querySelector(".header__icon--cart .icon-header-button__icon .icon").innerHTML = `your SVG icon`

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)

Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

jasminsharp97 · ‎09-16-2024

That worked, thank you so much!

BSS-TekLabs · ‎09-16-2024

Glad to help you. Have a good day.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)

Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

jasminsharp97 · ‎09-16-2024

One more thing - this svg is causing me problems; the stroke is wrong. Can you help me figure out what's wrong with this svg file?

</g>

<defs>

</clipPath>

</defs>

</svg>

Change cart icon in lorenza theme

Change cart icon in lorenza theme

Community Blog Articles