Shopper Line Pro

Installing Theme

  • First, download the Shopline theme zip file from the member’s area.
  • 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 pro img doc

For our Shopline theme, you need to install the required plugin –

Woocommerce

Woocommerce plugin is a free e-commerce plugin which allows you to sell anything online.
To install this plugin-

  • Login to WordPress Admin panel.
  • 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 e-commerce.
To install this plugin-

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

How to Set Homepage

  • For creating Homepage on your site follow the below instructions –
  • Go to Wp Dashboard > Page > Add New > Create a Page.
  • In the right sidebar of your editor you will see Page attributes > Template. Click on the template and select the option Homepage template. Publish it.
  • Navigate to Customize panel. In homepage settings. Select the radio button of A Static page and choose your homepage which you have created as front page.homepage shopline pro doc

Demo Import


Note – “This video showing onelinepro template import process, But same will work for all ThemeHunk themes.”

  • For more information follow this link.

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 shopline pro

  • Style – Pick desired Color for site title & sub title.
  • Site title Typography – You can change the typography of site title and site tagline.

site identity style shopline pro

Section Scrolling Menu

  • To add Scrolling menu please follow the below steps –
  • Go to WP Dashboard > “Appearance > Menus” and create a new custom menu.
  • Add new link from “links” tab.
  • Here you need to add section id in “URL” field.Menus image shopline
  • You can put below id’s for section scrolling menu.
  • Woocommerce category slider – #category_section
  • Ribbon section – #ribbon_section
  • Service section – #services
  • Woocommerce Product section – #featured_product_section
  • Woocommerce Product slider – #featured_product_section1
  • Banner section – #hot_deal_section
  • Testimonial section – #testimonial_section
  • About us – #aboutus_section
  • Latest blog section – #post_section
  • Fact Counter – #counter
  • Woocommerce widget section – #best_sell_section
  • Three column featured – #hot_sell_section
  • Brand section – #brand_section
  • Brand section – #instagram-section

Front Page Menu

  • Go to WP Dashboard > Appearance. For showing your menu in front page header on your site. Navigate to Menus > Create menu > Menu Settings. Here three menu options – Frontpage Menu, Main Menu and Footer Menu.
  • Now select “Front Menu” as a Theme Location for Section Menus. Display Menu on front page header.

frontpage menu shopline

Mega menu

  • Go to Appearance > Menus. Add a page, category, or custom link.
  • You can create multi column menus, add custom links, page, widgets, post, category in a parent & dropdown menu and change WordPress menu style. This allows you to set additional parent links and submenus (nested menu) within the drop-down menu. You can see more links all at once.
  • Mega menu setting – On the “Dropdown Column” option panel select the Mega menu and save menu. The menu in which you have selected the mega menu is parent menu.mega menu 1
  • You can set the header titles above the nested links. You can do this by adding the another level of nested links under the initial nested links. See the below image to do this.

Mega menu 3

  • Color option – Just go to Customize > Header setting > mega menu color, you can pick the color of text, link, text and hover color from here.

Mega menu color option

Theme Options

  • All changes made in theme options will be applied on whole site.
  • Go to Appearance > Customize > Theme Options.

theme options shoplinepro theme

Inner page Typography

  • Go to Appearance > Customize > Theme options > Inner page Typography.

inner page typography shopline pro

You can add typography in the inner pages of 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 (H2) – This will be applicable for all h2 heading. Choose font family and adjust the font size, line height & letter spacing.
  • 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 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 5 (H5) – This will be applicable for all h5 heading. Choose font family and adjust the font size, line height & letter spacing.
  • Heading 6 (H6) – This will be applicable for all h6 heading. Choose font family and adjust the font size, line height & letter spacing.

typography innerpage shoplinepro

Theme Color

  • Go to Appearance > Customize > Theme options > Theme Color & Background setting.
  • Theme Color- Using theme color you can pick the color for those items whose color option is not given.
  • Background Images – You can upload bg images in your inner pages and also set the overlay color transparency.
  • Background color – You can pick the background color of inner pages.

