Quick Tricks #6: Add images to your homepage

Today’s Quick Tricks post offers another handy tip you can implement in seconds to make your event page more compelling.

What? Learn how to zhuzh up your event homepage with images, how to turn them into links, and how to make them accessible for all your customers.

Why? It’s an oft-cited myth that the human brain processes images 60,000 times faster than text, but there is evidence to suggest that presentations using visual aids are 43% more persuasive than those without. So whether you want to include a gallery of thumbnail photos from last year’s event, headshots of your speakers, or logos from your sponsors, it’s handy to know how to embed images in your event homepage.

Shopify's Tito event homepage with embedded sponsor logos
Image description: Shopify’s Tito event homepage with embedded sponsor logos

How? Under Customize > Homepage, you can add images to both the Short Description and Additional Info fields using Markdown. There a few ways you can do it:

  • The quick way
    ![Alt text](http://example.com/image.jpg)

  • The thorough way
    ![Alt text](http://example.com/image.jpg “Title”)

  • The linked way
    [![Alt text](http://example.com/image.jpg “Title”)](http://link.com)

All you need to do is copy one of the above lines of code, replace it with your own content, and you’re good to go. But in case you’re curious about what each element actually means, let’s break it down:

  • In each example, the exclamation mark at the beginning is the markdown signifier that this is an image. In the final example, we’re wrapping the exclamation mark inside our square brackets because we’re also including a link.
  • Alt text should describe the contents of the image, e.g. A kitten playing with a ball of wool. This is useful for visually impaired customers using screen readers, and it’s also what will be displayed if the image cannot load for any reason.
  • The image link points to where the image is hosted. There isn’t currently a way to upload your image to Tito (apart from to the homepage logo and banner fields), so if your image doesn’t already exist on the internet, you’ll need to use an image or file hosting service, then just right-click on the image and select “Copy image address”.
  • The title is different to alt text. This is only displayed in a popup when someone hovers their mouse over an image, rather than for accessibility purposes. It’s totally optional.
  • In the final example, there’s a second link after the image link itself. This follows the standard markdown link format of [link text](link URL). This final URL should be the site that you want to launch when a user clicks on the image.

There you have it! Another Quick Trick in the bag. We’ll see you in two weeks for another one. ?