Start Theme Setup

To get the Start Theme set-up correctly there are a few steps that you have to take

Below you will see a few links to different blank images that are in this theme

To create a image suitable for your selected theme, copy this link and follow the details of using an online image editor – SumoPaint

 

This themes sample site has a logo size of:

240 x 55 pixels (width x height)

Sample Image Link

http://static.wearequick.com/themeimages/logo.jpg

You can add your new logo in the admin area by going to admin > system > settings (image tab)

Click here to view more details about how to add a logo

 


 

 2. Shop Details

Now your shop has been setup, you can modify your shops name, location and currency.

You can do this in the admin area by going to admin > system > settings

The fields you should edit are:

General Tab:Store Name:
Address:
E-Mail:
Telephone:
Fax:
Store Tab:Title:
Meta Tag Description:
Local Tab:Country:
Region / State:
Currency:
Length Class:
Weight Class:

 

Click here to view more details about modifying the settings area

 


 

 3. Home Page Slides

This themes sample site has a home page slide size of:

960 x 350 pixels (width x height)

Sample Image Link

http://static.wearequick.com/themeimages/books-slide.jpg

 

Adding New Slides

You can add your new logo in the admin area by going to admin > system > Home Page Slides

 

Click here to view more details about using the Home Page Layer Slider

 

 


4. Shop Default Image Sizes

You can modify the size of the images displayed in your shop by going to admin > system > settings ‘image tab’

If you would like to have the default sizes displayed again, you can view what they are in the image below.

 

 


  5. Adding Product Categories

To make it easier to manage products we use categories. This lets you group similar products together

You can do this in the admin area by going to admin > product > categories

 

Click here to view more details about adding a category

 

 


  6. Add a Product

Now your shop has at least one category, you can now start to add your products to sell.

You can do this in the admin area by going to admin > product > Your Products

 

Click here to view more details about adding a product

 


7. Update Your Shipping Options

Your shop comes setup with a few different shipping modules pre-installed

These are available by going to admin > extensions > shipping options

 

Click here to view more details about the different shipping modules

 


  8. Add Shop Information

The Internet is all about Information so now is the time to add in some content to your site.

You can do this in the admin area by going to admin > information > Information Pages

 

Click here to view more details about adding Information Pages

 

 


 

9. Start Accordion

Kr Accordion in the front-end

The Start Accordion allows you to show horizontal stacked list of item; and you can expand and collapse content panes smoothly. You can use the module to show products in Category, Featured, Bestseller, Latest or Special.

 

To edit it go to:

Admin > modules > extensions > Start Accordion (click edit)

 

 

To create a Start Accordion that looks like the demo, follow steps below:

Hit Add Module button.

Configure parameters as below:

Status – Set On to display the Start Accordion module.
Show Title – Set Off to hide the accordion title and vice versa.
Title – Input the accordion title.
Short Code – Automatically generated when you input the tab title.
Type – Choose which type you want to present: Category, Featured, Bestseller, Latest or Special.
Products – Choose the products you want to display. This parameter will be shown up only if you choose Type Featured above.
Layout – Choose All Layouts to present this module on all web pages or the single layout you want to present this module. For example: Category.
Position – Choose the place to present this module. For example: Content Top.
Sort Order – Set the order to present this module if there are several module at one position. For example: 1.
Product Limit – Set the amount of product tabs are shown in an accordion. For example: 4.
Product Dimension – Set the product image sizes are displayed in each accordion pane.
Title Limit – Set the amount of words are displayed in each accordion pane.
Product Name – Set On to display the product name in each accordion pane.
Product Price – Set On to display the product price in each accordion pane.
Product Rating – Set On to display the product rating in each accordion pane.
Product Description – Set On to display the product description in each accordion pane.
Description Text – Define the length of product description.
Product Add to Card – Set On to display the Add to Cart button in each accordion pane.
Product Wishlist – Set On to display the Add to wishlist button in each accordion pane.
Product Compare – Set On to display the Add to compare button in each accordion pane.

Click the Save button.

 


 

10. Start Advanced HTML

 

Start Slides

The Start Advanced HTML named Top Blocks in the front-end (Standard module type)

Start Slides

A Start Advanced HTML in the front-end (Widget module type)

Start Advanced HTML module allows you to add any custom HTML snippet (Text, images, video, etc) or JavaScript code to your website. This flexible module can be utilized a lot on your website, as you see there are eight Advanced HTML modules activated on Start demo.

Start Advanced HTML

Start Advanced HTML in the back-end

To create or configure a Start Advanced HTML, you go to Dashboard >> Modules >> Start Advanced HTML >> Hit Edit button.

 
        To create a Start Advanced HTML that looks like the demo, follow steps below:

Hit Add Module button.

2 Configure parameters as above:

    • Status – Set On to display the Start Advanced HTML module.
    • Module Title – Set Off if you don’t want to display the module title and vice versa.
    • Title – Input the module title.
    • Module Type – Choose Standard or Widget.
    • Layout – Choose All Layouts to present this module on all web pages or the single layout you want to present this module. For example: Home.
    • Position – Choose the place to present this module. For example: Promotion.
    • Sort Order – Set the order to present this module if there are several module at one position. For example: 2.

Hit Source button to input the code.

Input the code into the editor.

Hit Close button to save and close the module settings.

Now you can go to the front-end and press F5 button to check the result.

