hi my name's Anthony Walker I've designed sites for clients for a very long time before joining Wix today we're gonna dive into design now that you have your site map built in this lesson you'll learn about web design best practices for e-commerce using Wix Adi versus the Wix editor and optimizing your site for mobile users all right so let's talk about design so design is very important because it's the first impression that a users gonna get when they get onto your website so everything from the text to the font to the way everything is in terms of ease of use is very important in order to capture your user and allow them to travel and convert so when it comes to online sales it's very important that your site structure is very neat and organized because it really helps increase sales let's take a look at some Wix merchants we did a great job as you can see here everything on this site is designed very nicely they have a clear call to action that's above the fold that allows users to easily buy now and upon clicking it you'll arrive directly on the product page and again even the Add to Cart button here it's gonna be above the fold all right now we're gonna dive into hip hip shop comm we're gonna look at this website as it's a very nice call to action you immediately see what the intent is you can click on shop and arrive directly on the product page as well you can also go and click on your cart to see what you purchased you have a nice mini cart that kind of pops out from the right hand side so very good navigation and then I end up on this page where I can easily again click on any product that I want and land directly on the product page so now let's talk a little bit about the first fold it's very important that everything that you put above your first frame or above your first fold which is only what the user will see before they start to scroll it's very important so you want to add a clear-cut call-to-action one like by now act now something that gets to user to actually do an action and start purchasing something especially for an online store so now we're gonna talk about some homepage mussed so when it comes to home pages it's very important to have a strong first fold everything in your throw spurt should again be very prominent and very direct to an exact goal or intent next you should move on to building out clear navigation with your navigational bar if you do have lots of products consider adding some sorting options or filter options or even adding a search bar to make it easier to find products in addition you maybe even want to create some beans collections for your site I'm not you can also include SEO keywords throughout your website especially in the header and for a site speed it's good to add heavier content like videos lower on your page when it comes to SEO and images it's very important that every image on your website has alternate text as Google does not read images so now let's take a look at how to add alternate text in the Wix editor so first we're gonna click on the Settings gear icon on the image and then right underneath where it says what's in this image we're gonna tell Google exactly what we want so it's very important to describe the image for the actual contents that it contains when it comes to making your site more interactive we should definitely use some social media icons especially above the first fold so you might want to consider using features like pin to screen as well as even adding Live Chat to make sure that every single time a person comes to your website they can communicate with you at any time of day in addition we can consider adding some things for trust you know like you know trust icons that you might get from like the BBB or cool badges that show how verified you are certified you are on other places maybe like Trustpilot for example so when it comes to your footer it's very important that you add your policies down there maybe even a menu back to products your map your contact form or physical locations as well as social media links when it comes to fa Q's it's very important that you add this on your website especially in the footer to make sure that every user can come to your website and find answers to all your frequently asked questions so now that you know about footer and must let's now dive into editors and why you might choose the ADI over the editor or vice versa so Adi is a really good option for if you just want to kind of like easily kind of accelerate the production time and your website design you don't have time of actually going through the editor and building everything page by page and step by step so the ad I really builds everything really quick for you it really just accelerates your production time it actually pulls your logo colors from your logo and actually builds a custom color palette in addition build your text themes making it really easy for you to start your production and your website in addition once you have everything the way you want it to be on the ADI but you want some more customization you can actually transfer your site design from the ADI to the editor fully releasing all of wix's capabilities for design customization so in terms of the editor one of the key benefits are going to be again full design customization you're not going to be limited by the constraints of the ADI you're gonna have full access to use more advanced functionalities even you wanted to develop more advanced things with code for example or even if you wanted to just kind of like have more experience with layering or having more abilities to lay your things on top of one another or more functions in the mobile app for example you can really customize your whole experience so now let's move on if they got a perfect Wix template be aware that some templates already have pre installed applications for which stores making it easy for you to start your online business so all of those best practices that we've discussed are already going to be a part of all of those great templates including you know instant chat including options for good call to action above the first fold just keep that in mind as you pick your template out on Wix calm now that you chosen a template I think it's very important that you know that wicks makes it easy to optimize your site for mobile devices and as you can see when you go inside of the mobile editor here you have options to customize everything maybe even hide some elements from the desktop that are on the mobile device as well as even customize everything in terms of the look the feel the menu maybe you want to add a welcome screen or even like a cool toolbar at the bottom of the page which makes it really easy to do just that one of my favorite things to do on the mobile site is to enable my back to top button so I'm making those really long scrolling pages something that I can access easily from the bottom and go right back to the top lastly well dive into some marketing tips to optimize your site so one thing i really suggest is installing hot jar onto your website or you can also use crazy egg it actually allows you to understand every single inch of your business traffic where it comes from so you can optimize and get the most out of your marketing campaigns thanks so much for watching for free to check out the resources below and look forward to our next lesson you .
This is one lesson, in a series of 13 in-depth lessons led by Wix eCommerce experts.
Learn more about Wix eCommerce School:
About Wix eCommerce:
The Wix eCommerce platform provides businesses with all the professional tools and services
they need to sell online and in-store. Build your eCommerce business and sell on multiple sales channels, including web and mobile storefronts, social media channels, online marketplaces and physical retail locations. Manage and track everything with an advanced, integrated dashboard: from inventory, orders and fulfillment to payment and brand marketing. Join over 500,000 stores worldwide—run and scale your eCommerce business on Wix.