Designing your Online Shop

The following applies to designing your 123-reg Online Shop.

Your shop is starting to take some shape and is ready to be formatted and designed exactly how you want it to look.

So to begin, log into your Online Shop account using your 123-reg Control Panel.

Let’s start by quickly saving a back-up copy of your website as it currently is, just in case you make any changes that you don’t like and you want to go back to a previous design.

Click on design, and then go to My Styles.

For the style you are currently using, just click back-up copy.

This copy will now appear just underneath the active style.

You can then rename the saved copy, so you can easily find it later on if you need to use it.

Ok, now let’s have a look at designing your shop.

The lay out is important for ensuring that your products are easily visible to customers, so they know exactly what they can purchase.

So first, if you haven’t already, you may want to add in a few pages or use the ones that are already installed with your template.

I’ve added two additional pages to show the different types of T-shirts I will be offering my customers.

To do this, just click on ‘new’ under the ‘Content and Categories’ menu.

Select ‘Page or Category’, name the page and then select ‘Insert’.

Great, now we can start customising the homepage for our ‘Bulk Buying T-Shirts’ Online Shop.

It’s easily organised into sections allowing customers to decide if they wish to buy standard plain T-shirts in bulk or design their own.

This gives the customer ease of purchase as they will be able to click on exactly what they want, so they can then create and purchase their order.

Remember your homepage should be as inviting as possible as this is the first page the customer will see when they visit your website.

A cluttered, unorganised or confusing page could immediately turn them away from your website.

You can easily add in your company logo, just click here and then upload your image, just remember that the maximum file size is 15 MB.

Once your logo is in, you can move it around and place it where you want.

A header image is a great way to help your Online Shop and Corporate identity stand out.

You may already have your own header and background images designed for your company’s brand, so you can easily upload them in the quick design panel, by clicking header or background image.

There is also a selection of pre-set images to choose from.

On top of the header, you should already have your company website and a slogan which you added when you went through the set-up assistant.

This is easily editable, just hover over the text and click on the pencil icon to open the editor, you can then change the text size or font.

Use this button at the top here to see your website page as it would be presented to a customer.

If you see this no access symbol here, don’t worry, it just means that your website is not live yet, so only you can see the preview pages.

You can also click on this button here to see how your shop will look on a mobile device if you choose to optimise it for mobile use.

Ok, so having a few products on your home page is also a great way to get customers into your online shop.

Think of it like a shop window, so you may want to show off your best products here, or products with special offers.

And of course, some text about your company or what you sell would be hugely beneficial on the homepage.

Customers can use this to gain an overview of what you do and sell straight away.

So, you may notice some plus icons dotted around the page.

Clicking on these icons allows you to add in content elements to your shop design.

Let’s have a look to see what these tools do.

To change the font for all of your headings click here, and to change the sizes of your buttons and format them, just click here.

And if you decide you no longer like the template you chose to start with, you can easily change it by clicking here.

You’ll notice in the design menu that there is also an advanced design tool.

This allows you to directly edit the elements that are on your page.

So if I click on my navigation bar I can easily edit the text size, background colour and I can also navigate and position the element.

Just remember to click save once you’ve finished editing to save your recent changes.

In the advanced design menu you can also change the size of your shop by editing the width value here, and the padding allows you to create some room around the main body of your website.

If you need to edit text in one of your text boxes, click on content/categories and then click on the text you want to edit.

You can then simply change the font style, size or add in additional text.

I’ve also chosen to add some purchase logos to the bottom of my Shop design so customers can easily see which payment options we offer.

So as you can see, design is hugely important for ensuring that your customers will want to stay in your shop and purchase your products.

Just remember to think of your online shop as a real shop you would visit, would you stay there long if it didn’t look professional or was cluttered with disorganised product sections?

Once you’ve got your shop designed exactly how you want it, you may want to think about how you want to display your products.

Check out this video to find out more.

Why not check out our video that shows you how to add products to your Online Shop.

Designing your Online Shop.

In your Online Shop, you have the choice to choose a template in which to work from. There is a large selection to choose from and they are organized according to different business sectors. You can then choose different variations of the same template and some allow you to choose different colours. When choosing, make sure to pay attention to the preview window. There is also a paintbrush scale to indicate the level of customisation that a particular template allows, the more paintbrushes, the more customisable.

Quick Design is one method of designing your eCommerce shop. Quick Design allows you to make quick and easy changes to the overall theme of your shop, such as font and colour. When using Quick Design, you’ll be asked if you want to create a backup copy. This is so that once you have started the design, you have a copy to go back to if needed.

If you wish to make more advanced changes use the Advance Design function. Advanced Design is where you can completely modify the look and functionality of your shop. You can place images, change page dimensions, and insert page elements. Page elements are split up into different topic areas and consist of categories and products, shopping baskets and orders, payment and more. To insert a page element, click on ‘Insert Page Element,’ select the required element and click ‘Insert.’

To make changes to your product pages, click on the Content/Categories tab and select ‘Preview.’ From here you can edit the overall appearance of your product pages including the layout, products shown, and information on the page.

‘My Styles’ is where your backups are saved and in here you have the ability to create different shop styles which can be easily swapped, which allows you to instantly change the style of your site, for example on holidays or in changing seasons.