How do I use an animated gif for my logo?

Carol_Yeh
Tourist
13 0 2

My site theme is District, and I'm trying to use an animated gif as the logo. But everytime I upload it, it gets converted to a png. 

Does anyone know how to use an animated gif as the logo or part of the header?

Thanks,
Carol

Replies 7 (7)
Colin_OH
Shopify Partner
20 0 3

Have a look at this shopify documentation. This should help you out. 

https://docs.shopify.com/themes/customization/colors-images-and-video/use-gifs

PaulNewton
Shopify Partner
3385 219 646

The general answer to this is DON'T. It's right up there with blinking red text for links.

While this is overrideable by theme editing; Consider that if you do not have a strong design or UX background DO NOT use an animated logo for your ecommerce website unless you are also in one of these industries:

  • Animated Entertainment
  • Music
  • Childrens Toys|Entertainment
  • Video production
  • etc

 

Basically, if it is not understood why animated-logos are not used everywhere, that is an indication they should not be used. Even then it has to be understood how to use them properly.

Examples of ways to alienate customers:

  • restarts on every page load = annoyed users
  • distracts users from actual critical content = bottom line impacted
  • etc

 

If this is meant as some method of brand building, another plan is needed, there are other more effective ways to grow recognition.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
Jason
Shopify Expert
10438 168 2081

Regardless of whether the member above thinks this is a good idea or not, the question is still valid.

There's plenty of stores that have animated gifs for their logo, all with various degress of craziness or subtle animations. The takeaway from the post above is that you should be mindful of the negatives / drawbacks, and make an educated choice on what approach to take based on your demographic. If you're looking for a successful store that's embraced GIFs to the extreme - check out Shop Jeen.

To add the gif to the site you'd need to either:

  • edit the theme code directly, manually added the gif in place.
  • optionally edit the settings_schema.json file change the file name to a gif. Since you've already got to edit the code manually, this step is really not so important.

If you manually upload a new logo file to your assets you could edit theme.liquid changing this line:

<img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" itemprop="logo">

into something more like this:

<img src="{{ 'your-custom.gif' | asset_url }}" alt="{{ shop.name }}" itemprop="logo">

Don't make this change in the current theme. Make a copy and work only in the copy. This way if you break something you've still got the original version on hand.

Sidenote: You won't be able to use the gif at checkout, but that's probably not going to cause you any grief.

 

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 ★
Carol_Yeh
Tourist
13 0 2

Thanks Jason, very helpful.

 

Well aware of the potential hazards for using an animated gif. But we are constantly trying new things, and always testing usability. Appreciate the warnings :).

PaulNewton
Shopify Partner
3385 219 646

check out Shop Jeen

Fantastic example of how to do gifs right with proper context. I'll never hear that rihanna guitar riff the same again.

always testing usability

Double Fantastic.

 

 

To add animated logos to theme settings, be sure to read the above comments before preceding:

Demo Store: https://animatedimages.myshopify.com/blogs/customizations/100582342-animated-logo-theme-setting?pass... (April 2016)

 

This example is based on the launchpad theme individual themes will differ. ~(tilde) symbol = approximation

Duplicate the publish theme and work on the copy so there is a backup in case of ~bad things~

In the theme editor -> 'config' folder -> 'settings_schema.json'

Look for(or use find, ctrl+f) the word  'logo' in code similar to this(launchpad theme code*):

....

      {
        "type": "checkbox",
        "id": "use_logo",
        "label": "Use a custom logo?"
      },
      {
        "type": "image",
        "id": "logo.png",
        "label": "Shop logo",
        "max-width": 996,
        "max-height": 600,
        "info": "(should be less than 700 pixels wide)"
      },

....

*Different themes code will not match this exactly use best judgement and backups.

Now

  1. If being able to quickly change animated,non-animated is wanted.
    1. Copy that section
    2. Duplicate that code-part(!!!!!watch the commas ,
  2. Change ~checkbox id: 'use_logo' to 'use_animated_logo'
  3. Change ~checkbox label to~: "Use animated logo?
  4. Change '.png' to '.gif'  
  5. Change info to ~: '(animated images file extension .gif)'

In ~theme.liquid

Find 'logo' settings related code similar to:

....

<div class="logo">
{% if settings.use_logo %}
<h1><a href="/"><img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" /></a></h1>
{% else %}
{% if template == 'index' %}

....

If code was changed to use only gifs change "logo.png" to "logo.gif".

 

Otherwise use an elsif to show the animated logo when it's checkbox is on and the regular logo checkbox is not checked:

{% if settings.use_logo %}
	<h1><a href="/"><img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" /></a></h1>
{% elsif settings.use_animated_logo %}
	<h1><a href="/"><img src="{{ 'logo.gifv' | asset_url }}" alt="{{ shop.name }}" /></a></h1>
{% else %}

After saving all files in shopify edit the theme settings and upload the gif.

 

More advanced users can use radio buttons, still must use two uploads, instead of checkboxes,  or shudder mimetype manipulation.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
KannabisWear
New Member
1 0 0

So basically... you're saying although it can be Done it would distract the Users from the intended content + the experience would be shitty becuz Pages wouldn't load properly?

PerspectiveWeb
Excursionist
12 0 5

I used the video background app to fix this issue on my store. it costs 6.99 and you can replace any element on your website with a video. works really well