thread Re: Formatting Logo Box on Header for Square Online website in Online Store

Formatting Logo Box on Header for Square Online website

kotlales — Mon, 15 Feb 2021 17:02:17 GMT

I cant figure out if the Logo box can be formatted to any other shape other than the square box. Our logo is more of a rectangle, so when I upload the logo file the system tries to shrink it to fit into a square box making logo really small. I cant figure out how to re-size the logo box.

Re: Formatting Logo Box on Header for Square Online website

AdamB — Tue, 16 Feb 2021 21:12:15 GMT

Welcome to the Community, @kotlales!

There is a slider you can use in the website editor to increase the logo size, although that won't change the basic shape that the editor anticipates your image to be. It looks like you've already increased that as far as it will go.

One other option you could try is turning off the logo and adding a section to the top of your pages that includes the logo image instead.

The logo image you have on there now looks rectangular - you could also edit the image to remove what space on the top and bottom so the image itself is rectangular instead of square. Replacing with one like that should look larger for you.

Re: Formatting Logo Box on Header for Square Online website

CodeAndTonicHQ — Wed, 02 Feb 2022 18:56:48 GMT

Adding my tutorial here as well.

The only way is to inject custom CSS by using javascript.
Here's a tutorial that shows how to do just that. I'll make sure to update the blog post to include a code snippet for editing the logo size as I'm just doing that for a client.

p.s. Feel free to get in touch if you'd like help with design edits.

Re: Formatting Logo Box on Header for Square Online website

TCSlaguna — Wed, 02 Feb 2022 19:29:08 GMT

Hi @AdamB

Do some templates allow logos to be bigger than others?

For example, how is the logo so big on: https://www.beasleys-orchard.com/

Was this accomplished by turning off the logo and adding a section to the top of the page that includes the logo image instead?

Re: Formatting Logo Box on Header for Square Online website

CodeAndTonicHQ — Wed, 02 Feb 2022 20:22:04 GMT

Was this accomplished by turning off the logo and adding a section to the top of the page that includes the logo image instead?

No. The HTML is following the standard logo header format. No hacks. They're using a different header layout in HEADER -> CUSTOMIZE. And using a logo with very wide aspect ratio.

Re: Formatting Logo Box on Header for Square Online website

TCSlaguna — Wed, 02 Feb 2022 23:30:18 GMT

Thanks @CodeAndTonicHQ

I will have to try this out on our website!