JP Social Portal

@JadePumaAgency

JadePuma is an eCommerce agency located in San Diego.
We specialize in Shopify stores.

Transcript

Transcript

In this video we're going to talk about the social Portal section. So here I am on a phone on Instagram. And if I go to my profile on Instagram, right here we have this link. And a lot of people will use an app to come up with a list of buttons and things they want to link to. The problem with using those apps is they're separate from your Shopify store.

So what the section allows you to do? If I click on this link here, this content is hosted on my Shopify store and is built by the social portal section. Now, because I'm doing that in my Shopify store, all my Google Analytics tracking or any other tracking that you're doing is all in one place. You don't have to set it up on a different app.

And also, if you have advertising and remarketing, especially set up users that click on the link and come to this portal will be part of that remarketing audience now. So it enables you to more easily have in one place all of your traffic from all your different sources and be able to track it and remarket to it more effectively.

So let's look at what that looks like inside of the app.

So here we are inside of our theme customization, and I've already added the JP social portal app. And you can see that app has a lot of blogs which give you the ability to add different types of content. So here the first block, you can see is logo icon.

That's right up here. The next block is text and this is one text block and this is another text block. And then we also have the buttons and all these down here are the buttons. Now the klaviyo pop up is a special button that brings up a pop up or a modal from your Klaviyo infusion klaviyo for email.

And lastly, the social icons brings up the same social icons functionality that is built into the flex theme. So whatever you set your social icons to be on, they'll show up here. Now let's go through the section. At the top level, we get the ability to have a background color or a background image. And if you put in an image, you can affect the blur and opacity of that image to give it a desired effect you want.

Then we have section level settings for the color of the buttons, the color and the hover color, and you can also adjust the font size and the width of the buttons. All right. So if you want your buttons to go wider you can do that on mobile. They're going to be 100% with a little bit of a margin.

But on desktop you can adjust what that max width is going to be. And then if we look at each of these block in the logo one, you just select what you want your logo to be. It sets it up to be a height of 100 pixels, and adjust the width automatically based on the aspect ratio of your image.

For text, we have a rich text editor, so you can put in any text that you want. You can adjust the headings, bold bullet points numbered. All the stuff here can do with the normal rich text editor in the klaviyo pop up. you get to say what the button is going to be, and then you put in your form ID from klaviyo.

And before I show you that, let's actually go to the front end here and show you what it looks like. So here, if I click on that button, it brings up my Klaviyo model for this store.

And the way you get your klaviyo form idea is if you log in to Klaviyo and go to your forms, and this works with a form that is set up to be a pop up.

So make sure that your form is a pop up. And here you can see I have a pop up form. And if I click on that to edit it, the form ID is right in the URL. So it's this this right here. and you can see I've taken that text and I've pasted it right here into this form ID.

And then the button blocks, you just specify what you want the text to be for the button and what you want the URL to be. And because now you're in your Shopify store, if you're driving traffic to your Shopify store, you can just, you know, point to any page collection or product in your store that you want to.

And lastly, the social icons block. you'll notice there's no settings because it's just pulling from your theme settings. What your icons are down here. So if you look at my theme settings for social.

You can see Twitter, Facebook YouTube, Pinterest, Twitter, Facebook YouTube, Pinterest. So the theme level settings are what are going to be what shows up here. Now the other thing we have that I haven't demoed for you yet is we have the ability to throw icons on the button blocks. So I'm just going to throw a couple random icons on these.

You need a feel for what those look like, and that just brings a little bit of richness and branding to your elements. If you want to do that.

So that is our social portal section in the flex Theme Sections app. Thanks for watching.

In this video we're going to talk about the social Portal section. So here I am on a phone on Instagram. And if I go to my profile on Instagram, right here we have this link. And a lot of people will use an app to come up with a list of buttons and things they want to link to. The problem with using those apps is they're separate from your Shopify store.

So what the section allows you to do? If I click on this link here, this content is hosted on my Shopify store and is built by the social portal section. Now, because I'm doing that in my Shopify store, all my Google Analytics tracking or any other tracking that you're doing is all in one place. You don't have to set it up on a different app.

And also, if you have advertising and remarketing, especially set up users that click on the link and come to this portal will be part of that remarketing audience now. So it enables you to more easily have in one place all of your traffic from all your different sources and be able to track it and remarket to it more effectively.

So let's look at what that looks like inside of the app.

So here we are inside of our theme customization, and I've already added the JP social portal app. And you can see that app has a lot of blogs which give you the ability to add different types of content. So here the first block, you can see is logo icon.

That's right up here. The next block is text and this is one text block and this is another text block. And then we also have the buttons and all these down here are the buttons. Now the klaviyo pop up is a special button that brings up a pop up or a modal from your Klaviyo infusion klaviyo for email.

And lastly, the social icons brings up the same social icons functionality that is built into the flex theme. So whatever you set your social icons to be on, they'll show up here. Now let's go through the section. At the top level, we get the ability to have a background color or a background image. And if you put in an image, you can affect the blur and opacity of that image to give it a desired effect you want.

Then we have section level settings for the color of the buttons, the color and the hover color, and you can also adjust the font size and the width of the buttons. All right. So if you want your buttons to go wider you can do that on mobile. They're going to be 100% with a little bit of a margin.

But on desktop you can adjust what that max width is going to be. And then if we look at each of these block in the logo one, you just select what you want your logo to be. It sets it up to be a height of 100 pixels, and adjust the width automatically based on the aspect ratio of your image.

For text, we have a rich text editor, so you can put in any text that you want. You can adjust the headings, bold bullet points numbered. All the stuff here can do with the normal rich text editor in the klaviyo pop up. you get to say what the button is going to be, and then you put in your form ID from klaviyo.

And before I show you that, let's actually go to the front end here and show you what it looks like. So here, if I click on that button, it brings up my Klaviyo model for this store.

And the way you get your klaviyo form idea is if you log in to Klaviyo and go to your forms, and this works with a form that is set up to be a pop up.

So make sure that your form is a pop up. And here you can see I have a pop up form. And if I click on that to edit it, the form ID is right in the URL. So it's this this right here. and you can see I've taken that text and I've pasted it right here into this form ID.

And then the button blocks, you just specify what you want the text to be for the button and what you want the URL to be. And because now you're in your Shopify store, if you're driving traffic to your Shopify store, you can just, you know, point to any page collection or product in your store that you want to.

And lastly, the social icons block. you'll notice there's no settings because it's just pulling from your theme settings. What your icons are down here. So if you look at my theme settings for social.

You can see Twitter, Facebook YouTube, Pinterest, Twitter, Facebook YouTube, Pinterest. So the theme level settings are what are going to be what shows up here. Now the other thing we have that I haven't demoed for you yet is we have the ability to throw icons on the button blocks. So I'm just going to throw a couple random icons on these.

You need a feel for what those look like, and that just brings a little bit of richness and branding to your elements. If you want to do that.

So that is our social portal section in the flex Theme Sections app. Thanks for watching.

Search