Skip to content

Reggie Beatz Hub (Formely Media) | Services & Products for Music Producers & More

Mavic Phantom Drone

Imaging Above Everything

How to Add Price + Icon to the Add to Cart Button in Shopify

How to Add Price to the Add to Cart Button in the Dawn Theme

Got it. I’ll incorporate the new instructions into your blog post. Here’s the revised version:

Hello everyone,

How to Add Price to the Add to Cart Button in the Dawn Theme + Icon

In this tutorial, we’ll guide you through enhancing the “Add to Cart” button in Shopify’s Dawn theme by adding the product price and a shopping cart icon using FontAwesome. We will compare the original and modified code snippets, explain the differences, and provide detailed, step-by-step instructions to implement these changes.

Step-by-Step Tutorial

Step 1: Access Your Shopify Theme Code

Go to Your Shopify Admin Panel:

  1. Log in to your Shopify admin panel.

Navigate to Themes:

  1. Go to Online Store > Themes.

Edit Code:

  1. Find the Dawn theme (or the theme you are using) and click Actions > Edit code.

Step 2: Add FontAwesome to Your Theme

Open theme.liquid File:

  1. In the code editor, open the theme.liquid file. You can find this file under the Layout folder.

Add FontAwesome CDN:

  1. In the <head> section of theme.liquid, add the following line to include the FontAwesome library:
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  1. Place this line before the closing </head> tag.

Save Your Changes:

  1. After adding the line, click Save to apply the changes.

Step 3: Modify the card-product.liquid File

Locate the card-product.liquid File:

  1. In the code editor, find the card-product.liquid file. This file is located under the Snippets folder.

Search and Replace Code:

  1. Once the card-product.liquid file is open, search for the following code by pressing Command + F (on Mac) or Ctrl + F (on Windows):
   {{ 'products.product.choose_options' | t }}
  1. Replace the found code with the following modified code to add the product price and a shopping cart icon:
   <i class="fa fa-shopping-cart" aria-hidden="true"></i> {{ card_product.price | money }}

Save Your Changes:

  1. After replacing the code, click Save to apply the changes to your theme.

Step 4: Verify the Changes

Check the Frontend:

  1. Visit your storefront and navigate to a product page.
  2. Ensure that the “Add to Cart” button now displays the product price along with the shopping cart icon.

Conclusion

By following these steps, you can enhance the “Add to Cart” button in your Shopify store’s Dawn theme to include the product price and a shopping cart icon. This customization not only improves the user experience but also provides more information at a glance.

Feel free to implement these changes in your own store. If you encounter any issues or have further questions, don’t hesitate to reach out for support. Happy coding!