theme color shoplinepro

All pages Setting

  • Go to Appearance > Customize > Theme options > All pages 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.
  • You can also enable the boxed layout for your site.
  • Parallax Effect – Parallax effect is given in each section for image. If you want to disable it just check the box.
  • Animation Effect- Animation effect is given for slider on homepage. If you want to disable it just check the box.
  • Hide back to top button – You can enable or disable back to top button on your site.
  • Site Loader – Disable or enable the site loader.all pages setting shopline pro

Section Ordering

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

section ordering shoplinepro

Header Setting

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

header setting shopline pro

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

Menu Setting

  • Go to WP Admin > Appearance > Customize > Header Setting > Menu Setting .
  • To setup the Menu for your site, Navigate to How to setup menu.
  • In Menu Setting you can change the following setting –
  • For FRONTPAGE HEADER –
  • Fixed Header – By checking the box you can disable or enable the fixed header in all your site pages.
  • Header Transparent – If you want to show a Transparent header in front page, just check the box.
  • For INNER PAGES HEADER –
  • Header Transparent – If you want to show a Transparent header in inner pages , just check the box.
  • Header Visibility – By checking the box your header will be hide, while scrolling the site it will be visible.
  • For ALL PAGES –
  • Centralizer Logo / Site title – By checking the box you are able to centralize your logo or site title between the menu and icons.
  • Style Last Menu Like Button – check the box and show your last added menu item as a Button.

header menu setting shopline pro

  • Style – Pick desired color for each element.

menu setting style shopline pro

  • Typography – Here you can choose desired typography for your menu with font size, line height and letter spacing.

menu setting typography shopline pro

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, Product show, Color, Image, Video, Gradient and one more option is External plugin , this will allow you to add any external slider plugin.
  • Image Slider – You can show up-to 5 slides in front page header and also manage the slider speed.
  • Product Slider – You can show Product slider in your front page. For product slider setting go to Product slider setting.
  • 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 – Nine different gradient style for your front page.

frontpage hero shoplinepro doc

  • Style – Choose overlay color or gradient. Twelve different gradient are there and you can pick color for each element too.

frontpage hero style shopline pro doc

  • Typography – Here you can choose desired typography for this section.

frontpage hero typography shopline pro doc

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.
  • Image Slider – 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 shoplinepro doc

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

innerpage hero style shoplinepro doc

Frontpage WooCommerce section

  • Go to Appearance > Customize > Frontpage WooCommerce section.

frontpage woocommerce shopline pro

Category (Slider Layout)

  • Go to Appearance > Customize > Frontpage WooCommerce section > Category (Slider Layout).
  • In category slider you can show your category with two different layouts – Slider and tile view. Always remember your category will be only display when you have uploaded the thumbnail image.
  • Create Category.
  • Navigate to Appearance > Customize panel > category slider. Choose your desired category from category section and show the category in slider.
  • Style – You can add the Style in your section.
  • Typography – Choose the Font family, change the Font size, Line height and Letter-spacing (px) of each element.

category slider layout shopline pro

Product (Slider Layout)

  • Go to Appearance > Customize > Frontpage WooCommerce section > Product (Slider Layout).
  • For adding Product slider, choose “product slider widget” from widget panel. Now add the Title, Product type (recent, Featured , random or sale). Choose the desired category and color for each element.
  • (Note; Product type – Featured Product, Recent Product & Sale Product are given. Featured Products are those products which you have set as featured ( Specific) while creating the product. Recent products are those products which you have added recently in your product section. Sale products are those which you have selected for sale.)
  • Setting – You can add heading and sub-heading and also enable or disable them.
  • Style – You can add the Style in your section.

product slider layout shopline pro

