Use GIF images in your store

If you want to use .gif image files to show small animations on your website, you must upload the images as assets and edit your theme templates. If you try to upload them directly to the Customize theme page, the image will not be displayed.

Note

It is recommended that you use gif files as assets in theme templates only. Because they might not display correctly, Shopify does not support uploading gifs to use as product images.

As every Shopify theme is unique, these instructions can serve only as a guide.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Click Assets.

  4. Click Add a new asset to upload your .gif file.

  5. Choose the file, then click Upload asset. The uploaded file will be listed under Assets.

  6. Click theme.liquid to open the theme.liquid file for editing.

  7. Search for the default logo name (usually logo.png) in the file. Replace every instance with the name of the .gif file you uploaded as an asset.

  8. Click Save.

  9. View your website to make sure that the logo is displayed correctly.

Note

If you change your published theme, you must repeat this process for the new theme.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Click Assets.

  4. Click Add a new asset to upload your .gif file.

  5. Choose the file, then click Upload asset. The uploaded file will be listed under Assets.

  6. Repeat the asset upload process until you have uploaded all the slides for your slider.

  7. Click Customize theme to open your theme settings.

  8. Find your slideshow or slider controls and identify the default names of the slideshow or slider images used by the theme. Make a note of the names.

    These images are often called, for example, slide_1.jpg or carousel-item-1.jpg. Typically, they are listed in a section called Home Page or Homepage Slideshow.

  9. Check all the relevant boxes to:

* indicate that you want to show the slider on your website * indicate which slides you want to include in the slider

Gif image 1

  1. Click Save.

  2. Click Edit HTML/CSS to leave the Customize theme page and open the editor window again.

  3. Now you're looking for the template that includes the slider or carousel. The index.liquid file is a good place to start, but as every theme is unique, you might have to inspect other template files.

    As an example, the Supply theme's index.liquid uses {% include 'slider' %} to call in the slider:

    Gif image 2

    Because it is used in an include tag, you can find the slider code within your Snippets folder.

    Note

    If you need help finding your slider code, contact your theme's support team for clarification.

  4. You will need to find the specific code that controls which files are used within the slider.

    In the Supply theme, the slider images are called in using this line of liquid:

    {{ slide_img | asset_url | img_tag: slide_alt }}

    To allow the use of a .gif file as the first slide, you must use an if statement before that line, as seen here:

    Gif image 3

    This code tells the theme that the first slide in the slideshow is the .gif file you have uploaded into the assets folder. Because of the {% else %}, the rest of the slides will show as they normally would on the slider.

    Note

    Be careful not to confuse underscores ( _ ) with dashes ( - ).

  5. When you have inserted the required code for your slideshow, click Save.

  6. View your website to make sure that the carousel or slideshow is displayed correctly.

Note

If you change your published theme, you must repeat this process for the new theme.

Want to discuss this page?

Visit the Shopify Community