How do I add a widget to my Storefront?

To add a widget to your Storefront, go to 'My content'. There are two tabs on the left - 'My pages', which is individual pages on your Storefront, and 'Page types', where you can create templates to apply across page groups like all your product pages or all your category pages. 


Select the page you want to work on my clicking ''Build page type' or 'Build page' next to it. 

 On the left hand side of the ‘Page builder’, you will find all your available widgets. You will see a number of different widget categories, within which you will find a selection of widgets for you to choose from.



As well as the widgets that come automatically with your Storefront package, you can find exciting new widgets in the Marketplace that you can add to your site - discover more about the Marketplace here. Widgets you've downloaded from the Marketplace are available in the 'Downloaded' tab in the page-builder. 

 Simply click on the widget you want to add, then drag and drop it into a drop zone – you can add as many widgets into each drop zone as you like and move their order and position around to suit you. By clicking on a widget, you will see a number of options:

•   Change the size of your widget, by clicking on a number under ‘Widget size’ (‘1’ being smallest and ‘4’ being largest)
•   If you ever want to remove a widget from a page, click the ‘Delete’ button
•   Some widgets also have a ‘Edit’ button to customise them even further – you can find out more about this with the following description of each widget

These are the widgets that come automatically with Storefront:

Product:
Recently added – this will display any products you have recently added to your store, in a grid format. When you click ‘Edit’, you will also be able to select how many products you would like to be displayed
Recently viewed – this will display any products your customer has recently viewed on your store, in a grid format. When you click ‘Edit’, you will also be able to select how many products you would like to be displayed
Bestsellers – this will display all your store’s best-selling products, in a grid format
Featured products – when you are creating products in ‘My products’, you have the option to make them a ‘Featured product’ . This widget will display any products you have selected as a ‘Featured product’ in a grid format. When you click ‘Edit’, you will also be able to select how many products you would like to be displayed

Category:
Featured categories – when you are creating categories in ‘Categories’ section, you have the option to make them a ‘Featured category’. This widget will display any categories you have selected as a ‘Featured category’ in a grid format. When you click ‘Edit’, you will also be able to select how many categories you would like to be displayed
Featured categories slider – this widget is the same as the ‘Featured categories’ widget, but rather than being displayed in a grid format it is similar to a gallery slideshow. It will display one product image at a time and has a small arrow button that allows visitors to move along to the next product

Social:
User poll – here you can add a user poll, which that you may have already set up in ‘My polls’. If you haven’t created one yet. If you have created more than one user poll, Storefront will automatically add the latest poll you have created (not available with Seller)
News list – if you have enabled a new pages on your store here you can add a widget which will display a list of your latest new headlines. Click the ‘Edit’ widget button to select how many news headlines you would like to display (Pro-seller Plus only)
Latest tweets – if you have a Twitter account, with this widget you can display a feed of your latest tweets. Click the ‘Edit’ button to add a name for this widget (this will be shown on the page) and your Twitter username. You can also specify if you’d like to show people’s avatars (profile pictures) and screen names, as well as how many tweets you’d like to display

Links:
Category list – this widget will display a list of your categories
Popular tags – when you are creating products in ‘My products’, you have the option to add product tags to them.This widget will display a list of the most popular product tags on your store and can help your customers find products even quicker
Manufacturers list – this widget will display a list of your manufacturers (Not available with Seller)
Mini links – this widget will display the quick links to the following pages:
•   What’s new
•   Compare products list
•   Shipping & returns
•   Privacy notice
•   Conditions of use
Social links – these will allow customers to display quick links to your social networks profiles, including Twitter, LinkedIn and Facebook. Just enter your user profile name in the boxes under the networks you’d like to link to

Content:
Content –  With this widget you can add text, images or extra HTML code to your store pages. Click the ‘Edit’ button and complete the following form:
Title: If you want to display a title, enter one here
Content: Any text you’d like to display in this widget, type in this box – you can also add your own HTML code by clicking the ‘HTML’ button.  To upload a picture, use the ‘Insert/Edit image button’ and complete the following form:

General
Image URL: Here you can here enter a web address to link to an image online. Alternatively click the small box symbol next to ‘Image URL’ and you will be able to select an image that might already be on your store or click ‘Add new’ to choose another image from your computer. Click on the image you want to select, then the ‘Save details’ button. You will now see a preview of your image below
Image description: Give your image a description – this will help with your store’s SEO but is not seen by customers
Title: Give your image a title – this will pop-up when a customer hovers over the image
Appearance
Alignment: Select from the options in the drop down list how you would like to align this picture in the widget box. You will be able to see a preview of how the image will look in the small box to the right of the pop-up
Dimensions: If you want to change the size of your picture, here you can specify the size you’d it to be
Constrain proportions: If you are changing the size of your image but want to keep the original proportions, tick this box
Vertical space: If you’d like to add space to the top of this image, enter a number in here
Horizontal space: If you’d like to add space to the side of this image, enter a number in here
Border: To add a border to this image, add a number in here to reflect the thickness of the border (1 being the thinnest)
Style: This will display the HTML code for the option you have selected above – you do not need to enter anything in this box
Advanced
Alternative image: Tick here if you would like to an alternative picture to display for either of the actions below
For mouse over: Click the small symbol to add an alternative picture for when customers hover over the original picture with their mouse
For mouse out: Click the small symbol to add an alternative picture for when customers hover off the original picture with their mouse
You don’t have to complete all of these options, but when you are happy with your settings, click the ‘Insert’ button in the ‘General’ tab to add your picture to this widget. Once you have added all your content, click the ‘Save details’ button. If you ever need to change any of your HTML content, simply click the ‘Edit’ button again in the relevant widget.

Store:
Mini cart – this will display any items a customer has added to their cart, so they can view their purchases as they shop
Search – here you can add a search box to any page you like
Contact us form – with this widget you can add a contact form to your pages. Click ‘Edit’ to personalise this form; including label titles, button text and the message that should appear when the form has been successfully sent
Newsletter sign-up – would you like to allow customers to subscribe and unsubscribe from your newsletter? Click ‘Edit’ to personalise this widget; including label titles, button text and the message that should appear when subscription or unsubscription has been successful

Mr Site is always adding new widgets to Storefront – so keep an eye out for new additions! You can always check the Marketplace for what's been added recently.