Getting Started Guide - Sellerdeckportal.sellerdeck.co.uk/docs/user_guides/SellerDeck... · 2014-04-17 · Getting Started Guide Get started with your new SellerDeck Responsive Design

Getting Started Guide Get started with your new SellerDeck

Responsive Design

Inside this guide we will cover some of the basics, on how to change various aspects of your new SellerDeck Responsive Design.

©SellerDeck Ltd 2013

1

Contents The Opening Screen ....................................................................................................................................... 2

The SellerDeck Responsive Design ................................................................................................................. 3

Company Logo .......................................................................................................................................... 4

Carousel Images ....................................................................................................................................... 5

Colour Scheme ......................................................................................................................................... 6

Mega Menu .............................................................................................................................................. 7

Fonts ......................................................................................................................................................... 7

Button Images .......................................................................................................................................... 7

Other Images ............................................................................................................................................ 7

Testing the Responsive Site ........................................................................................................................... 8

Stage One: Desktop & Tablet ‐ Landscape ................................................................................................ 8

What you will see: .................................................................................................................................. 8

Stage Two: Tablet ‐ Portrait ...................................................................................................................... 9

What you will see: .................................................................................................................................. 9

Stage Two: Mobile ‐ Landscape .............................................................................................................. 10

What you will see: ................................................................................................................................ 10

Stage Two: Mobile ‐ Landscape .............................................................................................................. 11

What you will see: ................................................................................................................................ 11

Troubleshooting your site: ........................................................................................................................... 12

Upgrading in the future ............................................................................................................................... 12


2

The Opening Screen When you first open the SellerDeck software you are greeted by the 'Start Here' Panel. For first time users, this will walk you through how to set up your store.

You also have three different tabs at the bottom of the software.

The 'Start Here'

The 'Preview' Panel, where you can see what your site will look like online.

The 'Details' panel, where you will view and enter the details for your website content. You also have the 'Content Tree' on the left hand side. This shows you the pages on your website, including;

Products

Sections

Brochure pages

Components

Attributes

Choices

Fragment

Click on the '+' icon to expand parts of the tree. Click on any part of the tree to see its details in the Details Panel.


3

The SellerDeck Responsive Design When you first get your SellerDeck Responsive Design it will look similar to the design below.

There are a few quick and easy things you can change to make the site look more like your own. Here are the aspects of the design we are going to change:

Company Logo

Carousel Images

Colour Scheme

Mega Menu

Other Images Changing just these four things can make a huge difference to how your site looks and feels.


4

Company Logo To change the company logo, go to the 'Design' menu | 'Themes' | and 'Browse' to find your new logo.

An alternative way to edit the company logo is to go to: 'Settings' | 'Site Options' | 'General' | Browse for the 'Company logo image' / 'Brochure logo image'.


5

Carousel Images The carousel images are the scrolling images across the home page. Before changing these images, please make sure you have the correct size pictures. 962 x 245 Pixels You can have up to 5 images that scroll across the home page. To choose/change your images, go to: 'Settings' | 'Site Options' | 'Properties' | Scroll down to the 'Flexi Slider' and click on one of the 'Promotion Banner Image' fields to be able to browse for your images. Beneath this you will see the 'Promotion Banner Link' this is where you have put in the website address a customer will go to if they click on the image on your website. Please include the full website address. Eg. http://www.sellerdeck.co.uk/


6

Colour Scheme To change the colour scheme will change a number of areas on your site, so please make sure you have a snapshot back up first. (Go to page xx to learn how to create a snapshot.) Go to the 'Design' menu | 'Themes' | 'Advance Theme Configuration' | 'Color Scheme' and choose the various colours you would like to use.

Click 'Save' to save your colours, and click 'OK' to apply them to your design. The one thing you will notice all but straight away is the fact that the menu bar and the View Cart and Checkout Buttons have not changed colours. We will go through how to change the colours for the menu bar in the Mega Menu section.


7

Mega Menu The mega menu is whereby you hover over the menu at the top of your website, and if any of your sections have sub sections, these will be displayed to your customers to click on.

To be able to change the colour of the mega menu you will need to edit the background image itself. Go to the Site Folder for the corresponding site you want to edit. Normally this is in your 'My Documents' folder. C:\Users\[User Name]\Documents\SellerDeck 2013\Sites\[SiteFolder] You are looking for the image named: nav‐bar‐bg.png and nav‐bar‐separator.png You will need to edit these images, but keep it the same size. SellerDeck have the PSD version of these images. Please contact the support lines if you would like a copy.

Fonts To change the fonts, go to 'Settings' | 'Site Options' | 'General' | 'Default Font For The Store'

Button Images To change the button images go to, 'Settings' | 'Site Options' | 'Links' | 'Navigation Images' Under 'Navigation Images' you can change all the button images.

Other Images You will also need the change the colours for the 'Search' button and the Background image. This is also saved in your site folder: search‐icon.png body‐bg.png When you edit the images try to keep the images the same sizes for the responsive design to work correctly.


8

Testing the Responsive Site Trying out the website on mobile and tablet devices can be easier said than done for some people. As a quick and easy way to test your site, you could always re‐size your browser. The site resizes itself because of the CSS coding. There are 4 main stages of the responsive site, please see some screen shots below to see these stages.

Stage One: Desktop & Tablet ‐ Landscape

What you will see:

‐ Mega Menu ‐ 3 main columns


9

Stage Two: Tablet ‐ Portrait

What you will see:

‐ Mega Menu ‐ 2 main columns

o 3rd column is removed.


10

Stage Two: Mobile ‐ Landscape

What you will see:

‐ Collapsed Menu o Click on ‘Show’ to expand

‐ 1 Column o Starts with Main column o Then Right column o Then Left column o Then Footer


11

Stage Two: Mobile ‐ Landscape

What you will see:

‐ Collapsed Menu o Click on ‘Show’ to expand

‐ 1 Column o Starts with Main column o Then Right column o Then Left column o Then Footer


12

Troubleshooting your site:

1. If you get a coding error saying: A JavaScript error has been found on the page (‘SwapDesktopMobileFilters’ is undefined’) You will need to replace the actinicsearch.js file in the site folder.

2. If you find the “Show” button on the site when in mobile mode does not work, you will need to replace the actinicsearch.js file in the site folder.

Upgrading in the future Please note as this is important. With the SellerDeck Mobile Responsive Design there is an edited Java Script file. The actinicsearch.js This is an important file to get your responsive design to work. If you choose to upgrade to any major releases in the future; you will need to make sure that you have a copy of this file and that you then put this in your new site folder before uploading in any new version. SellerDeck may introduce a new actinicsearch.js file if necessary, please ask our support team before upgrading. Please make sure you keep a copy of this file in multiple places.