You can insert images directly to the module without digging into code quickly.

Insert images directly to Advanced HTML module

Insert images directly to Advanced HTML module

 Your site comes with a number of modules already preloaded. The modules do use advanced CSS stylles to display correctly. In case you need to return these to the default, click the ‘source’ button and paste in the code listed below

 Top Header HTML

<ul>
 <li>+1.3333.9999</li>
 <li>Free Shipingp On Orders Over $200</li>
</ul>

 

 Introduction HTML Code

<div class="row start">
<div class="container">
<h3>THIS IS START</h3>
<h4>Start – MODERN MINIMALIST FASHION THEME</h4>
<p><strong>Start&nbsp;</strong>is the latest legacy of minimalist innovation. The superb clean design emphasizes your fashion stuffs without unnecessary clutter or bloat. What makes it even more special is that the new generation of control panel can push your store to the limit with hundreds of customization options.</p>
<p><strong>Start</strong>&nbsp;is a must-have item in your collection to build an incredible online store!&nbsp;</p>
</div>
</div>

 

Shop by category

<div class="shop-by-category">
<h3>SHOP BY CATEGORIES</h3>
<div class="shop-by-category">
<h3>SHOP BY CATEGORIES</h3>

<ul>
 <li><span><img alt="category" src="https://static.wearequick.com/helpimages/startcp/384x384.jpg" /></span>

 <h4><a href="#">MEN’S CLOTHING</a></h4>
 </li>
 <li><span><img alt="category" src="https://static.wearequick.com/helpimages/startcp/384x384.jpg" /></span>
 <h4><a href="#">WOMEN’S CLOTHING</a></h4>
 </li>
 <li><span><img alt="category" src="https://static.wearequick.com/helpimages/startcp/384x384.jpg" /></span>
 <h4><a href="#">SHOES</a></h4>
 </li>
 <li><span><img alt="category" src="https://static.wearequick.com/helpimages/startcp/384x384.jpg" /></span>
 <h4><a href="#">BACKPACK</a></h4>
 </li>
 <li><span><img alt="category" src="https://static.wearequick.com/helpimages/startcp/384x384.jpg" /></span>
 <h4><a href="#">ACCESSORIES</a></h4>
 </li>
</ul>
</div>

 

Steps to buy

<div class=”col-sm-6 col-md-6 col-lg-7 steps”>
<h3>STEPS TO BUY PRODUCT</h3>

<ul>
<li>Browse our shop to find products you like</li>
<li>Click Add To Cart for items you would like to purchase</li>
<li>Click Checkout and fill out your delivery details</li>
<li>Pay online securely via Credit Card</li>
</ul>
</div>

 

Top blocks

<div class="top-blocks">
<div class="container">
<div class="row">
<div class="col-md-4">
<div><img alt="top 1" src="https://static.wearequick.com/helpimages/startcp/370x180.jpg" /> <img alt="s1" src="https://static.wearequick.com/helpimages/startcp/s1.png" />
<h3>MENSWEAR</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at convallis purus.</p>
</div>
</div>

<div class="col-md-4">
<div><img alt="top 1" src="https://static.wearequick.com/helpimages/startcp/370x180.jpg" /> <img alt="s1" src="https://static.wearequick.com/helpimages/startcp/s2.png" />
<h3>STREETSTYLE</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at convallis purus.</p>
</div>
</div>

<div class="col-md-4">
<div><img alt="top 1" src="https://static.wearequick.com/helpimages/startcp/370x180.jpg" /> <img alt="s1" src="https://static.wearequick.com/helpimages/startcp/s3.png" />
<h3>BOY IN TOWN</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at convallis purus.</p>
</div>
</div>
</div>
</div>
</div>

 

Bottom Block

<div class="bottom-blocks">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">[kuler_tabs new_arrival]</div>
<div class="col-md-3 col-sm-6">[kuler_tabs bestseller]</div>
<div class="col-md-3 col-sm-6">[kuler_tabs sale_items]</div>
<div class="col-md-3 col-sm-6">[kuler_tabs most_views]</div>
</div>
</div>
</div>

 


 

11. Start Contact Form

 

Start Contact

Start Contact Form in the front-end

Start Contact Form allows you to implement a feedback form to your store quickly. It helps you improve your customer engagement and increase your conversions.

Start Contact

Start Contact Form in the back-end

To create or configure a K Contact Form, you go to Dashboard >> Modules >> Start Contact Form >> Hit Edit button.

    To create a Start  Contact Form that looks like the demo, follow steps below:

Choose the store you want to add the Contact Form.

Hit Add Module button.

Configure parameters as below:

      • Title – Input the contact title.
      • Short CodeAutomatically generated when you input the tab title.
      • Layout – Choose All Layouts to present this module on all web pages or the single layout you want to present this module. For example: All Layout.
      • Position – Choose the place to present this module. For example: Footer Address.
      • Sort Order – Set the order to present this module if there are several module at one position. For example: 1.
      • Show Title – Set Off to hide the accordion title and vice versa.
      • Status – Set On to display the Contact Form module.

Custom Information

      • Show Custom Information – Set On to display the Custom Information below and vice versa.

Hit Source button.

Input the Google Map or any other content you want to show up. To display a Google map, you can go to Google Maps API to get your embed code.

Hit Save button.

 

 


 

12. Start Control Panel

 

