Website Builder Essential/Complete Manual

Transcription

1 Fasthosts Customer Support Website Builder Essential/Complete Manual This is a designed as a definitive guide to all the features and tools available within Website Builder Essential/Complete.

2 Contents Introduction... 4 Getting Started... 4 Choose a theme...4 Complete your site profile...5 The Feature Widget...7 Adding Content... 8 Adding Text... 8 Editing Text... 9 Removing Text... 9 Formatting a block of Text Creating Links Images Best Practices Uploading images Add an Image Using the Photo Editor Additional Image settings Finding the URL of an image you have added Adding downloadable files via Dropbox Adding an audio stream using SoundCloud Themes - Changing the look and feel of your site Colours Changing all the colours in a theme Background Changing background colour Adding a two colour background Choose a background Image Fonts Changing your website fonts Page Layout Widgets Button Divider Spacer Columns Favicons Creating a Favicon Uploading your Favicon Page management Add a new page Page Settings Rename a page Remove a page Choosing your home page Choosing what to publish Add JavaScript to your page Organising your pages (Page Folders) Page redirects Adding a redirect Page 2

3 Removing a redirect Navigation Changing the order of pages Create a sub navigation menu Choosing which pages to display in the Navigation Menu Displaying Pages in the Navigation Menu Hiding Pages in the Navigation Menu Changing the font in your Navigation menu Shop Quick Setup Shop Credentials Payment setup Shipping Setup Add your first product Add your Payment Details Shipping Options Settings Status, Name, Address Ecommerce Widgets Product List Basket Featured Products Categories List Products Adding a product Editing a product Removing a product Changing product visibility Importing a product Blog Setting up your blog Adding a blog post Social Twitter Twitter Widget Add a tweet button Facebook LinkedIn LinkedIn Personal LinkedIn Business Disqus Yelp Reviews Add ons and Widgets Forms Creating a contact form Creating a signup form Testing a form Adding Video Map Page 3

4 Call Me Embed Slideshow SEO, Sitemaps and Google Analytics SEO Optimise your site Google SiteMaps SEO Settings Google analytics Google AdSense Index Introduction Website Builder Essential/Complete is a powerful and feature rich application that allows you to create websites without the need to learn the HTML language or web design skills. It comes with ready-made templates that can be modified with text or images, allowing you to create a website that suits your needs. Getting Started Choose a theme When you first login, you will be asked to pick a theme to use. Click on one of themes you want to preview. Page 4

5 To use the template click the Template ready button, otherwise you can click All templates to go back to the template list. Complete your site profile Click the Manage icon from the main menu in the left hand side. Select Profile from the menu that appears. Drag and drop a logo onto the area shown or upload one using the choose an image button. Page 5

6 Step 4 Enter a Business name, Headline, Strap line and Company Description in the boxes provided. Step 5 Enter copyright statement and enter your PayPal address in the boxes provided. Then select a currency from the Currencies drop down menu. Step 6 Enter your and postal address along with any social network details you want to add. Quick tip: Any social network details added in here will add social icons at the bottom of your pages. These will link to your social profiles. Once finished, click the Save button at the bottom of the page. Page 6

7 The Feature Widget By default there will be a Feature widget on your theme, you can customise it how you want it or hide it completely. Click on the Feature widget to bring up the settings next to the left hand menu. Select from the following options: Use template image: Use the default image for the background. Use your own image: Add a custom image for the background. Hide the feature: Hide the feature widget completely. (optional) If you have selected Use your own image click the Choose image button and select an image from the galley or upload a new one. Page 7

8 Step 4 1 Enter text for the header Choose the style for the header. Enter text for your strapline. Choose the style for the strapline. Choose whether the show the button. Select where the button will link to. Enter the text for the button. Once finished, click the Save button at the top of the settings. Adding Content Adding Text Note: Some software (such as Microsoft word) will add hidden formatting code to your text. If want to copy and paste text into your website, make sure that you Paste as Plain Text. To add new text, expand the Add Content menu and drag either the P or H1 widget onto the section of the page you want it to appear on. A new text box will appear where you dropped it. Page 8

9 Editing Text Click the text box you want to edit, a text editor will appear. Edit the text that you want to change within the text editor and click Save. Removing Text Click on text box you want to remove. An options menu will appear above the text. Click the Cross to remove it. Page 9

10 Formatting a block of Text Double click the text box you would like to format. Select the text you want to re-format and choose how you would like to re-format your text Styles: Choose a theme style for your text. This is useful to preserve a single feel across your website. Our chapter on font styles will show how to edit or create new font styles on your website. 2 Font Size: Adjust the font size of your text. 3 Justify Text: Choose how to align your text within the text box. Page 10

11 4 Format Text: Make your text bold, italic or add a strikethrough. 5 Lists: Turn your selected text into an ordered or unordered list (bullet points). 6 Colours: Change the text and background colour. Creating Links Double click the text box and highlight the text you want to turn into a link. Click the Add Link icon and select the type of link you want to add. These are documented in the following sections. Internal: Add a link to another page on your website If you select Internal from the drop down menu another window will appear. From this select the page you want the link to go to and click Save. Page 11

