How to place a banner gif in homepage? HELP

Highlighted
Tourist
18 0 1

I would like to place a gif image i've made just bellow my sliders in homepage and in product page as well, i've read a help from Shopify where it says to add the file first to assets, but then from there what should i do? I have my sliders from my theme very well placed i'm not trying to make a slider or banner for sliders, i just want add a gif image of my own, sorry for my english, i hope somebody can understand what i say :) 

Thanks.

0 Likes
Highlighted
New Member
5 0 0

Hey Liv!

First off, absolutely no need to apoligize for your English - speaking as someone whose first and second language is English, I thought your grammar was spectacular :).

So, I've taken a bit of a gander into adding GIF's to your shopify theme, and you're right - you can't add them to the theme directly. From what I can tell, adding the GIF to your homepage requires a bit of coding so bare with me - we'll walk through this together.

I am paraphrasing this help guide in case you would like to follow along. Here (at least in my humble opinion) are the steps you need to take :):

Step One: Go to the 'theme' section of your store (Online Store < Theme)

Step Two: Click the '...' and select Edit HTML/CSS from the drop down menu. From here, click 'Assets'.

Step Three: Add the 'asset' you would like, in your case the GIF you were looking to add :)

Step Four: Command F (or shift+f) if you're using a PC is your best friend. Once you're in the liquid.theme, replace image code with your .gif and voila, you should be good to go!

In case you're having trouble making this work or, like me, don't really understand code I would suggest using a free shopify app that would cut out the middle-man and get you up and running in no time! Uploadery gives you a 30 day free trial, so it should be a great starting point :-).

I really hope that I was able to help and really look forward to seeing the .gif once it's up and running - especially if it's of a cat ;).

Best,

Ben.

0 Likes
Highlighted
Tourist
18 0 1

Thank you very much :) this was a nice answer!

But let's say what i'm trying to do is something beyond adding a image to a product, let's say i'm trying add a image in that space blank just bellow the products area in where that app shows in that video for example, because in my website front page and product page have a big blank area just bellow sliders and the first item, then come a big blank area, and i wanted to use a gif in there :) then it seem alot more difficult because there is nothing, so no image to replace, i read somewhere this page is the index.liquid if it is true, then i just need to know what line to include in that page in product.liquid as well. 

Thanks :)

0 Likes
Highlighted
Tourist
3 0 1

Hey there Ben or Shopify haha

I was wondering, how would we do this in 2020? Shopify a changed their settings a little bit.

0 Likes