VIDEO: Getting Started (3/9): Designing Your Store

Disclaimer: We recently redesigned our Admin Area. Your store may look different than the one shown in this video, but most click paths were not affected.

 

Transcript

Welcome back! I’m Graham with Volusion. You might be wondering why I look so sharp today. Well let me tell you: because today is all about cleaning up your site and making it look professional, so I figured I’d better look the part. If you watched our last episode, you already know the essentials of establishing your company online. Now we’re going to take your brand and extend it to the shopping experience. Let's check it out.

That means it’s time to pick a template. Your store has one applied by default, but you should definitely spend some time reviewing your options to find one that’s the best fit for your merchandise and company personality. In your Admin Area, go to Design > Template. At the top of the page, you’ll see the default template, called Retro, under the Active Template tab. If you want to preview this template on your store, click View Storefront.

To see the other choices, scroll down to the Template Gallery section. Hover over a template for a quick peek, or click it for more information and screen shots. Some templates even have live demos you can browse for a closer look.

If you’re looking for something in particular, maybe only free templates, or templates with orange in the color palette, you can use the Filter By menu on the left. When you find a template you like, click Get It if it’s free, or Buy if it’s a premium template. Since we’re creating a vintage clothing store, I think the template called Hipster best fits our concept, so I’ll go ahead and select it.

Scroll to the top and select the Saved Templates tab. You’ll find your template here. Press Activate next to it, then go ahead and check it out on your storefront to make sure it’s what you want. If you’re using one of the free templates, it’s not as important to make up your mind once and for all. If you change your mind later and you haven’t made any customizations to the code, you can usually just make the switch here with no problem. If you’re using a premium or custom-developed template, though, it’s much more important to make sure you’ve got the one you want.

Once you’re happy with your choice, it’s time to add your logo. Go to Design > Logos in your Admin Area. The Website Logo appears at the top of your storefront on all pages. You can either upload an image file, or type in your store name to create a text logo. To add your image, just drag the file from your computer into the drop area. You can also click the upload icon and browse for it in your local directory. There’s a few guidelines listed here, so make sure you follow them.

During the process, you’ll choose whether you want to use the file for your mobile storefront and order invoices as well, or you can choose to add them separately. To do that, click More Logos. Here’s what the logo looks like on a mobile device, and here’s what it looks like on an invoice. You’ll also find the Favicon Logo option here. That’s the small image that appears next to your URL in a browser address bar or tab. And here’s our Volusion Vintage favicon in action.

The last thing I want to talk about is the stock homepage image that comes with your template. It’s essentially a placeholder to show you how an appealing image can enhance the look of your site, but it’s best to replace it with one you’ve chosen yourself to represent your business. I’ve already prepared one for my site, and I’ve made sure it’s the same dimensions as the existing one so it fits the page the same way.

To find the dimensions of the stock image, right-click it, select Save Image As, and save it to your machine. Now locate the file in the directory you saved it in, right-click it, and select Properties if you’re on a PC, or Get Info if you’re on a Mac. You’ll find the dimensions under the Details tab. When you’re ready to replace it, hover over it and click Edit. If you don’t see this option, it means your Storefront Editor is turned off. To turn it on, go to the Volusion Toolbar, hover over Edit, and flip the switch. If you don’t see the Volusion Toolbar, it means you’re not logged in to your Admin Area.

The Storefront Editor lets you add images, hyperlinks, custom text, or even write your own code. All I want to talk about at the moment is changing the image. Delete the stock image, then click the Insert Image icon. Find the file on your computer, then drag it in and save. You can do the same thing for many of the graphics and buttons throughout your site. Just keep in mind that if you want to change product images, they have their own special management section in the Admin Area. We’ll show you how to use it in the next episode.

If you’d rather have someone design your site for you, we’d be happy to help you out. Visit Volusion.com, go to Services > All Design Services, and choose the aspects of your site you want us to design. Shoppers will be far more likely to feel comfortable buying from you if your site looks professional, so don’t underestimate the importance of this aspect of your business.

So today we went from this, to this. Now that your online store is dressed to the nines, it’s time to start filling the shelves, so to speak. In the next episode, we’ll tackle the bread and butter of your website: adding inventory. So stick around for more helpful tips. Now if you’ll excuse me, I’m going to make myself more comfortable. There! Much better.