How to change browser color on mobile with Minimal theme ?

Fuad
New Member
2 0 1

Hello,

When you customize the theme and go to "Colors", you see under "Buttons" there is "Primary buttons and links", if you change it to any color it will change as well the browser color on mobile android (it shows the SSL green lock but the whole browser bar is colored)

I want the buttons to be red but then the browser changes into red too! and this will reduce my sales conversion as some customers will think that's not secure site since red is a bad sign in their eyes lol and I want it to stay white color.
so please how can I change the button colors without changing the mobile browser color ?

Thank you

 

Replies 5 (5)
Jason
Shopify Expert
10440 169 2081

Hey Fuad,

If the colour is clashing you'll need to manually change it something else.
It's a pretty simple edit. Jump into the edit html/css section (customize) for your theme and find theme.liquid. In that file will be a line of code that looks like this:

<meta name="theme-color" content="{{ settings.color_primary }}">

^ That's around line 30 or so.

You could change that line to be:

<meta name="theme-color" content="#339966">

Change the content value to whatever hex colour code you like.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.
Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.
★ http://freakdesign.com.au ★
Fuad
New Member
2 0 1

Thank you very much! yes it worked

cheers

joshbgood686
New Member
1 0 1

this doesn't work please help

nikofernandez
New Member
1 0 1

In your theme.liquid line 7

 

<meta name="theme-color" content="{{ settings.color_button }}">

 

change it to

 

<meta name="theme-color" content="#fff">