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
1. Logo
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
The Start Advanced HTML named Top Blocks in the front-end (Standard module type)
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 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:
1 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.
4 Input the code into the editor.
5 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
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 </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> is a must-have item in your collection to build an incredible online store! </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 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 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:
1 Choose the store you want to add the Contact Form.
2 Hit Add Module button.
3 Configure parameters as below:
- Title – Input the contact title.
- Short Code – Automatically 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.
4 Hit Source button.
5 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
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.
Three skin styles of Start
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
Two layout styles – Fullwidth and Boxed
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.
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 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
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.
List Mode
Grid Mode
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
- 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 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 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
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
Footer in the front-end
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.
Custom Copyright
- Show Custom Copyright – Set On to show the copyright.
Payment Icons
Payment Icons in the front-end
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 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 Customization in the back-end
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.
Top Bar in the front-end
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.
Custom Header in the back-end
Custom Header in the front-end
- Background Color – Set the background color of header.
- Background Image – Upload the background image of header.
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.
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.
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 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 in the back-end
1Choose Custom CSS File tab
2Set Status on
3Add Custom CSS File
4Hit Save button
Custom CSS
Custom CSS in the back-end
1Choose Custom CSS tab
2Set Status on
3Add Custom CSS
4Hit Save button.
Custom JavaScript in the back-end
1Choose JavaScript tab
2Set Status on
3Add Custom JavaScript
4Hit Save button
13. Start Filter Module
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 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 Code – Automatically 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 Layer Slider in the front-end
Start Layer Slider is a flexible slider module to present any animated content sleekly – Images, text, HTML elements, Youtube 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 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.
A slider includes several slides
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 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
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.
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:
General settings for the Layer slider
- Slider Title – Input the slider title. For example: Layer Slider Promo.
- Short Code – Automatically 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
- 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 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
- 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
- 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.
Go the the “List of Slides” page
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:
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.
Slide Image and Layer Image in a Slide
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:
Add Slide Image
1Hit Update Slide Image button.
2Upload an available image.
3Or upload a new image instead.
General settings
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
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
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 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
1Hit Add Layer Video button
2The video layer is shown up
3Choose video type: Youtube or Vimeo
4Input Video ID. For example:
Youtbe 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
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).
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
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.
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
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
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
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 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
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.
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 Code – Automatically 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
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 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 Code – Automatically 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
Start Testimonial in the front-end
Start Testimonials module helps you show nice words from your customers on your website.
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 Code – Automatically 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
Featured
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
Leave A Comment?