Change arrows?

[Ryan1998]

Hello, can anyone help me please? Im looking to change the arrows on my page and unsure how.

url: https://errival.com/products/test 

From this:

To this: 

[theycallmemakka · Accepted solution]

Hi @Ryan1998 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
    .accordion .summary__title+.icon-caret {
        height: 10px;
    }

    summary .icon-caret {
        height: 10px;
        top: unset;
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.product__accordion  svg.icon-caret, .header__menu-item  svg.icon-caret').forEach(svg => {
            const newSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            newSvg.setHeight= "10px";
            newSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
            newSvg.setAttribute("fill", "#000000");
            newSvg.setAttribute("viewBox", "0 0 512 512");
            newSvg.setAttribute("class", "icon icon-caret");
        
            const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
            title.textContent = "ionicons-v5-b";
            newSvg.appendChild(title);
        
            const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
            polygon.setAttribute("points", "64 144 256 368 448 144 64 144");
            newSvg.appendChild(polygon);
        
            svg.replaceWith(newSvg);
        });
    });
</script>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[Ryan1998]

👌