Start CP is the administration control center to manipulate appearance settings of the theme. There are 140+ parameters which covers from header to footer on all website pages. All of them are carefully collected and analyzed to guarantee that you can personalize your online store as the all way you want.

Go to the back-end >> Extensions >> Module >> Start CP.

Start Control Panel

Start Control Panel

1Skin Controller – Manage the visual appearance of your website.

2General Options – Control some of the basic configuration settings for your website.

3Footer – The content which appear at the bottom of your website.

4Style Customization – Set a variety of variables that affect the general look of your website.

5Custom Code – Add code snippets to extend the ability of your website.

 

 Skin Settings

A skin defines layout style, colors as well as all design elements of your web store. Besides three built-in skins, Start allows you to create your own skin as the way you want.

Skins

Three skin styles of Start

Skins

Skin settings in the back-end

1Store Selector – Select the store to configure settings.

2Skin Selector – Select the style for the store above. There are three default styles for you to choose from.

3Settings – All settings within a style.

4Save – Keep all settings you have made.

5Skin Name – Input the new style name with your own edited settings.

6Save Skin As – Save the newly created skin.

7Export Skins – Export the newly created skin for backup.

8Import Skins – Import a back up skin.

 

General Options

 

Here you can control some of the basic configuration settings for your site


 

Layout

layout

Two layout styles – Fullwidth and Boxed

layout

Layout in the back-end

  • Layout Style – Full Width or Boxed with 1050px or 1170px.

 

header

Header in the back-end

    • Fixed Header – Set On if you want to the header fixed on the top of the website while scrolling down the web page.

header

Fixed header

  • Home Icon Type – Choose Icon or Text.
  • Mobile Menu Title – Input the menu title which is displayed on mobile.
  • Multi-Level for Default Menu – Set On if you want to utilze several level of menu items.

Live Search

Live Search in the front-end

Live Search

Live Search in the back-end

  • Status – Set On if you want to present the Live Search on your website.
  • Search Field Text – Input the initial text which will go agway when you type your own search query in the search box.
  • Search in Specific Category – Set On if you wan to narrow the search range within a category.
  • Search in Specific Manufacturer – Set On if you wan to narrow the search range within a manufacturer.
  • Search in Product Description – Set On if you wan to expand the search range in not only the product title but also product description.
  • Search Result Limit – Define the amount of matched products are displayed.
  • Product Image Size – Define the size of product image are displayed.
  • Show Product Image – Set On if you want to show the product image.
  • Show Product Name – Set On if you want to show the product name.
  • Show Product Description – Set On if you want to show the product description.
  • Show Product Price – Set On if you want to show the product price.
  • Show Product Rating – Set On if you want to show the product rating.
  • Show Add to Cart Button – Set On if you want to show the product rating.
  • Show Wish List Button – Set On if you want to show Whish List Button.
  • Show Compare Button – Set On if you want to show Compare Button.

Category Page

Live Search

Category Page in the back-end

Category Menu

  • Category Menu Type – Choose Default type or Accordion with more customized details.
  • Hide Category Image – Set On if you want to hide Category Image.
  • Sub-Category Image – Set On if you want to show sub-category images.
  • Sub-Category Image Size – Set the size of these sub-category images.
  • Sub-Categories Image Carousel – Set On to show images in a horizontal carousel or Off to show images in vertical direction.
  • Display Product Mode – Choose the default display – Grid or List Mode.

Product page

List Mode

Product page

Grid Mode

Product Page

Product page

Product Page in the back-end

  • Show Brand Logo – Set On if you want to display the manufacture logo.
  • Brand Logo Size – Set the width and height of manufacture logo.
  • Show Save Percent – Set On if you want to display the save percent when your products are discounted.
  • Save Text – Change the save text or leave it default.
  • Show Tax – Set On if you want to display the tax.
  • Show Increment/Decrement Quantify – Set On if you want to display the option to increase or decrease the quantify of products.
  • Default Sharing – Set On if you want to show sharing networks – Addthis, Email, Print, Facebook and Twitter
  • Image Lightbox – Set On if you want to show a pop-up of full-size product image when users click it.
  • Image Zoom Type – Choose Outer Cloud or Inner Cloud.
  • Zoom Window Size – Set the width and height of zoom window.
  • Lens Zoom Shape – Choose the zoom window shape – Rounded or Basic.
  • Show Custom Block – Set On if you want to display additonal information in all product page. You can input that information in the editor window below.
  • Show Related Products – Set On to show related products.
  • Related Products Style – Choose the style to show related products – Grid or Slider.

Custom Tab

Custom Tab

  • Show Custom Tab 1 – Set On to show the Custom Tab.
  • Tab Title – Input the Tab title.
  • Tab Content – Input the Tab content.
  • Show Custom Tab 2 – Set On to show the Custom Tab.
  • Tab Title – Input the Tab title.
  • Tab Content – Input the Tab content.

Contact Page

Contact page

Contact Page in the back-end

  • Show Custom Information – Show brief information below the Contact Title.

Google Map – Set On if you want to display a virutal direction nearby the contact form.

Checkout Page

Checkout page

Checkout Page in the back-end

  • Enable One Page Checkout – Set On if you want to provide a single-page checkout form, instead of the default form including several pages.

Others

Other page

