Shopify Tutorial: Changing the colors of your share buttons with CSS
When it comes to your ecommerce store, you should be paying attention to even the smallest of details. Too many times I've seen an unfinished footer, links not being linked properly, and code missing so pages aren't being generated properly.
This usually happens when a business owner doesn't have the ample time they need to fully commit to the look of their site and I totally understand that. With that being said, I wanted to share a small little amount of knowledge on Shopify for those of you going at it alone.
While I'm no newbie to Shopify, I most certainly was at one time and I was forced to teach myself the ins and outs. Now, I totally love it and I wish I could hoard every single boutique owner out there for myself because I could spend every day designing. And it totally doesn't bother me to look at clothes all day - is that bad?
So, today I'm going to share with you the super simple steps it takes to change those nifty little product share tags on your product page.
Note that this is for the Minimal theme, both former & the current updated version with sections. If you are working with a different theme, I'd be more than happy to assist you. Just shoot me a quick email!
Also, we're going to dive into the css of your site which is where we style buttons, text, links, etc. I want you to be very careful of where you're changing things and what you're removing. If you aren't familiar with code, I highly encourage you to follow these steps thoroughly and by no means should you leave it open and unattended near a toddler. Even the smallest tweak can change your site COMPLETELY. It's also a smart idea to back your theme up beforehand just to be safe. There, I warned you. Be warned!
So here we go! I'll need you to login to your dashboard in Shopify and find your theme under "online store > themes." From there, ensure the theme you're working on has been backed up.
Now that you've backed up your theme and we're on the themes area of your dashboard, click the dropdown in the top right corner of the theme you're using. You can also click the image below to enlarge to see. From there, click "EDIT HTML/CSS" and proceed with caution, my friend.
Once we're in our HTML & CSS panel, type "css" in search box in the top left corner.
Now, click "theme.scss.liquid" and you'll see your general CSS area pop up! Click Control + F to bring up your search bar in the top right corner of the area and type in "fancy".
Now, you'll search for fancy and when you come across the items pictured below (click to enlarge), you'll pay close attention to those hex numbers (i.e.: #487322, etc) I've highlighted in red.
If you aren't sure of the colors you'd like your product sharing buttons to be on the product page, visit Color Hex and find a color you'd love. Then, copy and paste that color into each area I showed you above.
NOTE: Make sure you're not removing the "#" before each color. Otherwise, you won't notice the difference. You can either make each share button the same color, various colors, or even give them an ombre effect by altering the hex numbers ever so slightly.
Click save and admire your new changes!
Did you enjoy this tutorial? If so, let me know by leaving a comment and what type of tutorial you'd love to see next!