0

Add a responsive transitioning text banner to your Shopify theme

facebooktwittergoogle_plusredditpinterestlinkedinmail

Overview

In this article we are going to explore adding a responsive text banner that transitions on a set interval to your site.

You can see a working demo here of what we are building here. click here to see the demo

Intro

Many sites today are sporting a popular text-based banner message across the top of their site.
The code to implement this is relatively simple but we thought we might share how we tackle this
with a Shopify.

Getting started HTML

We need to start by creating an html list to store our messages.

Next let’s style it CSS

Now let’s create some css to style this list.
Screen Shot 2015-04-29 at 9.02.31 PM

Now let’s make it transition jQuery

Now we sprinkle in some javascript and jQuery to get things moving and we’re done!
Screen Shot 2015-04-29 at 9.02.40 PM

Final result

You can find a working example here on codepen where you can play with the settings a bit.
click here to see the demo

facebooktwittergoogle_pluslinkedinrssyoutube

Tim Matheson

Tim is a software engineer and computer software consultant based in Newport Beach, CA. He has worked with hundreds of companies implementing custom software-as-a-solution business administration tools. Tim's specialty is streamlining process using software for small to large businesses. When he's not saving the internet from dismal failure he enjoys riding his bike along the beach, and the occasional cup of coffee.

Leave a Reply

Your email address will not be published. Required fields are marked *