Add cart icon to CTA (Add to cart) button in ride theme

[egyptrasures]

I want to add a cart icon to my add-to-cart button on the Ride theme. all other discussions I saw about this show the solution for other themes, and it does not work here.

Any help would be appreciated.

[Weaverse]

Hi there! This is Paul from the Weaverse team. 😊

To add a cart icon to the "Add to Cart" button in the Ride theme, follow these steps:

1. Go to your Shopify admin and navigate to Online Store > Themes.

2. Locate the Ride theme, click on Actions, and select Edit code.

3. In the file list on the left, open the Snippets folder and click on the card-product.liquid file.

4. Find the button with the class quick-add__submit button button--full-width button--secondary. (it might slightly differ in your theme)

5. Add the cart icon by inserting a span element inside the button element:

<button
  ...
>
  <span class="icon icon--cart"></span>
</button>

1. Save your changes and refresh your storefront to see the updated "Add to Cart" button with the cart icon.

[egyptrasures]

I tried doing this and it didn't work. do I need to upload a cart icon to my files?

Can you please elaborate? Also I attached a picture, is this where I need to write the code?

[BSS-Commerce]

Hi @egyptrasures 

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[egyptrasures]

www.egyptreasures.com (no password)

[BSS-Commerce]

Hi @egyptrasures 

Please follow these steps:

- Go to Themes => Edit Code

- Open the buy-buttons.liquid file and find the following code:

product-form__submit button button--full-width button--secondary

- Then, please add the following cart icon code before the <span> tag

<img src="https://img.icons8.com/sf-regular/30/AA5725/shopping-cart.png" alt="NULL">

- AA5725 in the image link is the color code of the Add to cart text in the button

+ Before:

+ After:

We hope this can help you.

[egyptrasures]

yes it did. thanks

[BSS-Commerce]

Hi @egyptrasures 

We're happy to see that our suggestion worked for you. Can you kindly give us a like and mark it as a solution so other people can refer to it? Thanks in advance.

[fadi_yousif]

Hi @egyptrasures 

I created a tutorial for this, not specifically tailored to the Ride theme, but you may find it helpful: https://youtu.be/3Nd-C18cbes?si=VcaGycvSshkpv76c