Add to Cart Border

[Ben_Sheps]

Does anybody know how to put borders around the "add to cart" button in the same way that the "play" button has them? When I hover over "play," my cursor becomes a hand, but it stays a cursor when hovering over "add to cart." That said, I can still click on "add to cart," and it works fine. It is just not optimal. Any help would be appreciated. It is important to know that this is for "product tuneboom track." Thanks.

[Vinsinfo]

@Ben_Sheps Please share your store URL to help you on this.

[GTLOfficial]

Hello @Ben_Sheps 
Please provide url and password of your website.

[BSSCommerce-B2B]

@Ben_Sheps,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head>

<style>
.product-form__tuneboom-item.product-form__item--submit {
    background-color: var(--color-btn-primary);
    box-shadow: 0 2px 3px #00000026;
    transition: all .3s cubic-bezier(.68,-.55,.27,2);
    height: 44px;
    text-align: center;
}
</style>

Result:

If it helps you, please like and mark it as the solution.

Best Regards 😊

[Ben_Sheps]

Wow! Thanks for the help. That is what I needed. Now, how do I get my mouse to hover over it and change from cursor to hand? It is clickable; it just does not look like it because my cursor is not actually changing to the hand. I do not have this problem with the play button.

[BSSCommerce-B2B · Accepted solution]

@Ben_Sheps, change the previous code like this

<style>
.product-form__tuneboom-item.product-form__item--submit {
    background-color: var(--color-btn-primary);
    box-shadow: 0 2px 3px #00000026;
    transition: all .3s cubic-bezier(.68,-.55,.27,2);
    height: 44px;
    text-align: center;
    cursor: pointer;
}
</style>

[Ben_Sheps]

You're a lifesaver.

[Ben_Sheps]

Last question: do you have a script to give a cart icon in the button like the play button does?

[BSSCommerce-B2B]

@Ben_Sheps, add this code before </body> in theme.liquid

{% if template == 'product' %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
const addToCartButton = document.querySelector('.product-form__cart-submit');
if (addToCartButton) {
    const cartIcon = `
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cart-icon">
        <path d="M6 6h15l-1.68 9.39a2 2 0 0 1-2 1.61H8a2 2 0 0 1-2-1.61L4 2H1" />
        <circle cx="9" cy="21" r="1.5" />
        <circle cx="19" cy="21" r="1.5" />
      </svg>
    `;
    const addToCartText = addToCartButton.querySelector('span[data-add-to-cart-text]');
    addToCartText.insertAdjacentHTML('beforebegin', cartIcon);
    addToCartButton.style.display = "flex"
    addToCartButton.style.gap = "4px"
}
})
</script>
{% endif %}

Result:

[ZestardTech]

Hello @Ben_Sheps 
Please share your store URL and password.
So that I will check and let you know the exact solution here.