How To Add Customer Account Login Icon Shopify?

How To Add Customer Account Login Icon Shopify?

Hello everyone, and welcome back to our channel! Today, we have an exciting tutorial for all the Shopify enthusiasts out there. the process of activating and customizing the customer account icon on your Shopify store. From enabling the icon to adding a unique touch with CSS customization, this guide ensures you not only make it visible but also seamlessly integrate it with your store’s theme.

Enabling the Customer Account Icon

Let’s dive straight into the process. If, like us, you don’t see the customer account icon on your store, follow these steps:

  1. Log in to your Shopify development store and navigate to ‘/admin’.
  2. In the dashboard, click on ‘Settings’ in the left-hand menu.
  3. From the ‘Settings’ menu, select ‘Customer Accounts.’
  4. Currently, hidden? Click ‘Edit’ and check ‘Show link, login link in the header of online store and add checkout.’
  5. Save your changes.

Adding a Custom Account Icon

Now, let’s take it up a notch and make the customer account icon uniquely yours. Follow these steps:

  1. Visit SVGrepo.com to find an SVG icon of your choice. No affiliation – we just find it handy!
  2. Download your chosen SVG vector.
  3. Open the SVG file in your preferred code editor. In this tutorial, we’re using Visual Studio Code.
  4. Copy the SVG code. Customizing the Icon with CSS
  5. Head to your Shopify theme editor.
  6. Locate ‘account-icon.liquid’ in the theme code.
  7. Paste your copied SVG code.
  8. Save changes.

Now, let’s style it to perfection:

  1. Open ‘base.css’ and find the appropriate class (e.g., ‘account-icon-new’).
  2. Define the desired height and width (e.g., 3rem) for uniformity.
  3. Save your CSS changes.

Refresh your store, and witness the magic! Your customer account icon is now not only visible but also uniquely styled to match your theme.

Conclusion

There you have it – a comprehensive guide to adding and customizing the customer account icon on your Shopify store. We hope this tutorial has empowered you to enhance the visual appeal of your online storefront. If you enjoyed this video, don’t forget to subscribe for more valuable content.

5/5 - (8 votes)

About

Leave a Comment

Your email address will not be published. Required fields are marked *