Customizing the main page of your online store
From this video you will learn:
- How to use theme sections to create dynamic layouts.
- How to Create a Stylish Homepage That Reflects Your Brand.
- The Importance of Image Alternative Text.
Hi, I'm Samantha. I'm a small business owner and work here at Shopify.
It's time to set up the home page of our online store. The home page of your website is designed to introduce your brand and your products to your future customers.
It's important to share information about your brand and why your product can solve a potential customer's problem.
Let's start at the top of the sections and work our way down. The first section is the title. Click on "Title". Let's start by uploading our logo. It's important to provide Alt text for your images on your website so that visually impaired users can understand what the images contain. This also allows Google to understand the content of the images, which is essential for SEO.
The Brooklyn theme also allows you to add an additional logo that will only be shown on the homepage. You can change the width of your logo if you want, and its height will automatically adjust. This way, you can keep the original aspect ratio.
Next comes "Search Type". I'm not going to change this.
Next up is the Menu option. I already have my main menu set up with the most important links for my store, so I'm happy with that. If you haven't set up your menu yet, you can click Edit Menu to go back to your Shopify admin area and create a new menu.
"Additional Sidebar Menu" is additional links that will be shown in the mobile navigation. It is recommended to add the menu from the footer here so that your customers do not have to scroll down to the footer when they browse the site on a phone.
The Announcement Banner is the banner that appears at the top of my screen. You can remove it completely or use it to display messages to your customers. I would like to offer a 10% discount for new customers, so I will write that here. I will go ahead and add “Get 10% off your purchase using promo code ONE-TEN.” I will also link this message to my product page. I can also change the color of this banner to better match the design of my site.
The next section is Slideshow. I like these settings, so I'm not going to change anything. I want a big image here, but I only have one, so I'm going to delete the rest of the slides. I'm going to click on the remaining slide and add an image.
Click Edit and then add Alt text. The background opacity of the content area ensures that the text on top of the image is clearly visible. Adjust the overlay opacity if the contrast is too low.
I really want to encourage customers to make a purchase, so in this section I will highlight my most popular product. To encourage purchases, I will add a button that leads to my product page. I can see that the color of my button here is not the same as the one I set in the general theme settings. This is because this button is on top of the image, so the theme gives you more control over this particular button. This ensures that you can choose a color that will contrast well with the image. I am happy with this.
Now I'll go back to the Sections. Next up is the Rich Text Section. This area gives me the opportunity to introduce my brand and my products. You should aim to use clear and concise text here. Describe the benefits of your product or service.
The next section is the Collection List. I have several products and only one collection. At the moment, this section is not quite suitable for my store, so I will delete it. You can always create a new section in the future by clicking "Add Section".
The Featured Collection section allows you to showcase your bestsellers or most popular products to your potential customers. If you only have one collection, it will be displayed here by default. However, if you have multiple collections and want to change the default one, click Edit.
Now I'm going to click on the "Newsletter" section. Giving users the option to sign up for your newsletter is a really effective way to further market to your customer base. We won't be focusing on email marketing right now, but we'll have a lot of great stuff to do in the future. For now, I'm going to edit the copy to make it more in line with my brand.
Back to Sections. The last section is my footer, which I really like, so I'll leave it alone.
Great. I'm very happy with how my home page looks. In the sections sidebar, you can add new sections and change their order by clicking and dragging them around, using the six little dots icon. When you're happy with your changes, click "Save."
Now you know how to edit sections of your theme and create your own website without any technical knowledge or coding skills. I recommend reviewing each page of your store to make sure you are happy with how it looks before you open your store.
It is also recommended to visit the site in the mobile version by clicking on the phone icon at the top of the editor before launching the store.
Your store will evolve as your business grows. If you need additional technical support, you can access additional resources in the Shopify Help Center. If you have specific questions about your topic, contact our support team for personalized support.