Customising the announcement bar

Solved
Shopify Partner
3 0 1

Hi,

I am using minimal theme and the announcment bar has a limit to the number of characters you can use. This leaves an empty space between the text and the shopping cart. 

I would like to utilize this space to add a phone number and email.

My question is where can I find the code to edit this? Its not immediately obvious in the CSS. 

 

Thank you. 

1 Like
New Member
2 0 0

Did you find out ? 

0 Likes

Success.

New Member
24 4 1

@DavidB1 - Look for the following classes in your theme.scss file and update the width %'s as necessary to achieve a longer text length (currently 33.3333% & 66.6666% respectively):

 

.header-bar__left

.header-bar__right

 

1 Like
Highlighted
New Member
2 0 0

unfortunately I could not find theme.scss. Do you mean Theme.liquid? if it is, do i need to look for .header-bar_left and .header-bar_right classes or i have to write down by myself ? 

0 Likes
Shopify Partner
3 0 1

Thank you Cascasia, 

 

I gave up on that a year ago but now I know. Tested and works. 

 

David. 

0 Likes
Shopify Partner
3 0 1

Hi azberg510,

 

You might have an older version of Minimal? Try downloading the latest it should have theme.scss.liquid. 

 

What cascadia said works. At line 919 and below, the bar is shared 33.33% and 66.66% so I changed them both to 33. 

 

I then went to header.liquid and added a div and it works even without then giving it a 33 of its own though im sure its best practice to do so. 

0 Likes
Astronaut
835 95 178

@azberg510 -- This fix is probably specific to Minimal. I don't know if that's the theme you're using. If it's not, you can't just copy and paste code in because every theme is different. Not only would you possibly not have a theme.scss.liquid, all of your class names are likely different so you're not going to be able to reference them the same way. Could you post your store link and what exactly you'd like to do to your announcement bar?

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
24 4 1

@azberg510 - Good question.  The theme.scss is considered an asset and as such is nested under "Assets" in the code editor.  You said you were using "Minimal"  in your initial post (cc: @Ninthony ) so the file should be there unless it was manually removed (would highly doubt that would be the case).  Let us know if you can find it under assets and if not, pass along your store URL and I can take a peek.

 

If this answers your question, please mark this as solved ;)

0 Likes