Creating a Typewriter Banner Section in Shopify
The provided code defines a Shopify section that creates an engaging banner featuring a typewriter animation. This section is designed to enhance the visual appeal of a website by displaying dynamic text that simulates the effect of typing. The banner includes customizable settings for background images, text colors, button styles, and typing speed, allowing store owners to tailor the appearance to match their brand identity. The use of CSS for styling and JavaScript for the typewriter effect ensures a smooth and interactive user experience.
Prefer Video?
Enjoy, otherwise read on!
Add our Styles
First we can create a new file in our 'sections' directory. I'm going to call mine 'typewriter-banner.liquid'. Then we can paste the following styles at the top of the file:
<style>
.amazing-banner {
margin: 0;
padding: 0;
position: relative;
height: 70vh;
overflow: hidden;
}
.amazing-banner .background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("{{ section.settings.background-image | image_url }}");
background-size: cover;
background-position: center;
display: block;
}
.amazing-banner .background-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.amazing-banner .content {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: white;
text-align: center;
padding: 0 20px;
}
.amazing-banner h1 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
.amazing-banner button {
padding: 12px 24px;
font-size: 1.5rem;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.amazing-banner button:hover {
background-color: #2779bd;
}
@media (min-width: 768px) {
.amazing-banner h1 {
font-size: 3rem;
}
}
@media (min-width: 1024px) {
.amazing-banner h1 {
font-size: 3.75rem;
}
}
@media (max-width: 768px) {
.amazing-banner h1 {
font-size: 2rem;
}
.amazing-banner button {
padding: 10px 20px;
font-size: 1rem;
}
}
</style>
You'll notice in our styles that we are referencing a section setting: "background-image: url("{{ section.settings.background-image | image_url }}");" which will allow the end user to select an image in the theme editor to use. More on this later.
Add our Liquid Code
Now with our styles in place we are ready to paste in our Liquid/HTML below:
<div class="amazing-banner">
<div class="background-image"></div>
<div class="content">
<h1 id="typing-text" style="color: {{ section.settings.text-color }};"> </h1>
<button id="cta-button"
style="background: {{ section.settings.button-color }}; color: {{ section.settings.button-text-color }}">
{{ section.settings.button-text }}
</button>
</div>
</div>
Again we are referencing a few more section settings that will allow our merchant to customize the color of our text and button colors. Before this section uses our typewriter effect, we need to paste in our JavaScript below.
Adding our JavaScript to Achieve 'Typewriter' Effect
Immediately below our Liquid code, we need to paste in the following:
<script>
document.addEventListener('DOMContentLoaded', () => {
const typingText = document.getElementById('typing-text');
const ctaButton = document.getElementById('cta-button');
ctaButton.addEventListener('click', function () {
window.location.href = '/collections/{{ section.settings.button-link }}'
})
const texts = [
"{{ section.settings.first-text }}",
"{{ section.settings.second-text }}",
"{{ section.settings.third-text }}",
];
let textIndex = 0;
let charIndex = 0;
let isDeleting = false;
let typingSpeed = {{ section.settings.typing-speed }};
function typeWriter() {
const currentText = texts[textIndex];
if (isDeleting) {
typingText.textContent = currentText.substring(0, charIndex - 1) + '\u00A0';
charIndex--;
} else {
typingText.textContent = currentText.substring(0, charIndex + 1) + '\u00A0';
charIndex++;
}
if (!isDeleting && charIndex === currentText.length) {
isDeleting = true;
setTimeout(typeWriter, 2000); // Wait before starting to delete
} else if (isDeleting && charIndex === 0) {
isDeleting = false;
textIndex = (textIndex + 1) % texts.length;
setTimeout(typeWriter, 1000);
} else {
setTimeout(typeWriter, typingSpeed);
}
}
typeWriter();
});
</script>
There is quite a bit going on in this code. First we are setting an event listener for when our CTA button is clicked, and navigating to the correct collection page.
Then we are defining our 3 text lines in an array which are what the typewriter will cycle through each one.
Then we have our logic to "type" out the line and then upon completion, "delete" the characters one at a time in the reverse order. Essentially this is a recursive function that will repeatedly type characters one by one, and then delete them one by one while cycling through the three different lines of text.
The three lines of text as well as the speed of the typing are customizable in the theme editor. But first we need to add our schema!
Adding our Section Schema
before any of this code will work we need to make sure we can add it in the theme editor, as well as define all of these settings that we are referencing in our code. Below the JavaScript we can paste:
{% schema %}
{
"name": "Typewriter",
"settings": [
{
"type": "image_picker",
"id": "background-image",
"label": "Background Image"
},
{
"type": "text",
"id": "first-text",
"label": "First Text",
"default": "Welcome to Our Amazing Website"
},
{
"type": "text",
"id": "second-text",
"label": "Second Text",
"default": "Discover Incredible Features"
},
{
"type": "text",
"id": "third-text",
"label": "Third Text",
"default": "Join Us Today!"
},
{
"type": "color",
"id": "text-color",
"label": "Text Color",
"default": "#fff"
},
{
"type": "color",
"id": "button-color",
"label": "Button Background Color",
"default": "#000"
},
{
"type": "color",
"id": "button-text-color",
"label": "Button Text Color",
"default": "#fff"
},
{
"type": "text",
"id": "button-text",
"label": "Button Text",
"default": "View Products"
},
{
"type": "collection",
"id": "button-link",
"label": "Button Link To"
},
{
"type": "number",
"id": "typing-speed",
"label": "Typing Speed (ms)",
"default": 50
}
],
"presets": [
{
"name": "Typewriter"
}
]
}
{% endschema %}
After saving we should now have a new section we can add in the theme editor called "Typewriter" which will give us customizable options.
Conclusion
In conclusion, this Shopify section code not only adds a visually striking element to a website but also engages visitors with its unique typewriter animation. By leveraging customizable settings, store owners can easily modify the banner to fit their specific needs, making it a versatile addition to any online store. The combination of aesthetic design and interactive features helps to create a memorable user experience, encouraging visitors to explore the site further and ultimately enhancing conversion rates.