Others Page in the back-end

  • Login Popup – Set On to show a popup of login form.
  • Show Custom Notification – Set On to show a successful message after customer add a product to the shopping cart.
  • Notification Show Time – Set the time determining how long the custom notification display (In milliseconds).
  • Show Quick View – Set On to utilize the Quick View pop-up.
  • View Button Text – Input the different text for “View Button” Text. You can leave it default.
  • More Details Button Text – Input the different text for . You can leave it default.
     
  • Product Description Limit – Input the limit of product description text.
 
  • Show Sale Badge – Set On to show sale badge for discounted items.
  • Enable Swap Image – Set On to enable Swap Image function.
  • Enable Scroll up – Set On to show the Go-to-top button.
  • Scroll up Text – Input th

 

 

 

Footer front

Footer in the front-end

Footer

Footer Page in the back-end

Information

  • Show Information – Set On to show a brief introduction about your shop.
  • Show Title – Set On to show the title of the brief introduction.
  • Title – Input the title of the brief introduction.
  • Content – Input the content of the brief introduction.

Contact

  • Show Contact – Set On to show your contact information.
  • Show Title – Set On to show the title of the brief introduction.
  • Title – Input the title of the Contact information piece.
  • Skype – Input the Skype ID.
  • Email – Input the email address.
  • Mobile – Input the mobile number.
  • Phone – Input the phone number.
  • Fax – Input the fax number.

Social Icons

  • Show Social Icons – Set On to show your social channels.
  • Show Title – Set On to show the title of your social channels.
  • Title – Input the title of your social channels.
  • Icon Style – Choose the icon style: Icon, Square or Circle.
  • Icon Size – Choose the icon size: 240px, 320px or 480px.

Social Networks

  • Facebook – Set On and input your Facebook URL to show your Facebook page and vice versa. For example: http://facebook/com/
  • Twitter – Set On and input your Twitter URL to show your Twitter page and vice versa. For example: http://twitter.com/
  • Google + – Set On and input your Google+ URL to show your Google+ page and vice versa. For example:http://plus.google.com/113501760508440360009/posts
  • Youtube – Set On and input your Youtube URL to show your Youtube page and vice versa. For example: http://youtube.com/
  • Pinterest – Set On and input your Pinterest URL to show your Pinterest page and vice versa. For example:
  • Instagram – Set On and input your Instagram URL to show your Instagram page and vice versa. For example: http://instagram.com/mashable
  • RSS – Set On and input your RSS URL to show your RSS page and vice versa. For example: http://mashable.com/category/rss/

Newsletter

  • Show Newsletter – Set On to show your newsletter system.
  • Show Title – Set On to show the title of your newsletter system.
  • Title – Input the title of your newsletter system.
  • Description Text – Input the description text of your newsletter system.
  • Input Text – Input the pre-text that will disapear when you start inputting text in to the email box.
  • Subscription Success Message – Input the message user subscribe newsletter successfully.
  • Subscribe Button Text – Input the content to call users to subscribe newsletters.

Mail Service

  • Mail Service – Choose the email markeing service: iContact or Mailchimp. For example: Mailchimp.
  • API Key – Input your API Key.
  • Contact List – Choose the list to input the registered list.
  • Show Custom Copyright – Set On to show the copyright.

Payment Icons

Payment Icons

Payment Icons in the front-end

Payment Icons

Payment Icons in the back-end

  • Show Payment Icons – Set On if you want to show prensent the payment methods are accepted on your website.

Add Payment Icon

Add a new payment icon in the front-end

1 Set Show Payment Icon as On.

2Hit Add Payment Icon button.

3Add Icon of Payment method.

4Add Name of Payment method.

5Add URL of Payment method.

6Add Order of Payment method.

7Set New Tab as On.

8Hit Save button.

9Hit Remove button if you don’t want to show this icon anymore.

 

Style Customization

Here you can set a variety of variables that affect the general look of your website


Style Customization delivers a conducive interface to revamp your overall website design visually. Here you are able to personalize style of the Body,Top Bar, Header, Menu as well as Footer and see the result immediately in the back-end.

Style Customize

Style Customization in the back-end

Custom CSS

Custom Body in the back-end

  • Main Color – Set the color of QuickView button, Add-to-cart icon, Add-to-compare button, scroll-up button and the product counting badge.
  • Heading Font – Set the text font of the body website, including Font Name, Font Weight, Font Style and Text Transform.
  • Text Color – Set the text color of the body.
  • Background Color – Set the background color of the theme.
  • Background Image – Upload the background image.
  • Background Pattern – Choose the background pattern.

The Background Color, Background Pattern and Background Pattern option are just availble if you choose Layout Style as Boxed.

You are able to use one background option at a time.

Custom CSS

Top Bar in the front-end

Custom CSS

Custom Top Bar in the back-end

  • Background Color – Set the background color in the topbar.
  • Link Color – Set the links color in the topbar.
  • Link Hover Color – Set the link color when users hover the mouse over in the topbar.
  • Text Color – Set the text color in the topbar.
  • Border Bottom Color – Set the border bottom color in the topbar.

Heading

Custom Header in the back-end

Heading

Custom Header in the front-end

  • Background Color – Set the background color of header.
  • Background Image – Upload the background image of header.

Menu Style Customize

Custom Menu in the back-end

  • Item Color – Set the color menu.
  • Background Color – Set the background color of menu.
  • Font – Set menu font: Font Name, Font Weight, Font Size, Font Style and Text Transform.

