ShopperLine Lite

Installing Theme & plugin

  • First, download the ShopperLine theme zip file.
  • Login to WordPress dashboard .
  • Go to “Appearance > Theme”.
  • Click on “Add new” button and then click on “Upload theme” button. Here upload theme zip file.
  • Activate the theme.

install shopline

For creating a store, you need to install the following plugin
Woocommerce –
Woocommerce plugin is a free e-commerce plugin which allows you to sell anything online.

  • Go to Plugin > Add new.
  • Search Woocommerce plugin in the search box and activate the plugin, installation is done.

YITH Woocommerce wishlist –
This plugin will allow you to add wishlist functionality to your e-commerce.

  • Again Go to plugin > Add new
  • Search YITH Woocommerce wishlist and activate the plugin, installation is done.

One Click Setup

  • Just Navigate to Appearance > Customize panel. Here option is given for installing plugin and setup homepage in just one click. Just a one click your homepage will be setup.one click setup customize shopline doc
    one click setup customize 1 shopline doc

Demo Import

  • Go to your WP dashboard. Navigate to Appearance > Get started with shopline. Here you will see a option button “Demo import”. Click on it.
  • Before importing demo make sure WooCommerce & ThemeHunk customizer Plugin has been installed on your dashboard.
  • Click on the Button “One Click Install“. Install and active the plugin. Now you’ll see a option of Import demo data in your appearance sidebar.
  • Click on the button “Import demo data“. Wait for few minutes Your demo will import successfully.

demo-import

Site Identity

  • To display Site logo or site title tagline and site icon on your site.
  • Dashboard > Appearance > Customize > Site identity.
  • Logo– Upload a logo image with specific width and height.
  • Site Title & Tagline – Display site title & tagline in-place of Logo.
  • Site Title & Tagline Show/Hide – Check on the radio button display site title and tagline.
  • Site Icon – You can upload a site icon for your browser.

Site identity image shopline

Typography

  • Go to Appearance > Customize > Appearance Setting > Typography.

You can add typography on your site. Here multiple google font families are available.

  • Font subsets – You can use multiple font subsets for your site.

font subsets typography shopline

  • Body – Choose Font family for body of site. Adjust the font size, line height and letter spacing.

body typography shopline

  • Heading (H1) – This will be applicable for all h1 heading like page title, product title in single page. Choose font family and adjust the font size, line height & letter spacing.

heading h1 typography shopline

  • Heading (H2) – This will be applicable for all h2 heading like slider heading, section heading. Choose font family and adjust the font size, line height & letter spacing.

heading h2 typography shopline

  • Heading (H3) – This will be applicable for all h3 heading like product title, blog title. Choose font family and adjust the font size, line height & letter spacing.

heading h3 typography shopline

  • Heading 4 (H4) – This will be applicable for all h4 heading like footer widget title, sidebar widget title. Choose font family and adjust the font size, line height & letter spacing.

heading h4 typography shopline

  • Heading 5 (H5) – This will be applicable for all h5 heading. Choose font family and adjust the font size, line height & letter spacing.

heading h5 typography shopline

  • Heading 6 (H6) – This will be applicable for all h6 heading. Choose font family and adjust the font size, line height & letter spacing.

heading h6 typography shopline

Global Setting

  • Go to Appearance > Customize > Appearance Setting > Global Setting.
  • Sidebar Alignment – This setting allows you to set the site layout in all the templates and choose the sidebar alignment for inner page.
  • Parallax Effect – Check this option to disable parallax scrolling from complete site ( front page sections and inner pages header ).
  • If you want to disable parallax scrolling only from Front page hero section. Check this doc.
  • Animation Effect- Check this option to disable Animation Effect from complete site.
  • Hide back to top button – You can enable or disable back to top button on your site.

global appearance setting shopline

Theme Color

  • Go to Appearance > Customize > Appearance Setting > Theme Color.
  • Theme Color- Using theme color you can pick the color for those items whose color option is not given.
  • Background color – You can pick the background color of inner pages.

