Up next in 10
How To Design A Shopify Website
2K views
May 11, 2024
"Embark on a journey of ecommerce excellence with our tutorial on 'How To Design A Shopify Website'. Join us as we guide you through the process of creating a visually stunning and highly functional online store using Shopify's intuitive platform. Learn step-by-step how to customize themes, design product pages, and optimize the user experience to captivate your audience and drive sales. Whether you're a beginner starting your first online business or an experienced entrepreneur seeking to revamp your digital storefront, this video offers practical tips, creative inspiration, and expert insights to help you build a Shopify website that stands out in the competitive landscape of ecommerce."
View Video Transcript
0:00
How to design a Shopify website. Hey guys, welcome back! In this video, I will be showing you how you
0:04
can design your Shopify website as a complete beginner if you have just started with Shopify
0:10
and you don't know how to design your website, how to make you look professional, how to get
0:15
more customers, then this video is going to be for you. So, let's get into it! First of all
0:20
you require an account on Shopify.com, so you can go to Shopify and you can sign up with your email
0:26
address. You can use your Google account as well. Once you sign up and you create a store on Shopify
0:32
this is where you will get. This is the basic admin and the dashboard that we have on Shopify
0:37
So, with our Shopify, we do get a default theme but we have to customize it completely. We have
0:44
to design our store in order to showcase our products. So, once you get to your Shopify
0:50
what I want you guys to do is you're gonna go to the online store here. Once you select online
0:55
store under the sales channel, you have to select themes. After selecting themes, it will show you
1:02
the theme that you have for your store. Now, the default theme that we get is the dawn theme which
1:07
is the first one you can see right here. This is the look for the dawn but we also have a lot of
1:11
different templates to choose from, a lot of different themes. So, you can visit the theme
1:16
store and select the theme that you want to. There are 80 plus free themes available and then they
1:21
are paid as well. Very professional themes for different purposes. So, if you have any kind of
1:26
store, any kind of vision in your mind, you will select the theme first. Click on add option and
1:31
the theme is added to your Shopify. I have selected the dawn theme which is the simple one and we will
1:37
be able to customize it very easily. Once the theme is selected, you can see it says current
1:43
theme now and now I can actually click on these three dots. We can rename it, we can duplicate
1:48
we can preview and we can actually edit the code as well. There are some of the editing that we can
1:53
do with the coding as well but as a complete beginner, if you don't know coding, you can
1:58
customize your store completely and that's what we will be doing. You can also duplicate your theme
2:02
if you want to. If you feel like you will mess up, if you're working with coding, you can actually
2:07
duplicate it just to be safe and to have a backup. So, for us, we'll just click on customize and it
2:14
will take us to our Shopify editor. So, here we have our Shopify store. You can see in our Shopify
2:20
you know default theme that we got. We just have this image banner here, we got the shop name
2:25
I can scroll down and we have the footer. Here at this side, we can see the page. So, this is the
2:31
home page for our store. Then we have a product page, we have collection page, collection list
2:35
pages, iBlogs and more. If you want to customize the pages, you will actually have to go back to
2:40
the customize option where we were. We had the page option and this is where we customize the
2:45
pages. I will be customizing the home page for you guys so that you will get an idea how to use all
2:50
of the tools and then you can customize the whole website. Then we have our theme settings here
2:55
where I can customize the logo, colors, typography, layout, buttons and then we have variant fields
3:01
inputs, collection cards, blog cards, media and more. So, I'll go to these sections first and the
3:08
first section we have is the header. In our header, we are getting a header bar and we got our cart
3:15
option, we got the search bar and we got the menu. I am actually happy with the header but if you want
3:20
to add another section after the header, you can do that but we have an image banner already added
3:26
Here, you have to upload an image. So, we'll select the image from our computer. This is where you
3:32
will upload the media or you can select from for your images as well. I'll just upload the media
3:36
here and use it. So, I have uploaded the image. This is our first banner image that I want for my store
3:43
and you can see it looks pretty good. We can go for more than one image or we can change it or edit
3:47
it out now but I'm going to go with this image. Once you edit the image, we can go back to the
3:53
other sections of our, you know, image banner. So, we have a heading. This is where I'll customize
3:59
the name and I'll add the name for my store. So, this is our store name. Now, I can go back and we got
4:05
this tagline and then we have a button too. So, in our, you know, banner image, we got a button. So, we can
4:12
change it to shop all or buy now and we can add a product link. So, this button takes us to the product
4:18
page. Perfect! Now, we can go back and we will add more sections to our, you know, website here. Of course
4:26
click on the add section option and we can add a featured collection, featured products, rich text
4:31
image with text, slideshow and more. So, here I want to add my featured collection. So, we'll select
4:37
featured collection and it will be added. This is where we'll add our products. Okay, let's add
4:42
another section. Click on add section and we can add a slideshow of products or we can add a
4:49
multi-column, multi-row. Let's go with a video. Okay, perfect! So, we have video. I'll add it onto my
4:56
homepage. So, for homepage, I am not going with much. We have a banner image. We'll get a featured
5:01
collection and then we have a video. So, in our featured collection now, it will automatically be
5:07
added the products or you can choose the product from your store. So, for that, you'll have to go to
5:12
buy to your Shopify admin. I'll actually show you at the end how to get to the products of your
5:17
Shopify store and you can create a featured collection. Then, I'm going to scroll down and we have a video
5:23
So, in our video section, you select the video and we have a heading which says video. I'm not going to
5:30
add any heading for the video here and we can select an image as a thumbnail. So, it's very
5:36
important. So, I'm going to do that and we'll select one from free images. So, let me show you how it
5:41
works. You just go to any of the images here and you can select it but you can actually go to your
5:48
gallery and select your image so that it aligns with your brand. So, I have selected this image
5:53
here and now we'll go to the video. For a video, you have to enter a URL. You can add a URL of a
6:02
YouTube video. You can add a URL of a website video. Any video that you have created, you will add it
6:07
right here and this is what it will look like. We can change the alignment of any of these sections
6:13
that we add to our Shopify store, of course. You can change the section padding. You can change the
6:18
bottom padding and it will, of course, decrease the pixels a little bit and make it a little bit
6:22
smaller and it will adjust it according to your store. So, you can see right here, this is what we
6:28
have now. After that, we can go back and we will add more sections. At the bottom here, we have a footer
6:36
So, the footer is pretty simple. We have subscribed to our emails and we have an email here
6:40
but we can add more to our footer here such as our social media icons. We can add our country and
6:47
region. We can add our language selector spacing. So, we can also edit these things with the coding
6:53
and we can edit the theme with the coding as well and if you want to customize the design of your
6:59
theme, you will go to the theme settings. Here, I can go to the colors and this is where I can change
7:04
the colors of my store. Now, coloring is really important. It should align with your brand that
7:10
you have. So, you can change the gradient colors. You can change the primary colors, secondary colors
7:15
of your text. You can change your text colors, the all text color, heading colors, everything
7:20
very easily. Then, we can change the typography. This is where we will be able to change the fonts
7:26
and the style and everything. So, you can see this is the phone that we have selected but we can
7:30
change it. We have social media icons here, icons, badges, stores. Then, we have currency format, cart
7:36
checkout. So, for cart, we have a cart option and we have our show window, enable cart note. We have
7:42
select collection. So, all of the options will be available under the theme settings. Now, you will
7:47
go to your next page and customize it. You can customize your store really easily and design a
7:52
website of your choice. We also have these three dots at the top where we have edit code. We have
7:58
view, edit the default theme, documentation. When you're working with Shopify, click on the save
8:04
button after doing something so that all of the changes that you have done are saved. For now, I'm
8:09
going to click on save and let's go back to our pages. Here, we have our theme. Now, you can see
8:15
we have customized our store a little bit and it'll show us here. This is the outlook of our store and
8:20
I can check it out too. I can view my store. Then, you have blog post and pages, navigation. I can go to
8:26
the products here and this is where I will create the collections and a featured collection to add
8:31
to my store. If you want to get a preview of a store, any theme that you have selected, this is
8:36
the theme that we have and Dawn can create a store like this. Once you completely customize your
8:42
Shopify store, this is what it will look like and it looks pretty good and super professional
8:47
So, yeah guys, this is how we customize our Shopify website and store. I hope that I was a big help
8:53
Don't forget to give this video a big thumbs up, leave a comment down below
8:56
turn on bell notification and subscribe to YouTube channel
#Business Education
#Consumer Resources
#Skins
# Themes & Wallpapers