Product ( Grid Layout)

  • Go to Appearance > Customize > Frontpage WooCommerce section > Product ( Grid Layout).
  • WooCommerce plugin to display products. So make confirm that you have installed WooCommerce plugin ( https://wordpress.org/plugins/woocommerce/ ).
  • You can show your category product and recent products in a Grid layout or Boxed layout.
  • Style – You can add the Style in your section.
  • Typography – Choose the Font family, change the Font size, Line height and Letter-spacing (px) of each element.

product grid layout shopline pro

Add WooCommerce Widgets

  • Go to Appearance > Customize > Frontpage WooCommerce section > Add WooCommerce Widgets.
  • In this section, you can put unlimited WooCommerce widgets from widget panel.
  • Style – You can add Style in your section.

add Woocommerce widget shopline pro

Product Settings (Inner Pages)

  • Go to Appearance > Customize > Frontpage WooCommerce section > Product Settings (Inner Pages).
  • To create products. Navigate to Wp dashboard > Products > Add new. Here create products, fill all the fields and choose category for them.
  • You can choose four different Product Layout to show your product.
  • 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.
  • Style – Pick background color for all all WooCommerce page and for other elements too.
  • Typography – Here you can choose typography for your section.

product setting shopline pro

FYI – You can enable or disable any desired section by “Disable section” option. You will find this option in each section. Just check the box to enable or disable the section.

Frontpage Business section

  • Go to Appearance > Customize > Frontpage Business section.

frontpage business section shopline pro

Service Section

  • Go to Appearance > Customize > Frontpage Business section > Service section.
  • Show your services in service section. Go to Appearance > Customize > Service section. Add your desired icon from font awesome icon or upload an image of your service with styling.

service section shopline pro

  • Style – Pick color for your background and adjust the section padding of top and bottom.

service section style shopline pro

Ribbon Section

  • Go to Appearance > Customize > Frontpage Business section > Ribbon section.
  • Add image, video, color with svg, color in this section. You can disable or enable section, Heading and Sub Heading. You can also choose the alignment of header.

ribbon section shopline pro

  • Style – You can change Style in your section.
  • Typography – Choose the Font family, change the Font size, Line height and Letter-spacing (px) of each element.

Testimonial Section

  • Go to Appearance > Customize > Frontpage Business section > Testimonial section.
  • Testimonial section will help you to show testimonials or reviews of your client. Add heading, sub-heading and adjust the slider speed.
  • Choose testimonial widget form widget panel. Here you can add author image, author name, testimonial text, website url and link. You can add unlimited testimonials.testimonial section shopline pro
  • Style – You can change Style in your section.
  • Typography – Choose the Font family, change the Font size, Line height and Letter-spacing (px) of each element.

AboutUs Section

  • Go to Appearance > Customize > Frontpage Business section > 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.about us section shopline pro
  • Style – You can change Style in your section.
  • Typography – Choose the Font family, change the Font size, Line height and Letter-spacing (px) of each element.

Latest Blog Section

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

latest blog section shopline pro

  • Style – You can change Style in your section.
  • Typography – Choose the Font family, change the Font size, Line height and Letter-spacing (px) of each element.

Three Column Featured Section

  • Show featured images on your site. Go to Appearance > Customize > Frontpage Business section > Three Column Featured Section. Upload up to Three images with image link.

three column feature shopline pro

  • Style – You can change Style in your section along with overlay of each image.
  • Typography – Choose the Font family, change the Font size, Line height and Letter-spacing (px) of each element.

Brand Section

  • Go to Appearance > Customize > Frontpage Business section > Brand section .
  • Go to Brand section > Setting. Choose Brand widget from widget panel. Upload your brand image and link. This a brand slider you can also adjust the slider speed.

brand section shopline pro

  • Style – You can change Style in your section.
  • Typography – Choose the Font family, change the Font size, Line height and Letter-spacing (px) of each element.

Fact counter Section

  • Go to Appearance > customize > Frontpage Business section > Fact counter Section .
  • Choose the Fact counter Widget from widget panel in which you can set the title, icons, minimum and maximum value.
    fact counter section shopline pro
  • Style – You can change Style in your section.
  • Typography – Choose the Font family, change the Font size, Line height and Letter-spacing (px) of each element.

Custom Section

  • Go to Appearance > Customize > Frontpage Business section > Custom Section.
  • Custom section 1
  • Custom section 2
  • Custom section 3
  • In custom section add any desired widget from the widget panel.
  • Style – You can change Style in your section.

custom widget section shopline pro

Instagram Section

  • Go to Dashboard > Plugin > Add new > Instagram Feed .
  • 1. Navigate to Configure
  • 2. Click on the button Log in and get your access token from here with User ID. (You have to login in your Instagram account for getting the token and User Id)
  • 3. After login the Access Token and user Id will automatically appeared in the text area.
  • 4. Put this User Id and save your changes.
  • 5. You can customize the Instagram section, multiple customization options are there in the customize panel of plugin.

Instagram Feed shoplinepro doc

  • Now navigate to Appearance > Customize panel > Instagram section.
  • For displaying the feed copy and paste the [instagram-feed].
  • You can disable or enable the section. Also Drag and drop it anywhere from section ordering.
  • Adjust the top and bottom padding.

Inner Page Templates

There are Five different templates in our theme.
innerpage template shopline pro

About Us Template

  • For about us page template. Go to Dashboard > Page > Page attributes > About us page template. Now publish page and click on the browser link > customize. Now you are able to see the about us template in customize panel.

aboutus page shoplinepro

  • About service – In about service you can add services by using service widget in which you can add icons, title, description, link and color to each element. Add heading description text along with their color.

about service shopline pro

  • About Team – You can add team members in page using team widget. Just select the team widget here you can add member image, designation, link and give color to each element. You can also add heading, sub-heading with their color.

about team shopline pro

  • About Skill- Just choose the skill widget and add skill title, percentage along with the desired color. You can also add heading, sub-heading and their color too.

about skill shopline pro

FAQs Page Template

  • For FAQs Page template. Go to Dashboard > Page > Page attributes > FAQs Page template. Now publish page and click on the browser link > customize. Now you are able to see FAQs Page template in the customize panel.

faq shopliepro

  • Navigate to Customize panel. In FAQs Page template just add a FAQs widget and you are able to put question & answer in site.

faq page template shopline pro

Price Page template

  • For Price Page template. Go to Dashboard > Page > Page attributes > Price Page template. Now publish the page and click on the browser link > customize. Now you are able to see the Price Page template option in customize panel.

pricepage shoplinepro

  • In price page you can show pricing table by just selecting the price widget. you can show your items with heading, price and currency. You can also pick color in the background and for other elements from style. .

price page shopline pro

Contact Page template

  • For Contact Page template. Go to Dashboard > Page > Page attributes > Contact Page template. Now publish the page and click on the browser link > customize. Now you are able to see the Contact Page template option in customize panel.

Contact Page shoplinepro

  • In contact page you can show the Map on your site and you can add contact form using lead form builder plugin. Just add the shortcode of form and fill other fields with bg color then you are able to show a contact form on page by style.

contact page shopline pro

Page builder template

  • For Page builder template. Go to Dashboard > Page > Page attributes > Page builder template. Now publish the page and click on the browser link > customize. Now you are able to see the Page builder template option in customize panel.
  • You can create multiple pages using the page builder plugin in site. Just use the any WP builder plugin Like: SiteOrigin, Elementor, Visual Composer, Beaver Builder and many other for creating pages.

pagebuilder shopline pro doc

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.
  • Show Color with SVG design in your section. Select the radio button of Color with SVG and choose your desired design of SVG.
  • You can show background image, just select the radio button of Image, upload an image here and set the overlay transparency.

style shoplinepro doc

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

section padding shoplinepro doc

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

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.

Product Image Size

  • You can easily set the product image size. Just go to Dashboard > WooCommerce > settings.
  • Select Product tab and click on Display, Scroll down to change the parameters for the following options: Catalog image, Single Product image, Product Thumbnails.
  • Catalog image will change the size of homepage product/category images. Whereas Single product image will change the size of single/description page of product.
  • In order to re-size previously added images, you can use the extension to re-generate the thumbnails.

WooCommerce settings ‹ — WordPress
product image size

Additional CSS

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

css section

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