theme color appearance shopline

Page Container Setting

  • Go to Appearance > Customize > Appearance Setting > Page Container Setting.
  • Set the size (in pixels) for all templates. It will be easy for you to manage the width of your site. By default 1200px has been set. It is the maximum size for homepage and inner pages width.

page container shopline

Header Options

  • Go to WP Admin > Appearance > Customize > Header Options.

Header option hero shopline

  • In Header option section you can change the styling of your header, front page and inner page.

Header Setting

  • Setting – In header setting you can disable the fixed header, set the header layout and if you want transparent header just check the box (this will be applied for front page template only). You can show last added menu in a custom menu button. You can set the background color and also give color to each element.

header setting hero shopline

  • Style – In style you can pick color for each element.

header setting style shopline

Front Page Hero

  • Go to Appearance > Customize > Header option > Front Page Hero .
  • Here you can set the styling of front page.
  • Setting – Select the height for your front page header using the scroll bar. Choose the hero layout. Six different layouts Slide show, Color, Image, Video, Gradient and one more option is External plugin if you want to add any slider plugin you can and show your slides. Compatible with all slider plugin
  • Slide Show – You can show up-to 3 slides in front page header and also manage the slider speed.
  • Color – Pick desired color for your front page header with color transparency.
  • Image – Upload any background image in front page header.
  • Video – Upload any video with poster image. You can also mute your video.
  • Gradient – Three different gradient style for your front page.
    front page hero shopline
  • Style – Choose overlay color or gradient. Six different gradient are there and you can pick color for each element too.

front page style setting shopline

Inner Page Hero

  • Go to Appearance > Customize > Header option > Inner Page Hero .
  • Here you can set the styling of inner pages.
  • Setting – Select the height for your inner page header using the scroll bar. Choose the hero layout. Five different layouts Slide show, Color, Image, Video and No header.
  • Slide Show – You can show up-to 3 slides in your inner page header and also manage the slider speed.
  • Color – Pick desired color for your inner page header with color transparency.
  • Image – Upload any background image in header.
  • Video – Upload any video with poster image. You can also mute your video.
  • No header – If you don’t want to show any image, color r video you can select the option no header.

innerpage hero img shopline

  • Style – Choose the overlay as color or gradient. different overlay designs are given.

innerpage hero style shopline

Frontpage section

  • Go to Appearance > Customize > Frontpage section.

front page section shopline

Category Slider

  • Go to Appearance > Customize > Category Slider.
  • For this section WooCommerce plugin is required to show Category. So make confirm that you have installed WooCommerce plugin.
  • In category slider you can show category slides.
  • Create Category.
  • Navigate to Appearance > Customize panel > category slider. Choose your desired category from category section and show the category in slider. Always remember your category will be only display when you have uploaded the thumbnail image.

category slider shopline

  • Style – You can change Style in your section.

Ribbon Section

  • Go to Appearance > Customize > Ribbon Section. .
  • You can add image, video, color with svg, color in this section. Section can be easily disable with disabling heading and sub-heading.
    ribbon frontpage shopline
  • Style – You can change Style in your section.

Product (WooCommerce)

  • Go to Appearance > Customize > Product Section (WooCommerce) .
  • For this section WooCommerce plugin is required for showing your Category product. So make confirm that you have installed WooCommerce plugin.
  • In this section you can show your category product and recent products in a grid layout.product frontpage shopline
  • Style – You can change Style in your section.

Product Slider

  • Go to Appearance > Customize > Product Slider (WooCommerce) .
  • For this section WooCommerce plugin is required for showing your Category product. So make confirm that you have installed WooCommerce plugin.
  • Using product slider you’ll be able to show your products in a slider. Navigate to Customize > Frontpage section > Product slider. Here choose product type, product category and set the speed of slider.product slider shopline
  • Style – You can change Style in your section.

