How to add a GIF on my store?

To illustrate some specific uses of a product or to liven up your store, it may be a good idea to add a GIF on your store.


Requirements


To add a GIF on your website, it should first be hosted in your WiziShop image manager or on an external server such as Giphy.com

  • See our tutorial dedicated to the image manager to learn how to download a GIF. Please note: the maximum weight allowed by the Wizishop system for GIFs is 200 Ko

    To add a GIF from an external server such as Giphy.com, search for the GIF you want to display on your store in the website's search bar then click on "Copy link" or copy the "GIF link" in your clipboard:

    mceclip2.png



     


You then paste this URL In the Source mode of the section where you want to add your GIF. We will see below how to access this mode in each section of your WiziShop administration space.
Adding your GIF is more or less the same in each section. In the Source mode add a text block and insert a GIF tag. The tag format is as follows:
 

<img src="url_of_image.gif" alt="Name of image" />



Elements in blue should be adapted to the GIF:

  • The image_url.gif corresponds to the GIF link copied above
  • You enter the image name yourself. A short description of the GIF is recommended.


How to add this GIF tag to your Source mode in:

  • Your product pages
  • Your category pages
  • Your blog articles
  • Your homepage
  • Your informative pages

     

How to add a GIF in your product page? 

 

Go to the section Products > Product list, then to the product page concerned. In the tab "Information", section "Long description", click on the button "Source" in the text block.

mceclip1.png


Insert you tag <img src="url_of_image.gif" alt="Name of image" />  as detailed above. Save your modifications (click on Save in the text block, then Apply the modifications at the top of your product page)


How to add a GIF in a category? 


In the section Products > Categories, select the category (star wheel Edit category):

mceclip2.png


Add a Text or Text image block:
 
mceclip3.png
 
Click on the button "Source"
 
mceclip4.png


Insert your tag <img src="url_of_image.gif" alt="Name of image" />  and save the modifications (button Save in the text block, then Publish on the website at the bottom of the page):
 
mceclip5.png
 


How to add a GIF in a blog article? 


In the section Content > Blog > Your articles, select the article in which you want to add your GIF:
 
mceclip6.png
 
Click on the button "Source" in the text block:
mceclip7.png
Insert your tag, Save then Publish the article on the blog.
mceclip8.png
 

How to add a GIF on the home page or an informative page? 


Adding a GIF in the sections using WiziBlocks (home page and informative pages) is done by way of the Wiziblock HTML Code:
 
mceclip9.png
 
Add a WiziBlock HTML code on your home page or informative page then insert your tag <img src="url_of_image.gif" alt="Name of image" /> as detailed above. 
 
mceclip10.png
 
Validate this modification by clicking in the left hand corner on "Save" and/or "Publish".
 
 
💬 Do not hesitate to contact your Business Coaches if you have any questions!