Shopify / Shopify Tutorials

How to Change the Text Highlight Color in Shopify

Change text highlight color shopify
Published 29 June 2022

On most Shopify themes, they don’t give you the option to change the text highlight color, which is bizarre! But anyway, it’s not hard to change and you can do it within 3 minutes.

Follow the guide below to see how to change the highlight text color.

Text color highlight

1. Go to your Shopify theme code

  1. Go to your Shopify dashboard
  2. Go to “Online store” > “Themes”
  3. Click on “Actions” > “Edit code”

2. Go to your “Styles.css.liquid” file

Search for styles in the search box then open up the file.

Style. Css. Liquid

3. Search for “::selection”

Type Command + F (mac) or Ctrl + F (Windows) and search ::selection

You need to find this code, it will look exactly like this but with a different color code:

::selection search on shopify

4. Change the color

You can either use your brand’s colors or you can use Adobe Color to find a nice color to use.

Replace the color code that is in the red box below, to your chosen color.

Color code

5. Click “Save”

Once you save the file, you’re done! Load up your store in a new browser tab.

Now you will see the changes that you have made with the text highlight color.

Text highlight

Final words

That’s all you need to do to change the color! Unfortunately, most Shopify themes don’t have the option on the theme settings page. So this is the best method to do it.

Let me know if you have any questions!

About Author

Will is a professional Ecommerce Shopify expert (7 years experience) & a professional Filmmaker/Video Editor (17 years experience). Now living between the Isle of Man & Brighton, UK. Highly experienced in Premiere Pro, DaVinci Resolve, After Effects, Shopify, WordPress & SEO. Owner of Teckers, Bounce Color, Stunt Camera Crew & more.

No Comments

    Leave a Reply