Footer Style Customize

Custom Footer in the back-end

  • Background Color – Set background color of the footer.
  • Heading Color – Set the heading color of the footer.
  • Link Color – Set the link color in the footer.
  • Link Hover Color – Set the link color when users hover the mouse over in the footer.

Price

Product in the back-end

  • Price Color – Set the price color of products.

 

 

Custom Code

 

Add code snippets to extend the ability of your website.


By default, you are equipped with tons of fundamental options to tweak your website. However, there is still a section to push the limits. Here, in the Custom Code tab, you are free to add Custom CSS Files, Custom CSS code and Custom JavaScript.

Custom CSS

Custom Code in the back-end

1Custom CSS File – Declare the Custom CSS files which you have created in folder catalog/view/theme/{your_theme}/stylesheet/custom/ already.

2Custom CSS – Add CSS code snippets to define the apperance of your website.

3Custom JavaScript – Add JavaScript code snippets to extend the functionality for your website.

This code clarification will be loaded before other CSS files.

Custom CSS File

Custom CSS in the back-end

1Choose Custom CSS File tab

2Set Status on

3Add Custom CSS File

4Hit Save button

 

Custom CSS

Custom CSS

Custom CSS in the back-end

1Choose Custom CSS tab

2Set Status on

3Add Custom CSS

4Hit Save button.

Custom JavaCript

Custom JavaScript in the back-end

1Choose JavaScript tab

2Set Status on

3Add Custom JavaScript

4Hit Save button


 

13. Start Filter Module

 

Start Slides

Start Filter in the front-end

Start Filter module makes searching for products on your store a breeze. You can filter products via Category, Manufacture, Attribute, Option orPrice.

Start Filter

Start Filter in the back-end

To create or configure a Start Filter, you go to Dashboard >> Modules >> Start Filter >> Hit Edit button

To create a Start Filter as demo, follow steps below:

1Hit Add module button.

2Set paramaters as above:

      • Status – Set On to display the Start Filter module.
      • Show Title – Set On to display the filter title and vice versa.
      • Title – Input the filter title. For example: Filter.
      • Short CodeAutomatically generated when you input the tab title.
      • Layout – Choose All Layouts to present this module on all web pages or the single layout you want to present this module. For example: Category.
      • Position – Choose position to place the module. For example: Content Top.
      • Category Filter – Set On to make the category filter available.
      • Manufacture Filter – Set On to make the manufacture filter available.
      • Attribute Filter – Set On to make the attribute filter available.
      • Option Filter – Set On to make the option filter available.
      • Price filter – Set On to make the price filter available.
      • Exclude Attributes – Prevent attributes from being filtered (Attributes are listed in the Admin >> Catalog >> Attributes)
      • Exclude Options – Prevent options from being filtered (Attributes are listed in the Admin >> Catalog >> Options)
      • Price Range – Set the limit of price for the filter. For example: From 0 to 1000
      • Price Currency – Set the currency for the filter. For example: EUR.
      • Sort Order – Set the order to present this module if there are several module at one position. For example: 2.

3Hit Save button.

 

 


14. Start Layer Slider Module

 

Start Slides

Start Layer Slider in the front-end

Start Layer Slider is a flexible slider module to present any animated content sleekly – ImagestextHTML elementsYoutube videos or Flash movie. You are able to customize the appearance and behavior of your slideshow entirely at the smallest details with its 28 transition effects and 63 customization parameters.

Normally, Start Layer Slider is used to present the hottest items on the top of your website. But you can use it anywhere you want in the website. 

Start Layer Slider

Start Layer Slider in the backend

To create or configure a Start Layer Slider, you go to Dashboard >> Modules >> Start Layer Slider >> Hit Edit button.

 

Create a Layer Slider with three steps

Three steps to create a Layer Slider.


Layers

A slider includes several slides

Create new slide

A slider includes several slides

Go to the back-end >> Module >> Start Layer Slider >> You will be redirected to the Create new slider page

There are three steps to create a Layer Slider:

Three steps to creat a slider

Three step to create a Layer Slider

1Create a Slider

2Add Slide(s) to Slider

3Add Layer(s) to Slide

Now we go into details:

 

 

Step 1 – Create a slider

Create a Slider

Create a Slider

1Go to Slider Manager Tab

2Input the Slider Tilte

3Hit SAVE ALL AND EDIT SLIDER button.

The Sliders will be created and listed in the left panel and the Slide management panel will be appeared in the right.

Control Panel

The newly created layer slider cotrol panel and setting

1The new Layer Slider is already created.

2Parameteres to edit the Layer slider.

3The Slide management panel.

4Hit SAVE ALL AND EDIT SLIDER button with every changes you have made

Now you can configure the slider’s parameters as the way you want:

Edit Slider

General settings for the Layer slider

  • Slider Title – Input the slider title. For example: Layer Slider Promo.
  • Short CodeAutomatically generated when you input the slider title.
  • Delay – The time amount that a slide display before moving to next slide (in milisecond). For example: 6000.
  • FullWidth Mode – Choose the slider types. There are three types for you to choose from:
    • Boxed: Slider is presented in a fixed size – Width ad height.
    • Fullwidth: Slider is horizontally elastic to fit the width of the page.
    • Fullscreen: Slider is both horizontally and vertically elastic to fit the width the above the fold of your website..
  • Start Slider Dimension – Set the size of slider.
  • Touch Mobile – Set On to let users touch the screen to move to another slide in slider and vice versa.
  • Stop On Hover – Set On to stop the slide whenever users hover mouse in slider and vice versa.
  • Shuffle Mode – Set On to display slides randomly.
  • Image Cropping – Set On to automatically resize the Slide Image to the Start Slider Dimension above.

