Here's how to add a section to the Flex theme to show an embedded Klaviyo form on a page.
Theme edits needed:
- Klaviyo and Klaviyo forms need to properly installed in the store
- Add index__klaviyo section
Code for the Custom Liquid Section
Transcript
Hey, Scott Austin here from JadePuma.
In this video, I'm gonna show you how to add a section to your flex theme for Klaviyo signup forms. So these are for the forms that are embedded in the page. And if I scroll down to the bottom of the home page here, you'll see this, this here is the Klaviyo form and it's the from CLA view. So this is collecting email addresses and phone numbers and sending it directly to Klaviyo without storing it inside of Shopify. And this section is also a little bit responsive. Let me just put up the inspect view, bring up the mobile view here. And what it allows you to do is to put in a different forum. This one is the same fields, but I've just stacked them vertically for mobile. So you have the ability to have two different forms.
So let's go into Klaviyo and show you how that works to start off with right here in Klaviyo under signup forms. I've got two embedded forms, one for mobile, and one for desktop, you don't need to have two, but like I said, I like to control that responsive experience a little bit more by having two separate forms for that purpose. So if you go into either one of these forms in your Klaviyo and go under edit form, and then under this targeting section, and I have them both, by the way, target argued for desktop and mobile. You don't need, you know, instead of letting Klaviyo be smart about which ones for desktop and mobile, I'm doing that in the liquid code and the CSS inside of the flex themed section that we're adding. So you don't have to worry about that here, but what you wanna do is take this embed code, which is, is to do for a class, copy that, and then go into your theme customization inside of Shopify. So here, let me just take a step out, right? So I go into theme customization in my, this theme happens to be offline right now. And if you don't already have the, the section add, you can add a section and just search for the name Klaviyo.
If you've add the, the code that I'll show you here in a second, you'll, you'll see this show up. So you just add that into your, your homepage. And I usually put the signup page, a signup form just on the homepage, not on every page on the site, it's just extra clutter for all the other pages, but I put it on the homepage. And that way, if someone like wants to contact customer support and say, Hey, how do I sign up for your newsletter? I saw that discount code. I want to, you know, get early access to your sales or whatever. Then the customer support team can go, just go to our homepage right at the bottom and you can sign up there. So I put it on the homepage in the right next to the footer, just to make it easy for customer support to communicate.
But once you add that section, you'll have a Klaviyo newsletter section. And over here under the settings for it, you can see this is where you would paste in your Klaviyo, desktop and bed code and your mobile code. You can set colors. But on this one here, I have an image set up. So the image overrides the background color, and here I find it better to use the images control, adding them in the Shopify theme, theme customization, instead of cuz you can put background images inside a Klaviyo, but this form inside of the Klaviyo form is actually only as, as big as it's with right here. So if we had a background image on it, it wouldn't go full width on the screen. So to get that full width background image effect and constrain the Klaviyo form to not code the full screen with I set up the background image inside of Shopify theme customization.
So that's, that's how you do it. And then let's look at the code here for a second. If we go in and edit our code on this offline theme, all you have to do it's it's pretty simple is you have to add one section and that section in this case here, I named it index double underscore Klaviyo following the flex theme naming convention. And if you go, if you're watching this video on the blog, you'll see this code right below the video. If you're watching this video on YouTube, look in the description, you'll see a link to the blog where the code is, is listed. Just go to that section, grab all of that code, copy it and paste it into your new section that you've created in side of your theme. And that's all you need to do. All right. Hopefully that was helpful.
Thanks for watching.