Transcripts
1. Introduction: So you want to create
custom designs on your Shopify site. But you don't want
to have to dive into the theme code as maybe you're not a developer or maybe you just haven't built
that skill set yet. So what are your options? Well, in this skillshare class, we'll be covering exactly that. If you haven't seen my face
before, I'm Christopher Dodd. I'm a top teacher here on Skillshare.com And
most importantly, a Shopify expert with some of the most watched
Skillshare classes on Shopify Development. In those classes, as well
as my own Youtube channel. I go deep into the
development side of things when it
comes to Shape Fi, but in this class
we're going to take our heads out of
the code editor and see what can be achieved in
Shape Fi without any coding. I know a lot of you
are store owners or creatives that don't necessarily want to be a developer like me. So I've created this
class just for you. Of course, we're
going to start with the purely native approach using Hope Fi's
own theme editor. But then we'll take
a look at some of the page building apps out there which are more unlimited in terms of customization options. The main goal of this
class is not just to run through a bunch of
Page Builder features, but to help you develop
an understanding of where these no code options
fit into your store. Understanding the limits
of these apps and what is really happening
behind the scenes. So if al Fv do, if you're
ready to learn how to customize your Shopify
store without coding, click on the next video and
I'll see you on the inside.
2. Preface: Right here, you can see
one of my Shopify stores. It's what's called a
development store, meaning that it has
almost all the features of a normal Shopify store. But I can't actually
sell anything on it, it's just for testing and
development purposes. Ideally, you have your own
hope fi store to work with. But if not, you can always create a free development
store like me. I won't go through
the whole process in this class as I've covered this multiple other times in
other courses and classes. But if you do want to see a
tutorial on how to do it, you can find one in
less than three here in my previous class called
Shopify Store set up. In fact, if you're
new to Shopify and need a primer on
how it all works, I would recommend watching the entirety of that
class before this one, especially the fourth
lesson of that class, the one on Shopify
store architecture. I'll pause here for
a second to give you a brief moment to consider
whether you want to do that. If so, pause this video
and return back to this class after you finish
watching the other class. Okay, ready to keep moving? Let's start by
focusing our attention on the online store
sales channel. Within the online
store sales channel, we have our themes,
our blog posts, our custom pages,
our link lists, also known as menus that sit here in the
navigation section. And then some settings
in here related specifically to
this sales channel. If we head to the
themes, I hope you're familiar with the
concept themes. Basically, take the
content that you put into your store and display
it to the front end. For example, if we were to
look at a product page, the title and the price here
come from whatever you set the price and title to be in the admin for that
particular product. That being said, the
structure that surrounds this information
is determined by the theme you're
currently looking at. If there is no preview
bar at the bottom of the screen telling you what
theme you are currently on, then you are most likely on the currently live
theme of your store, which you can see here at the
top of the page for themes. Now if you know how to write front end web development code, themes are super flexible because they are
all built on code. In that previous example, if we took a look at the product title and product
price within the theme, you can see the
surrounding code. This part here is called Chop
Fi Liquid code and tells shop Fi to insert the title
here and the price here. It's important to
note that regardless of whether you want to
touch the code or not, the end result is always code. What I mean by this is that
any of the options we use to avoid code will simply
create code for us. We might not have to
learn how to code, but simply understand that
code is always created. You can see proof of this by looking at any page on the web, shopify website or otherwise. All you need to do is to
click View Page Source. And as you can see, the
result is always code. You may not understand this yet, but the theme is the optimal way to customize your
store's front end. The only problem is
the theme editor, which we'll discuss shortly, is still very limited
for a lot of users. The theme editor, just
to give you an overview, is the user interface
that shows up when you click here to
customize your theme. If we look inside
the theme code, the available options
in your theme editor have actually been coded
into the theme itself. And the value of what
the user sets in one of these fields is simply
inserted into the code. In a similar way to how we saw before with the product
title and price. Given that the only options
in your theme editor are the ones that the
theme developer has specifically
supplied for you. You might often find
that the option to customize a certain part of
your theme is not available. And that's what I mean by this solution being
kind of limited. That's why app
developers have created applications called
page builders. These apps have been developed by third parties and provide their own user interface for creating page designs
and layouts in Schobifi. When you build a design and click Publish on
one of these apps, code is then created
for you and injected somewhere into your habi
fi store end or theme. I know this might sound a
little too theoretical or complicated for a
first lesson in the class on no code shopify. But I bring these
concepts to you to help you understand what
is actually going on. Before you spend hours investing into learning
and building on apps without understanding how they actually affect your store, let me attempt to
simplify this for you with a simple table
showing you your options. Option one is to deal
with the theme code. This is the only option
in which you'll have complete control over
your store's front end. While I do recommend it, it does have the
steepest learning curve. And as this is a class
on no code shopifi, I'll completely cross this
option out for this class. Option two is to use the options available within
your theme editor. This is the ideal scenario, but it totally depends on
what options your theme has. A theme could have
hundreds upon hundreds of options or zero. It's all up to the
theme developer. And at the time of
recording this class, the theme editors, drag and drop capabilities
are very limited. You can rearrange
sections and you can rearrange blocks
nested on a section. And that's about it. We'll get into more detail on
this in the next video. Finally, option three is to
install a Page Builder app. This is the least
robust and native way to customize your Storefront. But these apps are very
popular as no code solutions, as they are built specifically
for no code users. Initially, these apps
might sound amazing, but as you get deeper into them, you might find that straying from the native Shopify way of doing things can actually cause
some of its own problems. Now in the next video, we'll talk about the second option, the shop fi theme editor.
3. The Native Shopify Theme Editor: The native Shopify theme
editor is what I recommend all my clients and students use to customize
their front end. We can customize
any theme by simply clicking on the customized
button for that theme. Before we start
playing around with this version of
the theme editor, it's very important to
note here that Hopefi is constantly changing
and improving the user experience
of the theme editor. What you're looking at
today could be very different to what I'm
showing you right now. But also I want to
make note that as the native theme editing
system improves on Shape Fi, the need for page building
apps slowly diminishes. Shabifai has some
exciting updates to the theme editor on the way, but the timeline of
when these updates will come out is
never set in stone. So unfortunately,
our only option is to stay patient and
wait for the update. In the next video, I'll
cover a big announcement to the theme editor that was just announced but has not
yet been released. But as that hasn't happened yet, let's get back to
what the options are at the present moment. So first of all, Shobifi uses a templating
system so that you don't have to create
separate looks and layouts for every
single product page, collection page, blog post, et cetera, et cetera. By default, every
product page will run through the default
product template. Currently, we are on
the home page template, which as there is only
one home page for a website only
applies to one page. But if we click this button, you'll see the list of
templates we can modify. Let's click on Product and
then click on Default Product. We can see that this template is assigned to 12
products in our store. And that there are no other product templates
for selection here. Therefore, we can assume
that this template will basically apply
to all our products. We can create an alternative
product template here, but we'll get to that
in just a second, as this is the only product template in use on this theme. Any changes we make
here will apply to all product pages next
to the drop down. For choosing which
template to edit, we have a drop down for Markets, which is a newish feature
that allows us to make edits that only apply
to a certain market. For example, if we switch
this to Australia, you'll see the wording change for add section and add block. These will now become add
section to Australia. Add block to Australia
as you can see here, we'll get a warning with
a link to learn more. And as this is more of
an advanced concept that won't apply to most of you, I will skip it for this class, but you can always refer to
this document to learn how the market selector works
within your theme editor. Switching back to
the default context, let's talk about what else is in this top bar, from
left to right, we have the button to exit
out of our theme editor, followed by the name
of the current theme, followed by the badge here to say whether it's live or not. And then these three dots to expand some more
information and options, The main ones being the direct
link to edit the code of the theme or to view the theme as it currently
stands on the front end. Obviously you've got
some other buttons here, but the view button and the edit code button
are the most handy. That being said, as this
is a no coat class, it's basically just
the view button here which is of interest. If we now take our attention over to the right
of this tool bar, this button will
deactivate the inspector, which all that does is toggle
on and off this function, where you can hover at each
section visually to see the section name and click between them to
add new sections. Or click on the section
itself to open up the settings for that section
on the left hand panel. In terms of completely visual Dragon Drop Editor
functionality, this is about as far as it goes, currently with the
Shove Fi theme editor, but there are plans to
improve this considerably. Stay tuned to the next video in this class to find
out more on that. For now, let's turn this off and use the left side
panel for creating, updating, and moving sections. But before we do that, there are just a few more buttons
to address here. Firstly, you've got this toggle here to view the
page on desktop, mobile or full screen, which simply hides the
sidebar so you can see the design spread across the
full width of your window. Then you've got the undo button, the red button, and
the save button. These are pretty
self explanatory. In order to get
these to activate, we just need to make a change to our template and then we
can either save or undo it. If we undo it, then
we can just as easily click to redo
that change as well. Okay, so with the top
bar out of the way, we can now discuss
this left hand panel which is where we will be
making all of our edits. First you'll see from this
theme we have a header group, a footer group, and then we
have the template content. Section Groups are a pretty
new feature in Shopify, so you might not see
these in your theme. The ability to add a
section and arrange the sections here unless that feature has been
added to the theme. Regardless, it's important to note that the
sections outside of this template group here apply to something
called the layout. Typically, themes
only have one layout, so we can simply say here
that these sections will stay the same no matter what
template we're looking at. These sections, on
the other hand, are specific to this template. And so any change
we make here will only affect the current
template that we're on. So taking you through
how sections work in Shapefi sections are the main building blocks
of Chapifi themes. Essentially, every
page in habifi is just a list of sections
stacked on top of one another. For example, if I bring back
the inspector for a bit, we can see these sections
in the header group, the announcement bar section, followed by the header section. And then we can see the sections belonging
to the template. We've got product information followed by related products. And then finally we've
got the Potter section, which belongs to the layout
inside the photo group. One thing I didn't mention with this inspector is
that we can click into nested elements within
the section called blocks. As you see here as I hofer
over these elements that the corresponding block is highlighted underneath
the section. Let me deactivate the
inspector once again. And we can now see here that
we can rearrange sections on a template as well
as blocks within a section by clicking
and dragging, by clicking on ad section. We can add any of these
17 sections to our theme. Or if we have a particular app installed that uses
theme app extensions, we can include a section from
a particular app as well. This one right here is a custom app that I created
for another tutorial. In a similar fashion, we can
add additional blocks to our section until Shopify publishes the update that
I'll cover in the next video. The list of block options
here will be limited to the list of block options
defined in the section itself. So you can see here that
because this section only allows one button block and one heading
block per section, our only option here
is to add a text block here which we can arrange
alongside the other blocks. Both sections and blocks may or may not have
their own settings. So you can see here
for the image banner, I can set which images
I'd like to use, set a specific opacity
for the overlay, change the height of the
banner, et cetera, et cetera. Then if I dive into some
of the blocks here, you can see that these
have settings as well. I could change the
text of the button, update the address of where
that button should link to. And in order to save
any of these changes, I would just need to hit Save in the top right hand corner. And my changes will then
be applied to the theme. Finally, with any
section or block, we can click on the trash
can icon to delete it, or the icon to keep
our settings in place, but simply hide it
from the end user. At this point, it's a
good time to mention that these sections and blocks
apply to this specific theme, which is version 12.0 0.0 of
the Dawn theme by Sobi Fi. It's important to note that every theme is different
and the settings in any of these sections and
blocks come from schemas that have been written
into the theme itself. I won't go into the
code in this class as this is a no
code shopify class. But just to note here that
if you know some code, you can modify these
schemas to enable new options within
an existing theme. Back to the editor
here, bear with me as there's just a few
other areas to address. Here on the left panel, you'll notice that there
are two other tabs here. In the second tab lies
your theme settings. These settings aren't linked
to any one section or block, but apply to anywhere
within your theme. For example, we
can go in and edit specific colors that are stored in the color scheme
of the theme. All of these are grouped
into separate accordions so that we can navigate
between them more easily. Finally, the last tab here
is where we can enable and disable certain app
embeds on a single theme. This is most likely a panel you won't have to touch unless directed to by the developers of one of the apps you're
using on your store. Before we wrap up this video, one thing that I
promised to talk about was the
alternative templates. So if you remember when we clicked up here and
went into products, you can see that there's only one default product template. But I can create this button
to create a template. Let's just call this
alternative product layout. Okay? And then we can choose what we want
it to be based on. And because there's
only one template we have currently in our theme, we only have one option, which is the default
product template. So we're going to create,
oh, actually it won't. Let me do layouts. So let me just do
alternative layout. The product part can be assumed. Okay, I'm going to
click Create Template. What this will do is create an alternative product
template in our theme. I just want to show
you that quickly. I know this is a no code class, but just to show you what it's doing behind the
scenes because you can do exactly what I just
did in the code as well. It's creating right here. If we go into where
products are, this products is the
default product template. But this one right
here, the one that we called alternative layout. This is our alternative
product template. Okay, I'll show
you how to assign that in just a second,
but let's go back here. We've created it using
the theme editor. We didn't have to touch any
code, but just so you know, as I mentioned
throughout this class, code is always created. So that's what's happening
on the back end. Okay, so now what
we can do is we can create a completely
different layout with this. I don't
know what we would do. A more practical
example would be, we won't let me
delete this section. But we can add in like, let's say for instance,
we assign this to a very particular product. So we assign this to
just one product. And we can talk more about
that particular product. We can say more about, we're currently looking at
the air pods right now. We can say more about the air
pods and then go into here. Airpods are amazing. I'm not a great
copywriter actually. We can get Shopify to
generate text for us, description or selling points of Apple airpods Get
to generate it for us. Look at that experience, the seamless connectivity
and crystal clear sound of Apple airpods.
How good is that? Okay, and then give
this button label, actually we will just
delete the button. You can have a product page
with that particular detail. And all we need to
do is just assign it to this Air Pods product. I'll hit Save on that and then I'll exit out of the
theme editor actually. And I'll go into products, find that Air Pods product
in our shop admin. And then down here is where I can change the theme template. And instead of default product, I can switch to the
one we just created called Alternative Layout now. And I hit Save and click
to preview that product. Looking at it through
our current theme, Dawn version 12, you
can see once we scroll, plast the Product
Information section and the related products. You can see more about
the airpods experience, the seamless connectivity and crystal clear sound of airpods. That's how we can affect the layout of a
particular product while keeping the
same layout template of the other products. As you can see, all of these are using the default template. They're not going to
have that extra section, but on that particular product that we assigned the
alternative template to, that section that we inserted on that template is present
on that product page. Okay, so if we do want
to edit this in future, we don't do it from here, the actual product listing. Within our admin, we have to
go back to our theme editor. Navigate to the product template assigned
to that product. Now you can see it's
assigned to one product. We're previewing air pods, which is the product
that it's assigned to. Now if I want to edit the template for this
particular product, I can do so through
this template. If I go back to the
default template, you can see here that
that section is not on the default product template. So there you have it. The
Shopify theme editor. One of the questions the team at Skillshare asked me when
reviewing my plan for this class was the reason behind the statement I made
at the start of this lesson. That the native Shopify
theme editor is what I recommend all my clients and students use to customize
their front end. It's a hard statement to explain without going into
technical details. So instead, let me
just use an analogy. Maybe you've heard
of jail breaking. It's the practice of modifying
your phone so that you can enjoy unrestricted access
to the entire file system. This access allows
for changes that are not supported by the
phone in its default state. Well, using a Page builder on Chobifi is something
a little bit similar. It's a hack solution that could go against the
themed design system that Chobe Fi have created without going into
too much detail. You might find that through experience that
straying away from Chobe Fi's standardized system might cause some
unexpected problems. Some of which we may just see show up in the class once we start to install some of these page builders
on your store.
4. Announced updates to the Native Theme Editor: Twice per year. Shobifi
makes a bunch of announcements as
part of something called Shapefi editions. In Shabifi's Winter
2024 edition, Shobifi announced some
interesting updates to themes and the theme editor. Soon, blocks will be just
as modular as sections. And perhaps more excitingly, blocks will also be
able to be nested within other blocks as
opposed to just sections. Two important things
to note before we look deeper into this
feature is number one, there has been no specific date set for this feature to be
released to the public. And number two, even
when it does come out, your theme will need to
be able to support it. What this means is that new themes built
after this change goes live will most likely leverage this
new functionality. But there will be a lot of older themes that will
remain on the old system. So keep that in mind for now. This feature is only available
on developer preview, which means only partners like myself can play
around with it. That being said, let me give you a little preview of how it
should work when it comes out. All right guys, before I dive in and show you this
cool new feature, I just wanted to provide a
little bit of context here. What I'm in right now is a development store that has the developer preview enabled
for this new feature. So this store, as it says
here, is in development. It doesn't really say it, but this is not a live store, like I can't actually sell product and use this
for a business. This is just for testing and development purposes and to preview this new feature. How I was able to do that is because I have a Hope
Fi partner's account. And from there you're able to
create a development store. I won't go into the
process of that in this video just because I don't require you
to actually do this. You can just watch
this video to see what changes are
coming and decide for yourself whether you want to wait until these come
live and start to use them in your no
code, chop fi workflow. But if you did want
to preview this ahead of time and you're
very keen to check this out, then you can find on
my Youtube channel, which I will mention more of in the conclusion of this class, you can find a video on Shopper Fire Winter
Editions 2024, which is when this
feature was announced. In that video, I show you how I set up the developer
preview store. Okay, so just in case you
wanted to follow along, that is how you do it. And the other thing
I just wanted to mention here is like I said, in order to take advantage
of this new feature, not only do you need to be on a development store with the
developer Preview enabled, you also need to be running
a specific type of theme. And as you can see
here, this theme is called reference theme main. This is a theme that
has been created by Hub Fi to show you how it's going to
work when it comes out. So you need the theme
and you need the store. It's a bit of work to set up, so I decided to skip
that for this video. But if you do want
to know how to install the development theme
onto a development store, you can check out that
video on Youtube. But without February.
Ado, let's actually jump into the
customizer here and you'll notice that it's a little bit different
to what we're used to. So here you can see we've
got this image banner here, which is, first of all, the theme looks very
much like dawn. I think it is based off of dawn. But it's leveraging these
new theme reusable blocks. So as you can see, there's an image
banner section here which is also present in dawn. But if we look underneath
image banner here, we can see there is a
nested group called group. And within this group
we have nested blocks. Now, I can't add another
block under here. It looks like I can
button secondary. There we go. Now we've added a block within this
group of blocks, right? And then I can rearrange these blocks within
these group of blocks. And what this group is giving me is a container with
a white background. But I can change the
content position, I can change certain like
layout aspects here. It looks like changing it to horizontal might be a little bit buggy because it
is in Developer Preview. But the thing to note here is that previously
we would have a section and then we could nest a list of blocks
within one section. Now we can put a list of blocks within a
block within a section. Let's have a look
at another example. Let's go down to custom section. This is probably
a better example because we've got
custom section here. And if we look inside, we've got this block
for the heading, and then we've got this group. And then within this group
we've got two groups, and actually we've got
something in the middle. Ah, so we've got
basically three columns. So we've got this
group, which is basically like a
three column layout. And then on this third level, we've got group image group. This is basically
like our columns. And then within this first one, we can stack two blocks
to make one column. I could move this one
over to the other side. And this gives me a more
flexible control over my layout. Okay, so yeah, as you
can see, we've got, in this custom section, this is where it becomes
way more customizable. We can nest groups within
groups, within groups. And that allows us to create custom layouts that were
never possible before, just having a single level of blocks nested under a section. Okay, so this is a
pretty exciting stuff. This is going to be a
huge paradigm shift in the theme editor and I think
it's going to be enough for a lot of people to not
have to use page builders because I mean to do something
like having this heading. I'm not saying this is
a practical example, but to have something
like heading above the icon for one
of these columns, but not all of them, that would
be near impossible to do. You'd have to like
set a check box. It wouldn't be intuitive like
you would have to build in a lot of options within
your theme to get that. But now, with the
fact that blocks are reusable and they can be
nested within each other, it really changes the game. And I hope you are starting to see what I mean here with how this is all into
different little blocks that I can then
click deeper into. So like here we've
got this section, then we've got a
block, and then within that block we've got
these three other blocks. And each of these blocks and sections have their
own settings. So yeah, if you want to
play around with this, but this lesson or this video is more to just show you
what's coming up in order to inform whether
you want to invest in a page builder still or wait until these
changes come about. So that's very
encouraging to see these features come out
to the theme editor. The better the
theme editor gets, the less appealing page
building apps become. And that's always welcome
for me as a developer. Given that this new
block functionality has made it to
develop a preview, we should see it released
to the public pretty soon. As for flex sections, something that was
announced six months before the last edition, we're yet to hear
an update on that. So for now what I'll do is I'll end this video
with a clip from Have Fi's official Youtube
channel where the vision for the new theme
editor is discussed and flex sections
are introduced. Okay, so let's move back into
the online store editor, which is where I know
a lot of you spend your time making your
sites look great. And I want to show you some
new features in our show, Fire Themes that will help bring your store a little
bit more to life. So right here in the editor, I'm going to click
into my theme settings and click on Animations. And there's a couple of
cool little things here. So you can have revealed
sections on scroll, which gives me this
nice effect when my sections kind of appear dynamically as I
scroll down the page. And this other hover
effect for three D lift means that as I mouse over
the elements on the page, I get this nice three
D shimmering effect which just brings
the site to life. It's really cool. The last
little effect I want to show you is in sections
where you have images, we have this new effect where
you can basically create a parallax by setting fixed
background positions. So as I scroll through the page, we get this nice
parallax effect, which again, great
visual effect, makes your sit a little
bit more lively. Now, everything I've
showed you today up until now is live and out there
for all of you to use. Before we wrap up today, I want to give you a peek
behind the curtain at a couple of new features that aren't ready yet,
but are coming soon. And I'm excited for you
guys to get a look at. So the first one is something we're
calling flex sections. So down here in the editor I'm going to click
out of section, just like I always would
in the section picker. I actually now see the sections a little preview before I
actually click on them. Which is really nice and
helpful if I'm spending a lot of time trying out
sections in my theme. Now I've got the
section on the page, and this is pretty good, but it's not exactly
what I want. Now with flex sections, I can actually customize this
section with new blocks. I'm going to click
this plus button and say I want another image here. Let's put a couple of actual
images into these blocks. I'll pick the tennis
balls on the bottom, and let's maybe pick the
sewing kit for the top. Now I want this to be sized
a little differently. Now I can just pick
up this handle and drag it to be the
size that I want. I actually want doubles
of this section, so I'm just going to click
this, Hit Duplicate. Now I've got two of them, but I kind of want this
one to be on the right. So let's just going
to pick it up and drag it over to
the right hand side. Kind of want these to
be the other way round. I'm going to drag that
down other way around. I want the symmetry here, so I'm going to pick this
and I'm going to say, please align that to
the right. Maybe. Let's get a little
variation on this image. Pick a different
sewing kit thing. Great, I really like how
these images are looking. Now let's just go in
and put some copy in, so we'll call it
crafted in the USA. Then let's get some
marketing copy in here. I'm actually not very
good at marketing copy. Let's get some from
shop fi magic copy about tennis gear
made in the USA. Let's pick, I don't
know, playful, generate. Okay, game set match. Why not? Let's take that then. Last thing I want to fix
up is these buttons. These buttons are on
top of each other. I'd rather they were
actually side by side. Okay, I've got the section looking the way that I want now. This is on Desktop. Let's
just quickly check. It looks good on mobile. It's super nice. It's just
responsively laid itself out. That's awesome. Just
like that, we are done. I'm going to click Save. This
is called Flex Sections, We're looking forward to putting this in your hands really soon.
5. Introduction to Page Building Apps: Ideally, Chobifi's native
theme editor should be enough for chop fi merchants to customize the front
end of their website. But unfortunately
for users that want more control over their
front end designs, they will end up being
forced into using an app. These page building
apps represent custom software that offer
more customization controls, often enabling more of the
features merchants wish to the Shobifi theme editor to
have like drag and drop, and standardized components with lots of customization settings. Before we dive into using
a few of these apps, I'd just like to help
you understand what exactly is happening when
you use an app on Chobfi. Let's head over to our
Shopper Fire admin and add our first
page building app. Currently you can
find the menu for apps underneath your
list of sales channels. From here, click on the word Apps and the drop
down will expand, allowing you to see the list
of currently installed apps, as well as search for
new apps to install. Let's search Page Builder
and see what comes up. This will take us to the Shaba
Fi App Store where we can see the matching listings for the search term Page Builder. As you can see, there are
a lot of options here, but some of the main
ones are Page fly, show gun composer,
and gem pages. In this class, we'll take
a look at just a few of these gem pages,
Replo and instant. Let's start with Em pages. We'll click on the
icon or the title for the Em pages
listing right here. And that'll take us to the official app page on the Shopify App
Store for Em pages. We'll then click on the
button to install the app. And this will direct us
back to our Shopify store, where Shopify will
ask us to approve certain access that
the app requires. Remember that even
though the app has been approved by
the Shop Fi app store, it's still a third party
piece of software. The permissions you grant
here will allow the app to plug into your Shopify store
and make certain changes. Click the install button and
now you'll see the interface for the app inside your
Chop Fi stores admin. A few things to note here
is that, number one, they've obviously
designed their app to look quite similar to
the rest of the admin. But don't be fooled,
this interface is entirely determined
by the app. If you've ever
worked with a bunch of apps on Chop Fi before, you might have noticed that not all of them
look like they fit perfectly into the
Hopi Fi admin. And that's because
they can be designed however the app developer likes. And number two,
likewise to the design, the functionality and
exact method that an app like this can use
to deliver the designs you create to the actual
theme can and often does differ between
the apps being used. Also, as these apps are
third party software, the cost of the app is
not covered by Habi Fi. So most of these apps will have some sort of
subscription price. They charge merchants
in order to use them. If I click the badge here for development on the
Gem Pages app, I can see the different
plans available and their inclusions for
this particular app. In this class, however, we
won't need to sign up to any paid plans in
order to follow along. But if you end up committing to a particular app you like, you may want to purchase one of these paid plans in order to
get the features advertised. So now that we understand
that Page Builder apps are external pieces of software that plug
into your store, carry their own costs, and manipulate your
store in bespoke ways, Let's move on to looking at how we can use these
apps in practice.
6. Gempages: All right, so now that
we've covered how apps plug into our
Shopify store, let's demo three different apps that I found my clients
to be most excited by. These are gem pages,
Replo and Instant. Let's start with gem pages, which we installed in
the previous video. So I'm going to
click over to apps and I can look here
at my installed apps. I'm going to click
Em Pages Builder after we give it
some time to load. You can see here that we
can create a new page, but there's actually a
new feature over here. We can create sections. Rather than create
a whole template, we can create a section that can be included on a template, presumably hopefully
in the theme editor. All right, right now I'm going
to click Create New Page. Then here you can see that we can create from a
range of templates, some of which have been fully
built out, fully featured. If we have a product that
matches this very well, then we can select one of
these as a starting point. Very handy for a lot of
people that don't want to custom design a landing
page or a product page, but need some ideas. And this is one of the biggest selling points
of using a page builder. App Shop Pi is not going to provide this to you with all of the demo
content as well. That being said, a lot
of these elements are specific to the specific
product being sold. So I don't see anything
here for snowboards, so let's just start
from scratch. I'm going to create a
product page from scratch. And what I can do here is
insert a two column row, for instance, and start
building my layout. This is a drag and drop, this system, which is
good for a lot of users. So I could drag a
heading into this side, I could drag an image
onto this column. As you can see, this drag
and drop functionality you don't actually have on
Shopify's own theme editor. That's the selling point of a page building app like this. But as this is a product page, I want to build some
dynamic content first. Let me, sorry, I'm clicking
in the wrong areas here. I don't really use
page building apps because I am a developer. But let me see. I should be able
to click up here. And now we have this section. I'm going to delete
that section. I'm going to scroll
down to product. And this will allow us to bring in dynamic product information. As you can see here,
it's bringing in the T shirt product
which is in my store. But let's bring in the
complete snowboard Oxygen. I think it was the
collection snowboard Oxygen was the one we were playing
around with earlier. All right, so we'll use this as our example product, right? So we've got this
product section here and we can change the layout. We can view it on
different screen sizes. And what's kind of
cool about gem pages, I guess, is that we can
build layouts underneath it. So maybe we want a
product gallery title, price quantity
selector like normal. But then we want
to also bring in some other sections below it
to really sell the product. So we can bring in, you know, something like this with
a predesigned template. You know, we can
drag and drop here. So we can really put this
image anywhere we want. We can bring it back
to that column. We could rearrange
this above or below. So lots of flexibility here. And it's a really
nice system for users who appreciate that drag
and drop functionality. All right, now obviously
this is not dynamic content, so we will probably only
want to assign it to a single product or find a way to bring in
dynamic content here. It's kind of hard with
gem pages, though. The area where
these apps tend to break down is when we do
bring in dynamic content. And what I mean by
dynamic content is this right here is pulling
in the product title. You can see I can't edit
that. I can't edit that. That's pulling from
the product itself. This is dynamic data, but right here I could change this to
whatever image I want. Change this to
whatever text I want. It's totally edible. The only downside to that
is this content will apply to every product that this
template is assigned to. So speaking of assignment, let's go up here and click
on zero product assigned. And let's assign it
to that product. So the collection, Snowboard, Oxygen, I believe it's
called. Click Confirm. Now when we hit Publish, this template will be
assigned to that product. Once that's done, we can
click View Live Page. And now we can see
the product page is equal to what we created
here in gem pages. Now because I'm a developer
and I think it's important to understand how this is actually
plugging into your store. What this is actually doing
is creating a template in your theme and then assigning that template
to your product. What I mean by that. Let me demonstrate that
to you right now. If I go into products and find the collection snowboard Oxygen in my list of products here, and I scroll down to where
the template is selected. We've got template GP
standing for gem pages, and this long code that represents the template that
we just created, right? So it's not a very
user friendly name, but it links us directly to this template that we've
just created, right? And then if we look
into our theme code, don't worry we won't be
writing any theme code here. But I just want to
show you the effect that this has on your store. You'll see that gem pages, anything with gem or gem pages in this list of files
here are files that have been created by gem pages just by installing the app and
doing certain functions. So you can see we've got
four files here and if we go into our templates folder
right here and scroll down, we can see that product template
with the code after it. And you can see that it
links two sections that have GP section followed
by a unique ID. So if we scroll down here, now you can see every section becomes this file in our
sections folder as well. So I bring this up because right now this is
not that messy. But if you end up
building a lot of templates into your store using jam pages
or a similar app, it starts to look very messy. Let me show you with an example
from one of my clients. Right here is the theme
code for one of my clients. And as you can see
here, we've got those four files in
our layout folder. But if we scroll down, we've got gem pages,
templates for articles. And if we scroll down
a ton for collections, we've got a ton for even
the index template, which is the home page, we've got a whole bunch of custom pages here
with different codes. We've essentially got a lot
of gem pages files here. So here we go into the
product section here, look at all these different
product templates without descriptive names. Just codes that relate to
products within gem pages. So it's important
to note here that when you do go wild with
these page building apps, it really adds a lot
of bulk to your theme. Here we go into sections here, and you can see if
we scroll down, it's not creating much in
the way of section files, thankfully, but definitely in the way of templates right here. Now you're probably
not going to be playing around in
this code editor, but where this will manifest
is in the theme editor. If you remember this drop
down from earlier where we could view all the
product templates. You'll see here that
we've got a giant list and a lot of templates are
assigned to just one product. It makes it a little
bit harder to manage. If we do want to use
the theme editor, it makes it hard
for us to determine what template in gem pages
is applying to what product. And if we were to try and edit
this in our theme editor, you'll see that there
are no options. There's not even a section
here for us to use. It's all coming
through gem pages. So essentially it doesn't
really play nice with the theme editor if you
are using gem pages. That being said, in the
case that we wanted to create a template
that applied to multiple products
with custom sections that we designed through
this Page Builder app, then gem pages probably won't
cause too many problems. We can go in here,
click on Manage, Assigned Products,
and we can assign this template to a bunch
of different products. So we could go complete
snowboard instead. If I hear Publish, now the template for
complete snowboard will change from default to this particular gem pages
template to prove that, let's go back into our admin. I'll get out of the
theme code here. Go into products. And it was the
complete snowboard, wasn't it? Right here. If I scroll down,
we can see that this product is using the same template as that
other one from Chem pages. But we can go in here and
set this to default product, and that'll set it back to showing through
the default template. If I hit preview, this
is the default template. If I switched it back to the G em pages template, hit preview. Now you can see that
the same product is delivered through
a different template, the one we created in gem pages. So the pros and cons
of using gem pages are once we create a page
template in gem pages, then it doesn't really play
nicely with the theme editor. While the theme
editor might not have all this drag and
drop functionality, using gem pages is going to give you less control
in the theme editor. But if you're happy to rely on this page building
app of gem pages, then you should be fine
when it comes to building templates for a lot of
dynamic content in gem pages, it starts to get a
little complicated. So what I'd recommend
gem pages more for is creating landing pages. Obviously a product page has its own data and so
it's highly dynamic. But a landing page
is a single page that has static content. And so Em pages is a great
landing page builder. If I go in here for instance, and I can click Select to select this landing page template and create a Em pages template. Based on that, we get this beautiful template that we can change to whatever we want. We can run a Black
Friday sale and let's say it's 35% off instead. And we can link these buttons to wherever we want
to link to change this as much as we want with this beautiful drag and
drop functionality. Okay, if we are to hit
Publish on that, this is not a product, so it won't create
a product template. But it will create
a page template. And not only that, it will
create the page to go with it. So what do I mean by that? So if we click Publish again, the button disappeared before. For View Live page, it's annoying. You
have to actually hit Publish for that
button to show up. But here you can see
we've created this page. The handle is not the
best landing page. March 18, 13, 36, 16. But we can of
course change that. But now we've got this
beautiful landing page. And what it's done, if we look at how that's affected
our shop fi store, not only has it
created a template, but it's created a page in order to take advantage
of that template. So as you can see
under online store, we have custom pages and we can see that that
landing page is there. And in the theme template, you can see it's this newly
created template by Em pages. And because this
content is all static, it's just a landing page. We can put whatever
we want in here. This tends to work pretty
well and not cause many problems with managing
the code in the future. That being said, however, one of the biggest issues with
these page building apps, pretty much all of
them I'm pretty sure is that when
we hit publish, these changes only apply to
the currently live theme. If we go back to
our themes here, if we look in dawn version 12, the one that's
currently running, you'll see that all of the gem pages code has
been put into here. But if we look at
our preview themes, so let's look at version 11
which is sitting on preview, you'll see that
Jem pages did not install any of their
files into here. So if we want to utilize preview
themes to preview stuff, so we want to make a
change on one theme, maybe update the data and the theme editor and then
view that before publishing. That is something that's a
little bit hard to do in conjunction with Jem pages or
any other Page Builder app. What I mean by this
is if you see here, all these themes have a
different customized button. So if I change content
on this theme, it's only going to
apply to this theme. And because this theme
isn't the live theme, anything I do here
isn't going to go live. I can test out a
whole bunch of stuff. Unfortunately, I don't think
there is a way for us to get gem pages to effect this theme instead of the
currently live theme. And as somebody who has worked on stores that are
using gem pages, but also trying to preview custom developed features
on a preview theme, this becomes kind
of tricky and hard to get the staging
process working well. So that's a little demo of gem pages and how it
affects your store. The biggest selling
points of gem pages I think are these
pre made templates that you can just
throw into your store and rearrange via drag and drop. The dragon drop seems
to work pretty well. You know, I can drag an image in between any of
these little bits of texts, move these bits of text around. It's pretty nice for somebody that wants that drag
and drop functionality. And as you can see here,
we've made a change. So we need republishing, and that'll change our template. Obviously the side effect of all of this is how it
affects your theme. But as long as you
understand that, let's move on to the next app, which is rep blo.
7. Replo: All right, in this video
we're going to take a look at another page building
app called Replo. Now that you've seen your
first page building app, you can now see through comparison with Replo
what things are the same and what things change depending on which page building
app you're using. All right, so let's go and install this new
page builder app. Replo, there we go. Replo landing page Designer. I'll click Install,
and then I'll click on Install again to give it
its required permissions. And Replo works a little bit differently because you need to create a new project
within Replo. Then that project is
linked to the store. I'm going to call this, let's say Chris's skill share class. I'll click Create Project. Now with Replo, you can create
a AI generated template. That's pretty cutting edge. You can create a
blank page or you can browse from the templates. Let me have a look at some
of these templates here. Just like gem pages, you've got a lot of pre built
stuff here that you can utilize on your store so that you don't have to create
a layout yourself. Let me just click on this one and create a
new page with that. Unlike gem pages, Replo
wants to know the name and the handle before we get
started over this page. I'll say landing page. And as you can see, the handle is automatically generated. But we can change this now, or we can change it later
in the Shopify admin. Obviously, all custom
pages need to be assigned to a custom page in
the Shopify system. So we'll be able to change
this in our admin as well. So I'll just hit Create Page. And if you're like me
using a development store, it's going to ask you to put
through your store password. All development stores
are restricted from the outside via a
store password. So you can go down here
into preferences within your online store
sales channel and just copy that if you
get asked for that. This is also a feature
if you do have a live store and
you want to hide it from view unless you
have a certain password that is a feature of
paid stores as well. But as my store is
in development, I have to restrict
using a password. All right, back here, you can see here that we have the dynamic
content coming through. And you can see that we've got this pretty special layout here. Obviously this content here is demo content and comes
from another product. So we'd have to go
in and change all of this content to be
relevant to our product. But if you look at
Rep Blow and we just compare it to Jem pages, you can see we've got this
panel on the left here which is more similar to the theme
editor than Jem pages was. And if I try to click
and drag this content, it does work, but it's a little bit less clickable
and draggable than Em pages. I find it's perhaps
a little bit more robust because you've got these different containers here. And you can see the structure
of the template right here. And you can also click and
drag in this section too, just like you would
in the theme editor. If you recall what we
covered in the video on the announced update to blocks coming to the
Shopify theme editor, this little panel
here more closely matches what's coming to
the Shopify theme editor. So it's a similar paradigm, which I think is a good thing. But again, if you can hold out until those changes go live, then that depletes the need
for something like rep blow. But one of the big
differences here is you'll see we've
created a page here. This is not a product. So if I hit Publish on this, what it's going to do is, well, first of all, it's
going to ask us to create a plan, which
we're not going to do. But if we were to hit
Publish on this is going to create a page, not a product. If we wanted to use Replo
to affect a product page, we'd need to create
a section first. Now I'm not going
to start paying, what was it, $300 a month. $250 a month. Just
for this video. And I don't expect
you to either. So what I might do is switch over to one of my
client stores and we can see how this is
affecting our lives store. All right, so here
you can see we've got a similar thing
fully built out for a product that is
specific to this store. So as you can see, it's just for demo purposes because it's not actually on a product page. What this client
is using replo for at the moment is product
pages I believe, but mainly for the home
page. So if I search. In the page section
for home page, you can see this icon here indicating that the
page is set to the homepage. And if I click on this,
you can see this is a full home page layout that has been created
for this client. I believe in this
case we contracted Replo themselves to build
this layout for us. Just like the other
Replo templates, we can dive into any of these sections and edit
so many different things. There's a lot of
different options here, but you'll see it looks
quite different in terms of all the different layouts
and different ways to change the width
compared to gem pages, which is a bit more heavy on
the drag and drop perhaps. But again, each of these
apps do similar things. They just approach it
in different ways. In order to create
a product page or to create something in replo, that would affect
a product page, it needs to be
created as a section. I'm going to click over
here to go into sections. And you can see here that I have this currently
published section for MCT Oil, Kickstart, right? This section, I believe
is already published. So if I go into the customizer
for the live theme here, you can see the home
page just quickly. You can see here that there's
no options to customize. That's only in Replo, because it's being
handled by Repl. But if we were to go
to the product page, I'm not sure what template
it's running under. Let's just search for
the product name. Mct, Kickstart. This one's a bad example
because it's using G em pages. Actually, let me
click here to change, and I can select from
the list of products. Search for MCT, Kickstart. Hopefully there's one
that's not assigned to Gem pages. Here we go. You can see that we currently have some native shove
Fi sections in here. And if I was to
click Add Section, we can add a section that
was generated by Replo. In our case it's, let me search a MCT Kickstart. Here we go. Mct Oil Kickstart. And we can bring
in this section. And what that allows us
to do is we can hide these ones and just use the section as
our product template. Now you can see
we've transformed our product page
for this product. But of course, we're on the
default product template. We don't want to affect
this particular template. We'd want to create a new
template for the product. And then assign the section that we created to that product. Essentially, even though
we've created a section here, it doesn't have any settings. The benefit of having
this as a section is only if we wanted to add something below
it or above it. Because if something
is a section, then we can stack more
sections above and below it. So for instance, I could grab
an image banner here and put that under the section
that was generated by Replo. Okay, so heading back
into the Replo interface, I personally don't understand
the hype behind this one. It's a similar
system to Em pages. You can create
sections which as we saw in the last video
with gem pages, it looks like you can create
sections in Gem pages 2. But those sections do
not have settings, so it doesn't really
leverage the functionality that comes native with
the Shopify theme editor. But one of the things I can
say that I like about this is this tree like structure here that we have on the left. And of course we have a lot of pre built components
that we can use as well. It looks like they have a
pretty big template library, which of course is a value
add for a lot of merchants. But very similar to gem pages the way it
plugs into your theme, it's going to create files. Before we wrap up this video, let's look just inside
our theme code. If we search replo, we can see just like Em pages, it's creating a lot of
Replo files with, well, not random but unique
identifying sequences here, which look pretty ugly
and messy in your code. But it allows Replo
to do their thing. It'll also create
a whole bunch of replochunks in your
snippets folder. I mean, look at all these
relo, repl, replochunk. If you're okay with
dirtying up your theme, then go wild on these
apps. It's all cool. But once you start to
look at theme code, this starts to get real messy. Anyway, that's all for
rep blow in this video in the next one will cover the
final app, which is instant.
8. Instant: All right, in this lesson we're going to cover the last app in our list to cover
which is instant. There's been a lot of
hype around this app, especially with the
Figma plug in and the unique feature
this app has which it will create section
settings for you, but we'll see how that
works in just a second. Let's actually go ahead
and install this app. So it's just called instant. We're looking for
Instant Page Builder. I believe no results found. So let's search it in the app store by
clicking this button, Instant Page and
Section Builder. We'll click Install again. That brings us to the
instant app, which, unlike the other apps
that we looked at, this one does not load
within your shop fi store. As I mentioned before, this is all external software no
matter what app you're using. And hope Fi allows these apps
to load within the window, within your shop Fi store. But that does not mean
that it's part of, so it's just integrated into the look of
Schopf for instant. This app will direct
you to its own website, so you won't see the shove pi user interface
on the left here. And the other thing that's
different here is we need to create a site for gem pages. We didn't need to do any
of this for rep below. We needed to create a
project in instant. We need to create a new site. So I'm going to call this Christopher's
Skillshare Store Hit. Next step. It'll ask us
what we want to sell. Our product is
closest to fitness. I don't know if this
means anything. This is probably just market
research for instant. So I'll hit Fitness and now will be taken to the interface for the Instant
Page Builder app. Now one of the things I like
is this clean design that encourages us to do certain things which I
think are good practice, like setting up assets before we get started
and setting up certain color styles that we can load into our
different layouts. And here you can see we can
create pages or sections. In here you can see
the layers panel. But we need to create
an actual page or section first in order
to insert some layers. Let's just click here to
build from scratch here. What we do is we
click and drag from this panel over to our
canvas right here. So let's start a
two column layout. And then let's just say
we'll put an image in one side and we'll put a
heading in the other side, right in this side. Let's set the image. I'll click into the image. We can choose its
source. We can. Let's upload this image which actually comes
from the store, that instance attempt to recreate in one of
their Youtube videos. It's a store by
Beyonce called Sacred. As you can see here, we can
hover over certain elements, click on them to
reveal their settings, and we can see that it's
responding to our clicking. But what we can't do is click
and drag elements over. You can't really see
from your point of view, but I'm currently dragging this image across and
nothing's happening. So there's no click and
drag functionality here. But similar to Replo, we have this tree like structure which once again is going to be similar to the theme editor once that new update comes out. One of the cool features though is that maybe it doesn't have drag and drop functionality
to move things around. But it does have drag
and drop resizing, so I can resize this image
using the visual editor, which is a cool feature. So as you can see here we
are in page building mode. The two options in instant are to create a page or a section. So if I just hit
Publish on this, first of all, it's going to ask us to connect to shove Fi. I don't know why
it asks us to do this when we've already
installed the app. But maybe it's got
something to do with the app sitting
outside of the admin. So I'll click Connect. And I believe that
that will connect our site that we created
to our shove fi store. A site and a store seem to
be two different things, but we can connect
them together. And then now we can publish this page to
our shop fi site. Now we can click
here to view Page. Unlike Replo, it didn't
give us the option to customize the page title
and the page handle, but it has created a page on our shop fi store
using that layout. And so if we go over here
and go down to pages, we can see proof of
that right here. If I click on here for page, you can see that the name
of the page is simply page. And if we go into
it website SEO, we can see the
handle here of page. And then if we look
over at the template, you can see that we're using similar to gem pages,
similar to replo, we're using a template that was generated by them which will sit somewhere in our theme called instant followed by
a unique string. All right, so that's how instant is creating a page on our store. But the exciting thing
about instant is not so much that we can create
pages like we just did, is that we can create sections and then
these sections will have settings in built so that once we insert them
into our theme editor, we'll be able to edit them
using the theme editor. So ideally, we should be
able to take advantage of both the theme editor and instant page builder by following this system.
So let's test it out. Let's create a section.
Let's just say that we want this section to be
a product page section. What we can do is let me find the insert on
page thing here. What is it called?
The Insert Menu. And I'll go into elements. We could do another
two column layout and put in some static text, some static image, button, video, all of that good stuff. But what we can do is put in dynamic content from
the product object. If we put this on a product page or even if we don't put
this on a product page, we can link a product
and then pull the information dynamically
off that product. So we will need to
create a layout still. So I'll create a
two column layout. I just need to drag
it onto the canvas. And instead of putting a
static image on this side, I'm going to put the
product image on this side. And then instead of
having a random title, I'm going to put the
product title over here. But I've missed the
point, so I have to. It's up here, so I just need
to drag it into that row. Then I will also add in, let's say the price right here, product price and
the description. And add to cut button
underneath that. Okay, now at present nothing's showing up because we need to link it to a
shopper fire product. Right here. We can
select Set Source. Let's do the same one that we've been doing the whole time, which was the collection
Snowboard Oxygen. I believe it's this one. Then we can go here
for a product title, change the source to the
collection snowboard Oxygen. And I think it's
assumed the rest, this add to cart is currently linking to
this placeholder. So we want to change
the source to collection snowboard
oxygen as well. Okay, And then we can create, just like we can with the
other page building apps, we could create another sort of set of columns below it
and put more content in. But for now, let's
just, I'll undo that. Actually, it doesn't
let me undo that. So I'm going to have to
just delete that row. Has that worked? No. You just need to click that to delete. Okay, I think that's worked, although no, there's
another column there. Okay. All right, so now
I'm going to hit Publish. And instead of
publishing a page, it's going to create a section which is then going to be
inserted in our theme. And what we can do at that
point is bring in that section to any usual template within our normal theme
development paradigm, within our normal theme editor. And then we can
utilize that section. And I believe that this should also create settings as well, so that once we do put this
layout into our theme editor, we'll be able to edit it with
the theme editor as well. So let's see how this works. Okay, so I'm going
to go back over to my theme editor for
the current theme, Hit Customize in order to get there because we created
a product section. Let's go into products. We can go into
default product here. Let's just say we
wanted to replace this section for showcasing
our product information. I won't delete it,
I'll just hide both of these sections
so that they don't show. Then in ad we didn't really
name our section properly, we just called it S. I believe that's the name that's going to
come through here. But as you can see, the
section that we created in instant is now available for us to add in
the theme editor. So I'm going to click
that and bring that up. And you can see now that we've
got our information here, the only problem is this is for the collection
of snowboard oxygen. And as you can see here, we're previewing air pods
on the default product. So we don't want
this to apply to the Airpods product and every other product on the
default product template. But if I click on this section, you'll see that it'll
open up settings. So as promised, Instant
will give us settings along with the content when we publish a section to
our shop of I Store, which I believe
is pretty unique. I don't know if any of
the other ones do this. Maybe Jem pages now does this, I'm not sure, but I think this is where the hype around
instant comes from. But even still, what I don't
like about this system is there's three
different places where I can put in a product. So I've linked a product here, linked it twice again. Add to cut button. The
product hasn't been linked, but it should all
just be related to the single product, right? So given this
unexpected behavior, I thought it would be best
to ask the app developer themselves why we've got
three separate fields. And number two, how do we get the product to pull from
the product template? In regards to the second point, the support person tells me
that currently they do not support the use of creating
full custom product pages, yet it is coming soon, so all the sections
created are to be used as expansions for your
current product page. Essentially, what I think he
means here is that we can't pull the product from the product that we're viewing
on a product template. But what we can do is create sections that pull product
information from a product. We specify, we essentially can't use dynamic linking here. We have to go in and
explicitly set a product. But as for the three fields, he mentions here that currently each element is
connected separately. What we need to do is set the product connection
on the parent layer and then all layers
underneath can pull data from that
single connection. Cross referencing
this information with two T on instance
Youtube channel. I think what we need
to do is remove these individual dynamic
product sections completely and put in
some static content. But then link the
parent container to a shopper fire product. So looks like we're not
going to be able to get this section to pull
from a product page. But at least we can create some sort of featured
product section that we can use on other pages to highlight a specific product. Let me go back to the editor here and let me follow
through with this idea. So I'm going to remove all of these elements with
product at the start. All of these dynamic product elements that I entered before. So I'm just going to
use my delete key to more easily remove them. Now we've just got our
two column layout again. And you can see
here that the rows are connected to Shopify. Let's just remove that
dynamic connection. For now, let's put
in our static text. We had, what was it image here? Text here. Let's see. Now we need a heading text
for the product title. I'll remove actually, that
maybe can be our price. I'll leave that there. I'd
love to put in a button, but I don't know if we
can pull from shop, if I here. Let's try it out. Now that we've got all
the static content, let me go up here. And on the parent container, the column, let's set this
to a particular product. We should be able to change
this in the theme editor later with that dynamic source selected on the
parent container. Let's go into image, and you can see here that we can link to the parent source. And then if we scroll down, the content of the image can be set from
static to dynamic. And take the product
image that's going to pull from
that parent container, that's where the product is
coming from, under here. We've got the source here. And then we can go down
here in content here, we can do the same thing, move it from static to dynamic. There's one more step, I
have to actually select here what field on the product object I
want to pull from. So I'll pull from title there. You can see it
dynamically pulls. And then this little
bit of text here, let's pull the price right. And then down here, it's going
to pull from that source. But I don't think we can give
this a custom operation. Let's see interactions. Can we get this to add
something to the cut? Here we go. Action
add to the cut. Well, we've got our source
here. Let's test this out. Let me just rename this. If I dive into the text, let's say add to cut. Now hit Save, and let's
publish that section, and then we'll get
this handy shortcut to open that up in
the theme editor, let's see how this
changes the result. So we're inside the
theme editor again. And let's just go to
the product template. As you can see, we've
got double up of product information,
so let's hide these. And what we're left with
is just the section. Let me go in and check
the settings and he can see now we only have
one product field. So if I change this to
archived snowboard, we should get the dynamic data pulling through from
archived snowboard, which doesn't seem
to be the case. Unfortunately, it's
got this field here. But if I change
the product here, okay, now it seems
to be working. Okay. So that was a bit
of a glitch, I guess. All right, so now we can change this to whatever
product we want. And all of the details, the image, the title, the price, and the product that gets
added to cut should now be pulling through whatever
product we select here. Once again we're on the page for the collection
snowboard hydrogen. So let's just, we'll
try one more time. If we can use dynamic linking, I will select product and see if that changes when we now change what
page we're previewing. So if I use this to change the product that we're previewing through
the default product, let's change it to oxygen. Okay, so dynamic
linking does seem to be working now that we fixed
that issue with the inputs. And you can see here before when we were using
dynamic linking, it was saying from
current section, now it says from current page, which is what we wanted to do. And so I think
there was a bit of misinterpretation by me of the e mail sent through earlier. Apologies for that. But you can see that dynamic
linking does work. So now we can create
essentially the same as this, a main product information
section in instant, bring it over and still have some customization options
in the theme editor. So we're getting a little bit of benefit of both worlds here. So if I hit Save on this and preview it through
this theme, right? So this is on the default
product template, so this should be
really applying to basically all products. I'll click on this, this will open the product in the admin. I don't think there's
a link to open the actual product page,
which is annoying. But we can click Preview again to get to the
page on the front end. As you can see here we were clicking to
preview the collection, Snowboard Oxygen,
and we have that. Now if you click on
a different product, let's say something completely different, like a gift card. You'll see that the
same template is applying and that dynamic
data is pulling across. And this Add to Cart button should hopefully work as well. And it does, it identified that the product was gift card
and pulled that across. That's excellent. So this is the benefit of using
something like instant. Gives you a little bit of
the best of both worlds. So if you're going to be
creating something like a product page which
is highly dynamic, I'd recommend doing
something like this with instant over perhaps some of the other options we talked about in this class,
so that's instant. In the next video, we're
going to summarize all of our learning
so far and then conclude the class with your class project
and next steps.
9. Summary: Covered quite a bit going
over the various ways to customize a Hopi Fi website
with no code solutions. Let's quickly recap
before we move on to the conclusion
and class project. As you saw throughout
this class, no matter which solution
you choose to go with, all of them will go through a Shopifi theme as we
also saw in this class. With the exception
of instant creating a template or section on a
page building app will force us to continue using that
app in order to make changes to our front end files will
be inserted into our theme, but in order to change the code, we'll need to go back to
that app that created them. In the next video, I'll share my personal
recommendations. But to complete the
summary for this video, here are some
points to remember. Number one, the Shopify
Online Store Sales channel is built on a system of templates,
sections, and blocks. In future, you'll be
able to nest blocks within blocks to create
more complex layouts. But for now, blocks exist on a single level nested
underneath sections. Number two page builders help you to create custom templates. These templates are not split up into multiple theme sections and therefore do
not take advantage of the features of
the theme editor. That being said, number
three page builders are now also moving into creating theme sections in order to play nicer
with the theme editor. But so far I'm yet to see any of these page building apps
generate blocks for you. Number four page building apps create a mess in your
themes code base, which may cause issues if you want to customize
the code in future. And finally, number five. Each page building app is
also a separate system, meaning that you usually can't migrate a template from
one app into another. Conversely, if you only build with the native theme sections, you can share these
files between themes and migrate sections quite easily between themes and other stores.
10. Conclusion: Congratulations. You've now made it to the end of the class, which if you've watched
all the videos, you should now have a
good idea of the options for customizing your
store without code. As a developer though,
I can't stress how much learning a
little bit of code can help you avoid a
lot of the problems caused by relying on
external apps Enough, That's why I recommend learning at least some Shopify theme
development if you really want to have full control
over your shop offi store. If you're curious to see
what that looks like, head over to my
Youtube channel code with Chris the freelancer, or check out some of my classes, specifically on Shopify
Theme Development here on Skillshare.com For now, as this is a no code class, I want you to choose a
solution from the class, either the native theme editor
or a page building app, and build your own custom
section or template. Once complete, add your work to the class project section of the class to share with the other students or to
get feedback from me. If you've enjoyed this class, make sure to leave a positive
review and be sure to check out some of my other
classes here on Skillshare. Thanks for watching and I'll
see you on the next one.