The Delay parameter here has a lower priority than the Delay parameter in List of Slide tab >> Delay parameter.

Appearance Settings

Appearance Settings

  • Shadow Type – Choose to display shadow under slider. There are three shadow styles.
  • Show Time Line – Show the bar shows the remaining time of each displayed layer.
  • Time Liner Position – Choose the position to display the time liner: Top or bottom.
  • Background Color – Choose the background color for the slider.
  • Margin – Set the distance of white color between slider and all elements around it. For example: 5px
  • Padding(border) – Set the distance between slider and all elements around it with the Background Color parameter you set above. For example: 5px
  • Show Background Image – Set On to show the background image and vice versa.
  • Background URL – Input the path to the background image.

Navigator Settings

Navigator Settings

  • Navigator Type – Show all layers of the Slider in the botton with:
    • Thumbnail – Show small images of all standby layers.
    • Bullet – Show small bullet.
    • Both – Show both thumbnail and bullet.
  • Arrows – Set the style for the arrow above: Vertical Colorentered or Next To Bullets.
  • Style – Set the style for the bullet above: Round, NavBar, Round Old, Square Old and NavBar Old.
  • Offset Horizontal – Set the distance between navigator and the bottom edge of the slider.
  • Offset Vertical – Set the distance between navigator and the left edge of the slider.
  • Always Show Navigator – Set On to show navigator even users don’t hover mouse in slider.
  • Hide Navigator After – Set the time when the navigatior will be disappeared automatically (in millisecond). For example: 200

Thumbnails Settings

Thumbnails Settings

  • Thumbnail Width – Set the width of thumbnails.
  • Thumbnail Height – Set the height of thumbnails.
  • Number of Thumbnails – Set the amount of thumbnails displays in navigator.

Mobile Visibility

Mobile Visibility

  • Hide Under Width – Set the limit for mobile screen width; if the mobile screen width of users is smaller than the limit you set, the Layer Slider will disappear.

 

Step 2 – Add slide(s) to a Slider

Choose the Layer Slider in the left column >> Hit Manage Slides button>> You will be redirected to the List of Slides page.

Manage slides

Go the the “List of Slides” page

Create a slide

Create a slide

1Create new slide

2Add Layer(s) to Slide in the Step 3

Create a slider, for example slide01, set parameters as below:

Create new slide

Input information about the slide

 

  • Title – Input Tilte of the Slide. For example slideo1.
  • Status – Set On to enable the slide.
  • Transition – Select one in 28 transition effects; for example: Random effect.
  • Slot Amount – Define the pieces amount of Slide Image when it flies in to the Slider.
  • Transition Rotation – Set the rotation when changing Slide. For example: 90
  • Transition Duration – The period of time in which the effect exists (in millisecond)
  • Delay – The time amount that a slide display before moving to next slide (in milisecond). For example: 6000.
  • Enable Link – Choose On to enable clickable URL in each slide.
  • Link – The URL which will be shown up when you click the slide.
  • Thumbnail – Upload the thumbnail of the slider. You can leave it blank.
  • Full Width Video – Show video on the overall layer slider.
  • Auto Play – Set On to enable auto-play video.
  • Hit Preview Slider or Save button.

The Delay parameter here has a higher priority than the Delay parameter in Slider Management tab >> Create New Slider >> Delayparameter.

 

 

Step 3 – Add Layer(s) to Slide

You can add Slide Image, Layer Image, Layer Video or Layer Text with various incredible effects into each slide.

Create new slide

Slide Image and Layer Image in a Slide

Drag and drop layer

Drag and drop a Layer Image in a Slide

Slide Image is the fixed image will be shown in advance in the slide. To upload the slide image, in the Layers Editor, you follow instructions as below:

Create new slide

Add Slide Image

1Hit Update Slide Image button.

2Upload an available image.

3Or upload a new image instead.

General settings

Edit Layer Data Image

Add Slide Image

1Hit Update Slide Image button.

2Upload an available image.

3Or upload a new image instead.

Then you can scroll down the web page to configure avanced settings.

Advanced settings

Edit Layer Data Image

Advanced settings for the Layer Image

Edit Layer Data

  • Class Style Leave it blank.
  • Text Leave the default name or input the image name as you want.
  • Effect – Set the fly-in effect for the layer with 10 animation effects and 31 Easing effects.
  • Speed –  Set the time amount that the effect operate (In millisecond)
  • Position – Set the position of the Video when compared with the Top edge and Left edge of the slider (In pixel).

Other Animation

  • End Time – Set the time when the layer flies out of the slider; it is counted from the time when the slide image appears (in millisecond).
  • End Speed – Set the displaying time of each layer (in millisecond).
  • End Animation – Set the fly-out effect for the layer with 10 animation effects and 31 Easing effects.

The End Time parameter needs to have a value bigger than the Start time parameter in Layer Collection section below.

General settings

Edit Layer Text

Add Layer Text

