Support Center

How to add a paragraph of text to your site that changes on every page reload?

Last Updated: Feb 20, 2014 09:00AM EST

How to add a paragraph of text to your site that changes on every page reload?

This tutorial will show you how to add text to your site that is different every time a page is loaded.

We will use a set of 5 quotes as an example of this technique. When implemented you will see one of these 5 quotes. If you reload the page, a different quote will appear. Instead of quotes, you can of course use any other type of text.

Implementing this on your own site is very simple if you follow these few steps:

1. Put an HTML Snippet element on your page where you want the text that changes with every reload to appear.

2. Copy the following text into the HTML Snippet:

<div id="my_quotes" class="heading2" align="right"> </div>
var my_quotes = new Array();
my_quotes[0] = "<i>A cynic knows the price of everything and the value of nothing</i><br><b>Oscar Wilde</b>";
my_quotes[1] = "<i>We are what we repeatedly do. Excellence, then, is not an act, but a habit.</i><br><b>Aristotle</b>";
my_quotes[2] = "<i>Price is what you pay. Value is what you get</i><br><b>Warren Buffett</b>";
my_quotes[3] = "<i>Victory has a thousand fathers, but defeat is an orphan.</i><br><b>John F. Kennedy</b>";
my_quotes[4] = "<i>If you can’t explain it simply, you don’t understand it well enough</i><br><b>Albert Einstein</b>";
var random = Math.ceil (Math.random() * my_quotes.length) - 1;
$('my_quotes').set('html', my_quotes[random]);

3. Replace the text in orange with your own text.

For more advanced customization, you can edit or remove the HTML tags in the snippet.

Liquid error: undefined method `gsub' for nil:NilClass
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found