Testimonial Section

  • Testimonial section will help you to show testimonials or reviews of your client. Go to Customize > Testimonial. Add heading, sub-heading and adjust the slider speed.

testimonial frontpage shopline

  • Choose testimonial widget. Here you can add author image, author name, testimonial text, website url and link. You can add unlimited testimonial in it.

testimonial widget shopline

  • Style – You can change Style in your section.

Service Section

  • Show your services in service section. Go to Appearance > Customize > Service. Add your desired icon from font awesome icon or upload an image of your service with styling. Pick color for your background and adjust the section padding of top and bottom.

services frontpage shopline

AboutUs Section

  • Display about your company through about us section. Go to Appearance > Customize > About us. You can upload an image an in the right column and description in the left column. Go to customize > front-page > About us section.

aboutus frontpage shopline

  • Style – You can change Style in your section.

Latest Blog Section

  • Latest blog section allows you to show the your blog. Go to Appearance > Customize > Latest blog. You can choose latest category, change the text of button, autoplay on/off the slider.

latest blog frontpage shopline

  • Style – You can change Style in your section.

Three column Ad

  • Show your ad on your site. Go to Appearance > Customize > Three column Ad. Upload up to Three ad images with image link.

three column frontpage shopline

  • Style – You can change Style in your section.

Section Ordering

  • Go to Appearance > Customize > Section Ordering. Drag and drop any section and change its position according to your need.

section ordering img shopline

Style Setting

  • Theme contain Style for each section. In style you can pick background color, choose color with SVG (two different design) and color for each element.
  • If you want to show color in your background. Just select the radio button of color and pick desired color from the color box or put the color code.
  • If you want to show Color with SVG design in your section. Select the radio button of Color with SVG and choose your desired design of SVG.
  • If you want to show a background image, just select the radio button of Image, upload an image here and set the overlay transparency.

style setting shopline

  • Using Section padding you can adjust the top padding and bottom padding (in px).

section padding shopline

  • Note – For Service section you can only choose background color and In Ribbon section you can also choose video for your background.

Shop Page setting

  • For creating shopping products. Navigate to Wp dashboard > Products > Add new. Here create products, fill all the fields and choose category for them.
  • It allows you to show single product page. You can set the product page left, right or with no sidebar. Choose the product page layout and number of product. Color option will allow you to put desired color in product page.

shop pages shopline

  • Style – Change the color of each element.

shop page style shopline

How to Create Category and Product

  • Go to WP dashboard > Product > Category.
  • For Category – Add name, slug, choose parent category, description and upload a thumbnail image.
  • For Product – Navigate to products, here add your product and choose desired category for showing your product on site.
  • Category will be shown in your category slider and products in product section, product slider as well as in shop pages.

Create category shopline
Note – For showing Product on your site WooCommerce plugin is must.

Custom Page Templates

  • Go to Dashboard > Pages. Add new page then select the template from page attribute.
  • Blank template- If you want to hide header and footer from page just use this template. This will only show content in the page .
  • Contact page template – If you want to show contact form in page, select this template. Just put the shortcode in contact page setting given in theme options. You can create a form using lead form builder plugin.
  • Home page template – Using this template you are able to show default home page sections.
  • Page Builder template – You can create multiple pages using any page builder plugin on site.

Note – For page builder template download any Page Builder plugin from WordPress.

How to create contact page

  • For Contact Page template. Go to Dashboard > Page > Page attributes > Contact Page template. Now publish the page.

contact page template shopline

  • Navigate to page > click on customize (admin bar). Now you are able to see the Contact Page setting option in customize panel.

contact page setting img shopline

  • To create contact form download and activate Lead form builder on your WP dashboard.
  • Add the shortcode of form and fill other fields then you are able to show a contact form on page.

contact page setting shopline

Additional CSS

  • To add additional CSS go to Appearance > Customize > Additional CSS and simply put the CSS here.

css section

For more information you can contact our support team at support forum.