1Hit Add Layer Text button.

2Text “Your Caption Here 1” will be showed up. You can drag and drop to place it anywhere in the slide.

Then you can scroll down the web page to configure avanced settings.

Advanced settings

Edit Layer Data Text

Edit Text Layer

2Text “Your Caption Here 1” will be showed up. You can drag and drop to place it anywhere in the slide.

3Hit Insert Typo button.

4The Typo Management page will be showed up.

5Edit text as the way you want.

6Setup other parameters.

  • Effect – Set the fly-in effect for the layer with 10 animation effects and 31 Easing effects.
  • Speed –  Set the time amount that the effect operate (In millisecond)
  • Position – Set the position of the Video when compared with the Top edge and Left edge of the slider (In pixel).

Other Animation

  • End Time – Set the time when the layer flies out of the slider; it is counted from the time when the slide image appears (in millisecond).
  • End Speed – Set the displaying time of each layer (in millisecond).
  • End Animation – Set the fly-out effect for the layer with 10 animation effects and 31 Easing effects.

The End Time parameter needs to have a value bigger than the Start time parameter in Layer Collection section below.

General settings

Add Layer Video

Add Layer Video

1Hit Add Layer Video button

2The video layer is shown up

3Choose video type: Youtube or Vimeo

4Input Video ID. For example:

Youtbe ID

Youtbe ID

Vimeo ID

Vimeo ID

5Set the size of the displayed video.

6Hit Find Video button.

7The relevant video is shown up.

8Hit Use This Button video.

Then you can scroll down the web page to configure avanced settings.

Advanced settings

Edit Layer Data Image

Advanced settings for the Layer Video

Edit Layer Data

  • Class Style Leave it blank.
  • Text Leave the default name or input the image name as you want.
  • Effect – Set the fly-in effect for the layer with 10 animation effects and 31 Easing effects.
  • Speed –  Set the time amount that the effect operate (In millisecond).
  • Position – Set the position of the Video when compared with the Top edge and Left edge of the slider (In pixel).

Video position

Position

Other Animation

  • End Time – Set the time when the layer flies out of the slider; it is counted from the time when the slide image appears (in millisecond).
  • End Speed – Set the displaying time of each layer (in millisecond).
  • End Animation – Set the fly-out effect for the layer with 10 animation effects and 31 Easing effects.

The End Time parameter needs to have a value bigger than the Start time parameter in Layer Collection section below.

Here you can configure paramaters to display layers as the way you want.

Layer Collection

Layer Collection

1Define Layer Overlay.Layers at higher position will overlay layers at lower postition. You can drag and drop layers to organize them.

2Choose the start time when the layer will be displayed (is counted from the time when the slide image appears).

3Hit Show button to present or hide a layer. When the button is pink, the layer is presented; when it turns to grey, the layer is hidden.

4Show the displaying time of each layer (in millisecond). You can set this time in Slider Manager tab >> Create New Slider >> Delay

5Show the Start Time the layer will be displayed when compared to the displaying time of the Slide Image.

 

Assign modules

Show the Layer Slider on which layout you want. you can choose all layouts or separate layout.

Modules Assignment

Assign a module to a layout

1Choose Modules Asignment tab.

2Choose the Layer Slider which you have created. For example: Layer Slider.

3Choose the Store you which want to display the Layer Slider. For example: Start OpenCart Theme (Default).

4Choose the Language which you want to display the Layer Slider. For example: All languages.

5Choose the Layout where you want to display the Layer Slider. For example: Home.

6Choose the Position where you want to display the Layer Slider. For example: Promotion.

7Set Status as On to enable the Layer Slider.

8Set the position Order. For example:1

9Hit SAVE ALL AND EDIT SLIDER button.

10Hit Remove button if you want to get rid of the module assignment.

11Hit Add Module button if you want to

 

 

Export & Import

Backup and restore the Layer Slider


Export

Export a slider

Export a slider

1Go to Slider Management Tab.

2Choose the Layer Slider you want to export.

3Hit Export Slider button.

4The Export file will be shown up.

5Choose Save File option.

6Hit OK button.

And save the exported file in a safe place.

Import

Import a slider

Import a slider

1Go to Import Tools Tab.

2Hit Choose File button.

3Choose the exported file.

4Hit Open button.

5Hit Import Slider button.

Now the Slider is imported to your Layer Slider. You can go to the Slider Management tab to check it.

 


15. Start Menu

Kuler Slides

Start Menu in the front-end

Start Menu gives you ability to create a huge sitemap-like menu with links to every page. Here you can navigate users with not only text but also videosand images.

Kuler Menu

Kuler Menu in the back-end

To create or configure a Start Menu , you go to Dashboard >> Modules >> Start Menu >> Hit Edit button.

 

To set up a StartMenu item as demo, you follow steps below:

1Hit Add Menu Item button.

2Configure parameters in Menu tab as below:

  • Status – Set On.
  • Title – Input the menu title. For example: Custom HTML
  • Sort Order – Input the order of the menu item. For example: 4
  • Module Type – Choose HTML (or Category, Product and Custom).
  • Enable Hyperlink – Set Off to make the menu item unclickable and vice versa.

Menu item setting

  • Enable Hyperlink – Set Off to make the menu item unclickable and vice versa.
  • Custom HTML Input the HTML content.

