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

egyptrasures
New Member
4 0 0

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.

Replies 8 (8)

Weaverse
Shopify Partner
66 21 28

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.
Helping merchants build super unique, high-performance storefronts using Weaverse + Hydrogen.
Looking for Development & Agency partners.
If you find the answer helpful, give it a thumbs up!
Our App: Weaverse Hydrogen Theme Customizer
egyptrasures
New Member
4 0 0

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
Shopify Expert
3477 461 515

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.

 

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

egyptrasures
New Member
4 0 0

www.egyptreasures.com (no password)

BSS-Commerce
Shopify Expert
3477 461 515

Hi @egyptrasures 

Please follow these steps:

- Go to Themes => Edit Code

view - 2023-03-28T094314.925.png

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

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

view - 2023-03-28T094413.615.png

- 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:

view - 2023-03-28T094542.834.png

view - 2023-03-28T094538.933.png

+ After:

view - 2023-03-28T094604.593.png

view - 2023-03-28T094608.229.png

We hope this can help you.

 

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

egyptrasures
New Member
4 0 0

yes it did. thanks

BSS-Commerce
Shopify Expert
3477 461 515

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.

 

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

fadi_yousif
Shopify Partner
342 43 66

Hi @egyptrasures 

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