Cart 0

Animated logo theme setting

To add animated logos to your theme settings, be sure to read these comments before preceding:

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

Duplicate the published theme to work on that duplicated 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.

 

Advanced:

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

{{patch not found }}