3Configure parameters in Module Placement tab as below:

  • Choose All Layouts to present this module on all web pages or the single layout you want to present this module.
  • Choose Position to place the module. For example: Menu.
  • Set the Order for this menu if there are several menus in the same place.
  • Set Status On.

4 Hit Save button.

There are four menu items in the demo. Intructions above are to create


 

16. Start Slides Module

 

Kuler Slides

Start Slides in the front-end

Start Slides module is a horizontal product slider with jQuery. It allows you to showcase the most highlight items and attract customers quickly.

Kuler Slides

Start Slides in the back-end

To configure a Start Slides as the same as it shows in the demo: Go to Extensions>> Modules>> Start Slides >> Hit Edit button

To create a Start Slides as demo, follow steps below:

1Hit Add Module button.

2Configure parameters as below:

  • Status – Set On to display the Kuler Slides module.
  • Show Title – Set Off to hide the accordion title and vice versa.
  • Module Title – Input the slides title.
  • Short CodeAutomatically generated when you input the tab title.
  • Layout – Choose All Layouts to present this module on all web pages or the single layout you want to present this module. For example: Home.
  • Position – Choose the place to present this module. For example: Content Top.
  • Sort Order – Set the order to present this module if there are several module at one position. For example: 3.
  • Slide Type – Choose which type you want to present: Category, Featured, Bestseller, Latest or Special.

3Then hit Save button.


 

17. Start Tabs Module

Kuler Slides

Start  Tab in the front-end

Start  Tabs helps you showcase a huge number of product categories in tab style. Your customers just need to switch tabs to catch up with the hottest item types without going into all categories.

Kuler Tabs

Kuler Tab in the back-end

To create or configure a Kuler Tabs, you go to Dashboard >> Modules >> StartTabs >> Hit Edit button

 
      To create a Kuler

Tabs

    as demo, follow steps below:

1Hit Add Module button.

2 Configure parameters as below:

  • Status – Set On to display the Start  Tab module.
  • Show Title – Set Off to hide the tab title and vice versa.
  • Module Title – Input the tabs title.
  • Short CodeAutomatically generated when you input the tab title.
  • Layout – Choose All Layouts to present this module on all web pages or the single layout you want to present this module. For example: Home.
  • Position – Choose the place to present this module. For example: Content Top.
  • Sort Order – Set the order to present this module if there are several module at one position. For example: 1.

3 Hit Add Tab button.

4Configure parameters as below:

  • Tab Title – Input the tab title.
  • Tab Type – Choose which type you want to present: Category, Featured, Bestseller, Latest or Special.
  • Show Title – Set On to display the slides title and vice versa.
  • Status – Set On to display the tab item.
  • Product Limit – Set the maximum amount of products are displayed in the tab item.
  • Product Dimension – Set the size of product images are displayed in the tab item.
  • Product Name – Set On if you want to display the product name in the tab item and vice versa.
  • Product Price – Set On if you want to display the product name in the tab item and vice versa.
  • Product Rating – Set On if you want to display the product rating in the tab item and vice versa.
  • Product Description – Set Of if you want to hide the product description in the tab item and vice versa.
  • Product Add to Cart – Set On if you want to display the Add to Cart button in the tab item and vice versa.
  • Product Wishlist – Set On if you want to display the Add to wishlist button in the tab item and vice versa.
  • Product Compare – Set On if you want to display the Add to compare button in the tab item and vice versa.
  • Product Description Limit – Set the maximum amount of words that describe the product.

5Hit Close button.


 

18. Start Testimonials

Testimnonial

Start Testimonial in the front-end

Start Testimonials module helps you show nice words from your customers on your website.

Testimnonial

Start Testimonial in the front-end

To create or configure a StartTestimonial module, you go to Dashboard >> Modules >> Start Testimonial >> Hit Edit button.

To create a Start Testimonial as demo, follow steps below:

1Hit Add Module button.

2Configure parameters as below:

      • Title – Input the testimonial title. For example:What our clients say
      • Short CodeAutomatically generated when you input the tab title.
      • Layout – Choose All Layouts to present this module on all web pages or the single layout you want to present this module. For example: Home.
      • Position – Choose the place to present this module. For example: Content Bottom.
      • Sort Order – Set the order to present this module if there are several module at one position. For example: 1.
      • Show Title – Set On to show the testimonial title and vice versa.
      • Status – Set On to show the testimonial module.

General Settings

      • CSS Class – Input SS Class here if you want to customize this module differently.
      • Auto Play – Set On to switch testimonials automatically.l
      • Testimonials per View – Set the testimonials amount you want to display at the same time.

3Hit Add Testimonial button

4Configure parameters as below:

      • Writer Name – Input the name of the testimonial author.
      • Writer Image – Upload the photo of the testimonial author.
      • Writer Information – Input the description of the testimonial author.
      • Testimonial – Input the testimonial content.
      • Display Order – Sort the testimonial order.

5Hit Save button.

 


19. Other Modules of interest

 

Image Setting

Click here to view more details about the Featured Module

 

Mega Menu Module

Click here to view more details about using the Mega Menu Category Display

 

 Home Page Manufacture Images

The home page manufacturer images can be modified in the Banners Area

 The manufacture images are being displayed by using the Carousel Module

 

Add News / A Blog / Articles

You can add news to your site via the Blog Manager 

 

 

 

Was this article helpful?

Related Articles

Leave A Comment?