Follow these steps to add a dynamic call-to-action button on product pages in the Flex Theme.
Theme edits needed:
- Add the product-bottom-cta.liquid snippet file
- Add line provided to product.liquid snippet file
- Add code provided to theme.liquid file
Watch video for full instructions
Step 1
Add the snippet product-bottom-cta.liquid
Step 2
Add above first line of product.liquid snippet
Step 3
Add to theme.liquid above closing body tag
Transcript
Hey, it's Michael here with Jade Puma. In this video, I'm going show you how to how to add a dynamic call to action button to your product page. So let's to show you what that looks like here we are on one of our stores and we have a product page that has quite a lot of content. So the danger with the, a page like this can be that the, the customer can get lost in the content of the page and then never make their way back up to the product form at the top, where they can actually go ahead and add the product to their cart.
And so to rectify that we've added this feature where as a customer scrolls, once the product form leaves the page they have this sticky add to cart button at the bottom of the page. And at any time they can click that and it will take them right back up to the product form so they can go ahead and choose their options and add the product to their cart. So to add this sticky, add the cart button, there's just a few steps we need to take. So let's go ahead and do those. So here we are on our example site. And the first thing we want to do is add a new snippet.
So let's come in here to snippets and add a new snippet. We're gonna call our new snippet and product bottom CTA. So product bottom, CTA dot liquid. So we create snippet and the code for this snippet. You'll find it. If you're on YouTube, you'll find it below this video. Or if you're on our website, you'll find it just below this video as well. So here we are here is the code. So add the snippet here bit here. So let's come down to the bottom of this code block and find VRA and let's copy all this code and then come in here and paste it into our new snippet and hit save.
Now there's just a couple more things we need to do. So let's come back to our tutorial here and go to step two. Now we have this little snippet here, so let's copy that. And as the instructions say here, add above the first line of the product, do liquid snippet. So let's see if we can find the product dot liquid snippet snippets. Let's look for product dot liquid. Here it is. And we want to add it above the first line. So right here. So this is gonna serve as the anchor point for where we jump to when we click that button. So you could put this somewhere else. I like to put it just at the Stu at the top of the product Liquid snippet. So let's save that.
Then the last thing let's look at step step two, step three, should be and we want to add this little piece of code to our theme dot liquid file. So let's come back in here theme dot liquid. You can find under layout, theme dot liquid. And as it says here, we need to add this above the closing body tag. So let's come all the way down to the end of this file and let's find the closing body tag. So here's the closing body tag, and we can just paste our new little piece of code above that and hit save. And once you refresh now, you should have your new call to action button active on all your product pages, just like that. Thanks for watching.