While there are many factors that go into designing a Shopify page, there’s one element that very well may be more important than all the rest — the call-to-action (CTA) button.
Indeed, the whole point of the page is to persuade visitors to take a certain action, such as signing up for your newsletter or adding an item to their cart. All the effort it takes to write compelling copy, produce high-quality product photography, gather glowing customer reviews, etc. will be wasted if visitors can’t quickly figure out how to take the next step.
This is why you must make sure that your CTA button is highly noticeable. In this guide, we’ll show you how to go beyond the standard editing options available in your Shopify theme and add a custom call-to-action button using Shopify Liquid or Shogun.
You have a few different options for adding a custom call-to-action button to your Shopify store: you can use Shopify Liquid, Shogun’s Custom Elements feature, or the button element in Shogun’s visual editor.
Liquid is the open-source templating language that’s used to build Shopify themes. To demonstrate how Liquid works, we’ll go through the steps of using it to create an animated CTA button below.
As mentioned above, it’s important for your CTA buttons to stand out. An animation effect will really help grab the visitor’s attention, potentially leading to more conversions and sales.
Most themes don’t have a default option for animated CTA buttons, though — thankfully, Shopify Liquid gives you the flexibility to add just about anything you want to your store, including animation.
To access the Liquid code for your theme, simply follow these steps:
In the left sidebar of the code editor, open the “sections” folder and select “Add a new section”.
In this new file, insert the following code:
<div class="section-cta">
<a href="{{ section.settings.link }}" class="btn-animated">
<div class="btn-content">{{ section.settings.linktext }}</div></a>
</div>
{% schema %}
{
"name": "Call to action",
"settings": [
{
"id": "link",
"type": "url",
"label": "Button link"
},
{
"id": "linktext",
"type": "text",
"label": "Button text",
"default": "Click Here"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
The Liquid/HTML code here essentially acts as the structure for your CTA button and link. You’ll now need to add the styling and animation for your button with CSS code.
In the left sidebar of the code editor, open the “assets” folder and select “base.css” (alternatively, you could use the search bar in the left sidebar to find this file). Then, add the following code to “base.css”:
/*=============== Animated CTA ===============*/
.section-cta {
text-align: center;
}
.btn-animated {
width: 200px;
height: 50px;
display: inline-block;
position: relative;
background-color: #5C6AC4;
border-radius: 50px;
overflow: hidden;
cursor: pointer;
text-align: center;
z-index: 1;
&:before {
content: "";
position: absolute;
width: 140%;
height: 100%;
background-color: #FFFFFF;
transform: rotate(10deg);
top: -150%;
left: 20%;
transition: .3s ease-in-out;
}
&:after {
content: "";
position: absolute;
width: 140%;
height: 120%;
background-color: #FFFFFF;
transform: rotate(10deg);
top: 150%;
left: -20%;
transition: .3s ease-in-out;
}
&:hover {
background-color: #FFFFFF;
transition: 0s linear;
transition-delay: .3s;
}
&:hover:before {
top: -20px;
left: -20%;
transition: .3s ease-in-out;
}
&:hover:after {
top: 10px;
left: -23%;
transition: .3s ease-in-out;
}
&:hover > .btn-content {
color: #000000;
transition: .3s ease-in-out;
}
.btn-content {
width: 100%;
height: 100%;
text-align: center;
line-height: 50px;
color: #FFFFFF;
font-weight: 400;
position: relative;
z-index: 999;
transition: .3s ease-in-out;
}
}
a:hover {
opacity: 1;
}
This will add a shutter animation that’s triggered whenever a visitor hovers their mouse over the CTA button.
Make sure to save your changes to the new Shopify section for your CTA button as well as your edits to “base.css” before moving forward.
You’ll find that your new CTA section is now available in the Shopify Theme Editor:
Shogun’s visual editor makes it especially easy to design pages for your Shopify store.
Within the visual editor, there is an element library that contains dozens of pre-made features that you can quickly add to any page.
If you can’t find exactly what you’re looking for in the element library, you can always use Shogun’s Custom Elements feature to add it yourself:
For example, the following code adds an animated button that presses down when clicked (you would just need to swap out the default text “LINK” for the actual link and “LABEL” for the actual label you want to use):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #04AA6D;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
</head>
<body>
<a href="LINK">
<button class="button">TEXT</button>
</a>
</body>
</html>
Once you’ve saved your Custom Element, you’ll then be able to find it in the visual editor:
Finally, if you’d rather not mess with any code at all, you could just use the “Button” element that’s available in the Shogun visual editor for your CTA button:
As with every other element, there are myriad options for customizing your buttons in Shogun — there’s even a setting for adding pre-made animations to your button.
You can have these animations triggered by the visitor scrolling into view of the button or hovering their mouse over the button, and your animation options include fade in, zoom in, bounce, flash, head shake, swing, and much more. And there are also customization options for many other aspects of your CTA button, including size, font, text color, background color, border style, etc.
In other words, Shogun gives you the ability to add a fully customized, animated call-to-action button to any of your Shopify pages with minimal effort and only about a minute of your time.
