How to Change the Text Highlight Color in Shopify

text highlight shopify color

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.

highlight color

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!

Read more