How to Change View Cart Color in Shopify Easy Methods

There are 2 methods for changing the view cart button color in Shopify. Both methods can give your cart button a unique look, which is important if you’re aiming to improve your Shopify store’s conversion rate. These methods include:

1. Change View Cart color from Theme Customizer
2. Use Custom CSS to Change View Cart Color

Method 1: Change View Cart color from Theme Customizer 

In this method you can change the view cart button color using Theme Editor if your theme supports that. For that you have to navigate to the Shopify Admin > Themes > Customize and then go to the cart drawer, mini cart etc section and look for the color picker settings related to change the color of the view cart button. Follow these steps to change the View cart button.

Step 1: Navigate to Online Store > Themes > Customize

Step 2: Go to the cart page or cart drawer from the customizer.

Step 3: Look for the View cart button setting if it exists and change the color from the color picker. It will look something like this. Change the primary or secondary color based on the button used.

Step 4: Click Save.

Method 2: Use Custom CSS to Change View Cart Color

If your theme doesn’t have the Customizable setting in the Theme Customizer then you can use custom css to change the color of the View cart button. For that purpose you have to inspect element using browser dev tools of your choice and look for the unique identifier to target the view cart button. Then navigate to your theme.css file depending on the theme and add styling at the end of the file. Here is the final result, check the GIF below to see how it will look before we go through the steps.

Step 1: Navigate to Online Store > Themes > Edit code

Step2: Navigate to the cart drawer or minicart popup where this button exists or add this code if it does not exist.

  
    <a href="{{ routes.cart_url }}" class="custom-cart-button">View Cart</a>
  

Step 3: Navigate to base.css or theme.css file depending on the Shopify theme you are using. 

Step 4: Add this code at the end of the file eg.

    
        .custom-cart-button {
            background-color: #e11d48;
            color: #fff;
            padding: 10px 20px;
            display: inline-block;
            border-radius: 5px;
            text-decoration: none;
            width: 100%;
            margin-top: 10px;
            text-align: center;
        }
    

Step 5: Click Save.

For more tips, check our guide on how to add schema markup to Shopify.

Bottom Line 

Changing the color of the “View Cart” button can help it pop on your site and match your brand’s vibe. Whether you use the theme customizer or add a few lines of CSS, the process is quick and totally worth it. Still unable to do it yourself? Consult with our team and let us deal with this!