12 External: Add a link to another location If you select External from the drop down menu another window will appear Enter the URL of the page you want your link to navigate to. Step 4 From the Target window dropdown, choose if you want the target link to open in a new window, or in the current window. Generally, it s better to open external links in a new window so that visitors can remain on your site. Step 5 Click the Save button once finished. Mail: Add an link If you select Mail from the drop down menu another window will appear Enter the address you want to use and click Save. Page 12

13 Images Click an Image to open the image options. 1 Copy: Copy the image into the clipboard Choose Image: Choose another image to use Edit: instead. Open the image in an image editor. 4 Columns: Choose a different column layout. 5 Move image: Remove the image from your website. 6 Remove: Remove the image. Best Practices Images are important on a website, however large images (in file size, rather than area) can slow your website down and use up your visitors data transfer quotas (if they have any). When you add an image to your website you should always look at reducing the file size of the image before you upload it. There are two main ways of reducing an images file size: How large is the image? Reduce the image to the size that you need it. What quality do you need? A camera may take a high resolution photo, but your visitors will not need that level of details, and their screens may not be able to display that much detail. You can reduce the quality of photographs without any reduction to the quality of your visitor s experience. Page 13

14 While many photo and image editing software will be able to do this for you. If you don t have access to any existing software, there are still plenty of free alternatives (such as available online. Important: is a third party website with no affiliation with Fasthosts. Uploading images Click in the Images icon in the left hand side of the page, then click Add images. You can either drag and drop a JPG or PNG image from your computer into the box or click Choose files to upload your image manually. Add an Image Once your image is listed, simply drag it to the location you want it on your website. Page 14

15 Using the Photo Editor Edit an image on your page Click on the image you want to edit and select the Edit icon. The image will now open within the editor. Edit an image from the gallery Click the Images icon from the left hand toolbar. Hover over the image you want to open in the editor and click the Edit icon. The image will now open within the editor. Photo Editor: Enhance Open your image in the Photo Editor and click the Enhance icon. Page 15

16 Select from one of the three options. Hi-Def: Sharpens your photo and make it clearer. Illuminate: Automatically adjusts the lighting in your photo. Color Fix: Automatically adjusts the colours in your photo. Click the Apply button to save the changes. Photo Editor: Effects Open your image in the Photo Editor and click the Effects icon. Select one of the effects to apply to your photo and click the Apply button to save the changes. Photo Editor: Frames Open your image in the Photo Editor and click the Frames icon. Select a frame to apply to your image and click the Apply button to save the changes. Page 16

17 Photo Editor: Stickers Open your image in the Photo Editor and click the Stickers icon. Drag to sticker you want to a position on your image. You can then resize and rotate the image how you want it by dragging the round icon in the bottom left of the sticker. You can also drag the sticker itself to reposition it on your image. Step 4 Click the Apply button to save your changes. Photo Editor: Crop Open your image in the Photo Editor and click the Crop icon. Page 17

18 Either select a preset crop or use the round icons to select a custom area to crop. Once you have selected the area you want to crop from your image, select the Apply button to make the changes. Photo Editor: Resize Open your image in the Photo Editor and click the Resize icon. Click on the Padlock icon to toggle Maintain proportions on or off. If Maintain proportions is on, this will keep the image proportions in place meaning that your image will not become distorted. Edit your width and or height by changing the numbers in the respective boxes. Once done, click the Apply button to save the changes. Photo Editor: Orientation Open your image in the Photo Editor and click the Orientation icon. Page 18

19 Rotate and/or Mirror your image. Rotate: Use the Rotate buttons to rotate your image 90 left or right. Mirror. Use the Mirror buttons to flip your image vertically or horizontally. You can also use the round icon to rotate your image manually. Click the Apply button to save your changes. Photo Editor: Focus The Focus tool allows you to select an area of your image to be in focus leaving any part of the image outside this area blurred. Open your image in the Photo Editor and click the Focus icon. Select either a circle or rectangle for your focus area. Drag the shape to the area of your image you want to focus on. Page 19

20 Step 4 Use the round icon to expand and rotate your focus area. Once done, click the Apply button to save your changes. Photo Editor: Brightness Open your image in the Photo Editor and click the Brightness icon. Move the slider left to decrease brightness or right to increase brightness. Once done, click the Apply button to save your changes. Photo Editor: Contrast Open your image in the Photo Editor and click the Contrast icon. Move the slider left to decrease contrast or right to increase contrast. Once done, click the Apply button to save your changes. Photo Editor: Saturation Open your image in the Photo Editor and click the Saturation icon. Page 20

21 Move the slider left to decrease saturation or right to increase saturation. Once done, click the Apply button to save your changes. Photo Editor: Warmth Open your image in the Photo Editor and click the Warmth icon. Move the slider left to decrease warmth or right to increase warmth. Once done, click the Apply button to save your changes. Photo Editor: Sharpness Open your image in the Photo Editor and click the Sharpness icon. Move the slider left to decrease sharpness or right to increase sharpness. Once done, click the Apply button to save your changes. Photo Editor: Splash Open your image in the Photo Editor and click the Splash icon. Page 21

22 Choose your brush type and size. You can select from the following brush types: Free Color: Freely applies the splash effect to the area being painted. Smart: Avoids any bleedthrough of colour towards the edge of the area being painted. Eraser: Erases any applied splash effect to the area being painted. Your image will be in black and white, use your chosen Splash brush to make certain areas of your image in colour. Photo Editor: Draw Open your image in the Photo Editor and click the Draw icon. Pick a colour from the Color Picker and a Brush Size. Quick tip: You can use the Eraser brush to remove any drawings from your image. Create your drawing and click the Apply button to save your changes. Photo Editor: Text Open your image in the Photo Editor and click the Text icon. Page 22

23 Select a colour and a font from the drop down menus. Click on the text box and enter your text. Step 4 Drag the text box to position the text to where you want it on your image. Step 5 You can also use the round icon to rotate and resize the text. Step 6 Click the Apply button to save your changes. Quick tip: You can use Add Text button to create additional text boxes. Photo Editor: Redeye Open your image in the Photo Editor and click the Redeye icon. Select a brush size and paint the area of your image containing the Redeye you want to remove. Click the Apply button to save your changes. Page 23

24 Photo Editor: Whiten Open your image in the Photo Editor and click the Whiten icon. Select a brush size and paint the area of your image that you want to whiten. Click the Apply button to save your changes. Photo Editor: Blemish Open your image in the Photo Editor and click the Blemish icon. Select a brush size and paint the area of your image that you want to remove a blemish from. Click the Apply button to save your changes. Page 24

25 Additional Image settings There are a number of additional options you can create with images. These are available within the image settings panel. Click on your image. Image options will appear next to the left navigation bar. Scaling your image You can scale down your image to a preset size while keeping the aspect ratio in place. From the left hand menu, click the Scale dropdown menu and select which scale to apply to your image. Image Alignment Align your image to the left, right or center by selecting the alignment you want to apply from the Image Alignment section of the left hand menu. Image Links You can add links to images within the Image settings panel. Click the Link to drop down in the left hand menu. Page 25

26 Add a link to another page on your website Select Internal from the drop down menu. Select the page you want the image to link to from the drop down menu and click the Save button. Add a link to another location Select External from the Link to drop down menu. Enter your external link into the box provided and select an option from the Target window drop down menu. Generally, it s better to open external links in a new window so that visitors can remain on your site. Step 4 Click the Save button to apply the changes. Adding image tags Alt Tag: Enter an alternative description of your image. This tag is used by speech reading devices, and browsers that are unable to display your image. Page 26

27 Title Tag: Used to give your image a title, this may be displayed in Search Engines. Finding the URL of an image you have added From time to time you may need to find the URL of an image you have uploaded (if you want to link to it from another site for example). Click Images, then hover over the image you want the URL for. An Information icon will appear, click this. The image URL will be displayed, you can copy this link for use elsewhere. Adding downloadable files via Dropbox You can use the Dropbox widget to allow users to download files uploaded to Dropbox. Click the Add Content icon and scroll to the Media section. Drag the Dropbox widget onto the section of the page where you want it to display. Page 27

28 Click the Dropbox widget on your page to bring up the settings next to the left hand menu. Step 4 Click the Choose From Dropbox button. Step 5 Sign in to your Dropbox account, select the file you want to use and click the Choose button. Step 6 Configure the remaining Dropbox widget settings. 1 Choose whether to show the file name Enter the text you want the button to display. Align the widget to the left, centre or right. 3 Once finished, click the Save button at the top of the settings. Adding an audio stream using SoundCloud You can embed audio on to your website using the SoundCloud widget. Click the Add Content icon and scroll to the Media section. Page 28

29 Drag the SoundCloud widget onto the section of your page where you want it to display. Click the widget on your page to bring up the settings next to the left hand menu. Step 4 Paste the SoundCloud embed code into the box provided and click the Save button. Page 29

30 Themes - Changing the look and feel of your site Colours When changing colours, you will often see the colour picker. The colour picker has four main sections. 1 Click and drag to select a colour Move the slider to select a different hue. 3 Preview of your colour. 4 Enter a Hex colour value. 3 4 Changing all the colours in a theme Click the Theme icon from the left hand menu. Page 30

31 Select Colours from the Theme menu. A menu of colour swatches will appear. Colour swatches are groups of colours designed to complement each other, they are used to set the colours for a theme. Simply click on a swatch to apply it on your site. Background Click the Theme icon from the left hand menu. Select Background from the Theme menu. Page 31

32 Select a background type from the dropdown menu. You can choose from: Solid Colour: Set s a solid colour as your background. Gradient: Create a gradient between two colours. Image: Set a background image. The following sections cover these options in more detail. Changing background colour Select Solid Colour from the drop down menu. Click on the colour chip then select a colour. You can either select a colour from the colour picker, or from the theme swatches. Colour chip Quick tip: If you choose a colour from the colour swatch, this will automatically change whenever you change the swatch in Theme Colours. Adding a two colour background Change your background to a two colour gradient. Select Gradient from the drop down menu. Page 32

33 An additional drop down menu will appear below. Select the type of gradient you want to use from this menu. Vertical: Creates a gradient from top to bottom. Horizontal: Creates a gradient from side to side. Circular: Creates a circular gradient going from the inside to the outside of the circle. Select a colour chip and assign a colour to it from the Picker or a Swatch. Repeat the process if you want to choose a different colour for the other colour chip. Colour chips Quick tip: If you choose a colour from the colour swatch, this will automatically change whenever you change the swatch in Theme Colors. Choose a background Image Add an image as a background to your website. Select Image from the drop down menu. Page 33

34 Click Choose image and select the image you want to use for your background. Choose an option from the Scale drop down menu. Full Screen: Stretches the image to fill the page. Original Size: Leaves the image at its original size. Step 4 Choose the horizontal alignment by choosing an option from the Horizontal drop down menu. Left: Aligns the image left. Center: Aligns the image in the centre. Right: Aligns the image to the right. Step 5 Choose the vertical alignment by choosing an option from the Vertical drop down menu. Left: Aligns the image left. Center: Aligns the image in the centre. Right: Aligns the image to the right. Step 6 Tick one or both of the Horizontal repeat or Vertical repeat boxes to repeat your images horizontally or vertically. Page 34

35 Fonts Changing your website fonts Font sets allow you to change the default font of all the content on your website. Click the Theme icon from the left hand menu. Click Fonts from the Theme menu. Select the font that you want to edit. Step 4 Select from the options to customise your font. 1 1 Preview your font. 2 2 Select the font you want to use Select the font weight you want to use. Select a colour for your font Select the font size. 6 6 Select the line height. 7 Select the letter spacing. 7 Page 35

36 Step 5 Click the Save button to apply your changes. Page Layout Widgets There are a number of layout widgets available to help you display the content how you want. Button You can add a button to your page that can be used to link to another page or to create an to a chosen address. Click the Add Content icon from the top of the page and scroll down to the Layout section. Drag the Button widget to the section of the page where you want it to appear. Click the button on your page to bring up the settings next to the left hand menu. Step 4 1 Select the type of link for your button to use: Internal: Link to a page on your site. External: Link to an external page. Mail: Open an to a chosen address Select an icon to display on your button. Enter the text to display on the button. Align the button to the left, center or right of your page. Page 36

37 Once finished, click the Save button at the top. Divider A divider creates a horizontal line across your page that can be used to separate content. Click the Add Content icon from the top of the page and scroll down to the Layout section. Drag the Divider widget to the section of the page where you want it to appear. Click the Divider widget on your page to display the settings next to the left hand menu. Step 4 Customise your divider using the following settings: Align your divider to the left, center or right. Choose the thickness of the divider line. Choose the padding size around the divider. Select a length of the diver line. Once finished, click the Save button at the top of the page. Page 37

38 Spacer A spacer can be used to create blank space between content. Click the Add Content icon from the top of the page and scroll down to the Layout section. Drag the Spacer widget to the section of the page where you want it to appear. Click the Spacer widget on your page to bring up the settings next to the left hand menu. Step 4 Use the slider to adjust the height of the spacer and click the Save button. Columns You can add columns on your page in order to place content directly next to each other. Click the Add Content icon from the top of the page and scroll down to the Layout section. Drag the columns widget on to the section of the page you want to add columns to. Page 38

39 Choose the amount of columns you would like to create. Step 4 Drag content into your columns. You can drag content that is already on your page, images from your image gallery or additional content from the Add Content menu. Favicons A favicon (Favourite Icon) is a small square icon that you can associate with your website. It is shown. An example Favicon can be found when visiting or when viewing your bookmarked sites. Creating a Favicon A favicon is a special 16*16 or 32*32 icon that has an.ico file format. Your image software may be able to create these images for you, if not there are a number of free online tools available such as and Page 39

40 Uploading your Favicon Click Manage in the left menu bar. Select Favicon from the Manage menu. Click Choose an image. After a few seconds you will receive a message that your favicon has been loaded. Visitors to your site will now see your Favicon in the web browser. Page 40

41 Page management Add a new page Click the Site icon from the left hand menu and select add new page / folder. Select Page as the Type and enter a Page title. Select a Page type. Default: Creates a default page using your theme. Clone: Creates a clone of the current page. Home: Creates a homepage. About: Creates a page to contain general information. Contact: Creates page to contain contact information. Gallery: Creates a page containing an image gallery. Step 4 Once done click the Add page button. Page 41

42 Page Settings Rename a page Click on the Site icon in the left hand menu and click the cog icon next to the page you want to rename. Enter a new Page and Menu title in the text boxes provided and click Save. Remove a page Click on the Site icon in the left hand menu and click the cog icon next to the page you want to remove. Select Delete this page at the bottom of the menu. Page 42

43 A popup will appear. Confirm that you want to delete the page by clicking OK. Choosing your home page Click on the Site icon in the left hand menu and click the cog icon next to the page you want to set as your homepage. Scroll down to the bottom of the page settings menu and select Use as Home page. Scroll back to the top of the page settings menu and click the Save button. Choosing what to publish When you publish your website, you will publish any changes made to active web pages. Inactive webpages will be removed during this process, while pages marked as Draft will be unaltered. Note: Your home page will always have an Active status. Click the cog icon next to your page to display the page settings. Page 43

44 Scroll down to the bottom of the settings and from the Page Status drop down menu, choose how you want this page to behave when publishing your website. Once done, scroll back to the top of the settings and click Save. The settings you add here will affect the changes made when you next publish your website. Add JavaScript to your page You can add JavaScript to any page on your website. You can add JavaScript to the page, header, or the body of the page itself. Important: Adding incorrect code to your site may cause your site to break. We are unable to provide a de-bugging service for faulty scripts on your site. Click on the Site icon in the left hand menu and click the cog icon next to the page you want to add JavaScript to. Depending upon where you want to enter your code, select Page Scripts or Body Scripts from the bottom of the page settings menu. Page 44

45 You will be presented with two text boxes, to add JavaScript to each page on your site enter your script into the top text box To only add JavaScript to your chosen page in your site, enter your script into the bottom text box. Step 4 Once done, click Add. Organising your pages (Page Folders) If you have a large number of pages, it s useful to create folders and organise your pages into groups. This feature is also used for two tier navigation menus. Click the Site icon in the top left corner of the screen and click Add new page / folder from the drop menu. Select Folder as the type and enter a name for your folder. Page 45

46 Once done click Create Folder. Page redirects Page redirects allow you to direct customers who are visiting a URL on your site to be directed to another page on your site, or another website. For example you could direct customers who visit to Adding a redirect Click Manage from the left hand menu and select Redirects. Click either the New button or the create a redirect link. Page 46

47 Enter the following: From: Name of a page on your site that does not currently exist. To: Choose the page that you would like visitors to be directed to. Type: Choose the type of redirection. This will usually be set to 301 Permanent. Once done, click Create redirect. Your redirect will be visible on the Redirects summary screen. Removing a redirect Click Manage at the bottom of the left hand menu, then select Redirects. Click the Options Cog button underneath the redirect you want to remove. Page 47

48 An options bar will appear, click the Remove button. Step 4 A confirmation popup will appear, click OK to confirm you want to remove the redirect. Navigation Changing the order of pages Click on the navigation menu to bring up the settings. Drag the pages into any order from the settings menu by dragging and dropping them. Click Save at the top of the settings menu to apply the changes. Create a sub navigation menu Sub navigation menus allow you to show any pages within a folder. If you have already created a folder for your pages, this will appear in your navigation bar. Page 48

49 Click the Site icon in the top left corner of the screen and click Add new page / folder from the drop menu. Select Folder as the type and enter a name for your folder. Once done click Create Folder. Step 4 Any page you add into this folder will appear when the menu item for you folder is expanded. Choosing which pages to display in the Navigation Menu When you add pages to Website Builder they will automatically be added to the navigation bar. You can choose what pages you want to display in the navigation bar and which pages you want to hide. Page 49

50 Displaying Pages in the Navigation Menu Any new pages you add to Website Builder will be displayed by default. However if you have previously hidden a page, you can easily add it back into the navigation bar. Click the Page icon and click the cog icon next to the page you want to display. Scroll down to the bottom of the page setting and remove the tick the Hidden from navigation box. Scroll back to the top of the settings and click Save Hiding Pages in the Navigation Menu Click the Page icon and click the cog icon next to the page you want to hide. Scroll down to the bottom of the page setting and tick the Hidden from navigation box. Page 50

51 Scroll back to the top of the settings and click Save Changing the font in your Navigation menu You can change the font that the navigation menu uses to display the links to your pages. Click on the navigation menu to bring up the settings. From the settings menu, click the Edit Style button. Select from the options to customise your font. 1 1 Preview your font. 2 2 Select the font you want to use Select the font weight you want to use. Select a colour for your font Select the font size. 6 6 Select the line height. 7 Select the letter spacing. 7 Step 4 Once finished customising your font, click the Save button at the top of the settings menu. Page 51

52 Shop Quick Setup The quick setup for the shop guides you through adding the first essential components to get you started. Shop Credentials Click on the Store icon in the left hand menu. Enter a name for your shop and enter an address to be used for customer contact and click the Save and continue button. Payment setup Click the Connect with Stripe or Connect with PayPal button, you will be taken to the Stripe or PayPal website where you will need to either set up an account or log in with an existing account. Page 52

53 Shipping Setup Enter a name for your shipping rate. Select the Destination country. Enter the courier name. Enter a cost. Enter an estimated delivery time. Tick the box to apply a weight based rate. Once finished, click the Add shipping rate button Add your first product Click the Add product button. Enter a title for your product. Page 53

54 Enter a description for your product. Step 4 Click the Add image icon and select or upload an image for your product. You can repeat the process to add more images for your product. Step 4 Enter a price for your product and click the Save button. Product Variations (Optional) You can create variations of your product to give your customers options such as colour, size, flavour etc. Click the Create variations button. Enter a name for your variation and click the + icon to add it. Page 54

55 Click the Add variation button and enter a weight, price and variation. Once done click the Save button. You can repeat this step to add more variations. Product Category Select a category from the drop down menu and click the Add button. If you want to add a new category, enter it into the box and click Create. Product Tags Enter a tag into the box and click the + icon. You can repeat the process to add more tags. Product Inventory Tracking If you want to track stock for your product, select Track inventory for this item. If you want customers to be able to order the product once it is out of stock select Allow purchase when stock level is zero. Page 55

56 If you want to be sent a notification when stock levels reach a certain level, enter a level into the Low stock alert box. Product Visibility Select Visible if you want your product to show up in your store or select Invisible to hide it. Once done, click Save. Add your Payment Details Click the Setup payment button. Select either Connect with Stripe or Connect with PayPal. You will be redirected to the provider s external page to sign up or login Shipping Options Click the Setup shipping button. Page 56

57 Click the Add shipping rate button. 1 Enter a name for the shipping rate Enter the name of the courier. 3 Enter a cost for the postage Choose the country you want this rate to cover from the drop down menu. If you want to enter a weight restriction click the Apply rate by weight from box and enter the weight range. Settings In the shop settings you can set up your address, shipping options, payment details, tax and currency. Status, Name, Address This setting option allows you to set the status of your store, the name and its address. Click the Store icon and then select Settings. Click Status, Name, Address. Page 57

58 Select whether you want your store to be Online or Offline in the Store visibility drop down menu. Step 4 Enter a store , name and address in the field provided. Step 5 Select whether you want to enable a store Terms and Conditions page from the drop down menu. Step 6 Choose whether you want to enable SKU numbers for your product by ticking or unticking the checkbox. Once done click the Save button. Page 58

59 Ecommerce Widgets You can add Ecommerce widgets to your pages such as a basket for your customers or a highlight a featured product. Product List A product list will display all your products and allow filtering by category or tags. Click the Add Content icon and scroll down to the Ecommerce section. Drag the Product List widget on to the section of that page you want it to display. Click the widget on the page to bring up the settings. Choose whether you want to display the Order by filter and click Save. Page 59

60 Basket The Basket widget displays a basket button on the page that customers can click to view what items they have added. Click the Add Content icon and scroll down to the Ecommerce section. Drag the Basket widget on to the section of the page where you would like it to display. Featured Products You can use the Featured Products widget to display products that fall under a specific tag. Click the Add Content icon and scroll down to the Ecommerce section. Drag the Featured Products widget onto the section of the page where you want it to display. Click the Featured Products widget from your page to bring up the settings next to the left hand menu. Page 60

61 Step 4 Enter a label for the widget to display and select a product tag from the drop down menu. Once finished, click the Save button at the top of the settings. Categories List The Categories List widget displays the categories you have set for all of your products. Customers can click on these categories to view the products under them. Click the Add Content icon and scroll down to the Ecommerce section. Drag the Categories List widget onto the section of the page where you want it to display. Click the Categories widget on your page to bring up the settings next to the left hand menu. Step 4 Enter some text to display in the widget s label and select if you want to show the count of the amount of products under that category. Once finished, click the Save button. Page 61

62 Products Adding a product Click the Store icon. Click Add product. Fill out the product details as shown in the Add your first product section of this document Editing a product Click the Store icon. Select Product list. Click on the title of the product you want to edit. Step 4 Make your changes to the product and click Save at the bottom of the page. Page 62

63 Removing a product Click the Store icon. Select Product list. Tick the checkbox next to the product/s that you want to remove. Step 4 In the menu that appears at the top of the list, click the Delete button. Step 5 In the confirmation box that appears click the OK button to confirm you want to delete the product. Changing product visibility Click the Store icon. Page 63

64 Select Product list. Tick the checkbox next to the product/s that you want to change the visibility of. Step 4 Change the visibility from the drop down menu. Step 5 In the confirmation box that appears click the OK button to confirm you want to change the product/s visibility. Importing a product You can import a CSV file containing a list of products using the Product Import tool. Click the Store icon. Select Product Import. Click Browse and select your CSV file from your computer. Page 64

65 Step 4 Once the CSV file has finished uploading, click the Import button. Quick tip: If you are having difficulty uploading your csv you can check it against the sample csv which can be downloaded using the link under the Instructions section. Blog Setting up your blog Click the Blog icon in the left hand menu and click the Setup icon. Configure the settings for your blog Select whether you want your blog to be visible or not. Give your blog a title. Enter a summary of your blog. Choose how many posts you want to display on a page. Page 65

66 Adding a blog post Click the Blog icon in the left hand menu and click Add a post. Enter a title for your post at the top. Enter your blog post in the box provided. Step 4 Enter a summary of your post in the box provided. This summary will be displayed in the list of posts. Step 5 If you want to add an image to your post click the Add image icon and choose an image from the gallery or upload a new image. Page 66

67 Step 6 Enter a tag into the box provided and click the + icon. You can add multiple tags by repeating this process. Step 7 Select a category for your post from the dropdown menu or click Add new to create a new category. Step 8 Once finished, click the Save button to save your post for later. Alternatively, click the Publish button to publish it right away. Social Twitter Twitter Widget Click the Add Content icon at the top of the page, then scroll down to the Social section to find the Twitter widget. Page 67

68 Drag the Twitter widget to the area of your web page you would like it to appear. Click on the widget, the settings screen will appear next to the left hand menu. Step 4 1 Enter a keyword, or a username to search for Select the type of search, you can select usernames or keywords. Select how often you want to check for updates. Decide if you want to show retweets in your widget. Use the slide bar to choose how many tweets you want shown in your widget. The widget will always show the most recent tweets first Add a tweet button The Tweet button will allow visitors to share links to your web pages on twitter easily and quickly. Click the Add Content icon and scroll down to the Social section to find the Tweet widget. Drag the Tweet widget to the area of your web page you would like it to appear. Page 68

69 Click the widget to bring up the settings next to the left menu. Step 4 1 Enter the text for your tweet button to display. 2 Enter the text you want to add to the user s tweet. 1 3 Align the button to the left, center or right. 2 3 Facebook Click the Add Content icon and scroll down to the Social section to find the Facebook widget. Drag the Facebook widget to the area of your web page you would like it to appear. Click the widget on the page to bring up the settings next to the left hand menu. Page 69

70 Step Enter the URL that Facebook will like. Enter an image URL. Choose whether to show profile pictures of users who have liked your page. Choose between Like or Recommend for the button text. Choose between a Light or Dark colour scheme. Select the font for the widget to use. Select from a Standard, Vertical or Horizontal layout. When a visitor likes your page using the Facebook widget, their friends will be able to see this like. These settings allow you to choose how this like will appear to their friends. LinkedIn You can add a LinkedIn personal or business widget to display your LinkedIn details. LinkedIn Personal Click the Add Content icon and scroll down to the Business section. Drag the LinkedIn Personal widget onto the section of the page you want it to display. Page 70

71 Click the LinkedIn Personal widget to bring up the settings next to the left hand menu. Step 4 Enter your LinkedIn public URL in the box provided and click the Save button. LinkedIn Business Click the Add Content icon and scroll down to the Business section. Drag the LinkedIn Business widget onto the section of the page you want it to display. Click the LinkedIn Business widget on your page to bring up the settings next to the left hand menu. Step 4 1 Select an option from the Type dropdown menu: 1 Company Name LinkedIn Company ID 2 2 Depending on the Type you have selected, enter either your Company Name or LinkedIn Company ID and click Save. Page 71

72 Disqus The Disqus widget allows you to display Disqus comments on your site. Click the Add Content icon and scroll down to the Social section to find the Disqus widget. Drag the Disqus widget to the area of your web page you would like it to appear. Click the widget on the page to bring up the settings next to the left hand menu. Step 4 Click Choose shortname from the settings. You will be redirected to a Disqus page to authorise access to your website. Important: You will need to create a Disqus account before you will be able to use this feature. Page 72

73 Yelp Reviews The Yelp Reviews widget displays reviews from your Yelp profile on your page. Click the Add Content icon and scroll down to the Business section. Drag the Yelp Reviews onto the section of that page you want it to be displayed. Click the Yelp Reviews widget on your page to display the settings next to the left hand menu. Step 4 Configure the Yelp settings Enter text for the widget label to display. Enter your Yelp Business ID Select how often you want the widget to update. 2 3 Once done, click the Save button at the top of the settings. Page 73

74 Add ons and Widgets Forms The Form widgets will allow visitors to provide you feedback, contact you, or sign up to your website. Creating a contact form Click the Add Content icon and scroll down to the Business section. Drag the Form widget on to the area of the page where you want it to be displayed. Click the widget on the page to bring up the settings in the left hand menu. Page 74

75 Step 4 1 Enter an title you want to contact form to create. 2 Enter the text for the forms submit button. 3 4 Enter the address you want the form to send to. Select the page to be displayed when the user submits the form. Step 5 Once finished, click the Save button at the top of the settings. Creating a signup form Click the Add Content icon and scroll down to the Business section. Drag the Signup Form widget on to the area of the page where you want it to be displayed. Page 75

76 Click the widget on the page to bring up the settings next to the left hand menu. Step 4 1 Enter the title you want the the forms sends to contain Enter the text you want the form s label to display. Enter the text you want the form s button to display. Enter the address you want the form to send to. Select the page to direct users to once the form has been submitted. Testing a form You can test a form in preview mode. Switch your site from Edit to Preview mode using the toggle at the top. Fill in the form with test details and click the button. Quick tip: If you have configured the form to send you an , you should receive an at this point. Page 76

77 Adding Video To ensure that any video is visible to IPhone and IPod users, it s best to embed a video from YouTube to your website. This guide assumes that you have already uploaded a video onto YouTube. Visit your video on YouTube, click Share, then Embed. Next, choose the size of your video player from the drop down menu. Make a note of the code shown in the text box. Step 4 Click the Add Content icon at the top of the page and navigate to the Media section. Page 77

78 Step 5 Drag the YouTube widget on to the section of the page where you want your video to display. Step 6 Click the widget on the page to bring up the settings next to the left hand menu bar. Step 7 Enter the embed code you copied from YouTube into the Enter YouTube URL box and click Save. Your video will now be embedded on your website. Map You can add Google Maps to your site to show the location of your business. Click the Add Content icon and scroll to the Business section. Drag the Map widget on to the section of the page where you would like it to be displayed. Page 78

79 Click the widget on the page to bring up the settings next to the left hand menu bar. Step 4 Adjust the settings how you want to: Enter your address or postcode. Set a zoom level. Choose whether to show the zoom controls. Set the height of the map widget Once finished, click the Save button at the top of the settings. Call Me The Call Me widget adds a link on your site that mobile users can click to call you. Click the Add Content icon and scroll to the Business section. Drag the Call Me widget to the area of the page you want it to display. Click the widget on your page to bring up the settings next to the left hand menu. Page 79

80 Step 4 Configure the following settings how you want to Enter your phone number. Enter the text you would like the widget to display. Align your widget to the left, centre or right. 2 3 Once finished, click the Save button at the top of the settings. Embed The embed widget allows you to embed JavaScript, <iframe> or HTML content directly into your website. Important: Care must be taken in inserting code into your website. Broken or incomplete code may cause your site to stop working. Click the Add Content icon at the top of the page and to the Layout section. Drag the Embed widget to the area of your web page you would like your embedded code to appear. Page 80

81 Click the widget on your page to bring up an input box. Paste your code in this box and click the Save button. Slideshow A slideshow can add movement and excitement to a web page, although care should be taken to ensure it doesn t become a distraction from your main website content. Click the Add Content icon at the top of the page and navigate to the Media section. Drag the Slideshow widget to the area of your web page you would like your slideshow to appear. Click on the widget to bring up the options next to the left hand menu. Page 81

82 Step 4 Click the Choose images button and select the images you want to add to the slideshow or choose Select all in album to add all the images from a specific album. Once done click Save. Step 5 1 Select the duration of time for an image to show. 2 3 Select the speed of the transition effect. Select the type of transition you want to use. You can choose from Fade, Dissolve or No Effect. Step 6 1 Display the image title. 1 2 Display the image description. 2 3 Display navigation buttons Display bullets below the slideshow Zooms in on the images. 5 Step 7 Once finished, click the Save button at the top. Page 82

83 SEO, Sitemaps and Google Analytics SEO Optimise your site Google SiteMaps Each time you publish your site, we ll generate a new sitemap for Google and other search engines to access. This gives you the same SEO results you would get from using the Google webmaster sitemap tools without lifting a finger! Note: Only search engines are able to access this sitemap. SEO Settings Adding additional information regarding your website can help understand search engines understand your site and improve your search rankings. There are three types of information you can add: Title (Site only): The title tells users and search engines what the topic of your site is. This should name your website or business and could contain other useful information such as its main focuses or offerings. Description: The description should contain a brief summary of your page, or site. Keywords: Add a few keywords that are used to describe your page or site. You can edit these settings for each page, and enter global settings for your website as a whole. Page 83

84 Adding Site wide SEO data Click Manage in the left hand menu, then select SEO settings from the menu that appears. Enter a Title, Description and Keywords in the text boxes provided. Once done, click Save. Adding page specific SEO Data Click the cog icon next to your page to display the page settings menu. Enter page specific keywords and a description in the text boxes provided and click Save. Page 84

85 Quick tip: More information on SEO can be found in our guide: Making the most from your website. Google have also published a PDF that relates specifically to their search engine. Google analytics Create a Google Analytics account and follow Google s instructions to find the Profile ID of your website domain. Quick tip: The profile ID will be a string of letters and numbers with the following format: XX Make a note of this Profile ID, but don t follow Google s instructions for adding a tracking code into your site. Once you have the Profile ID, log into your Website Builder Essential/Complete control panel and click Manage. In the left hand menu, select Analytics and enter your Profile ID in the text box provided. Important: Only enter the ID number. Do not paste the tracking script into this box. Once done, click Save. Page 85