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.
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.
Demo Import
Note – “This video showing onelinepro template import process, But same will work for all ThemeHunk themes.”
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.
Main Menu
Go to WP Dashboard > Appearance. For showing your menu in inner pages on your site. Navigate to Menus > Create menu > Menu Settings.
Now select “Main Menu” as a Theme Location for Section Menus. Display Menu on inner pages header.
Footer Menu
For showing your menu on footer. Navigate to Menus > Create menu > Menu Settings.
Now select “Footer Menu” as a Theme Location for Section Menus. Display Menu on Footer section.
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.
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.
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.
Theme Options
All changes made in theme options will be applied on whole site.
Go to Appearance > Customize > Theme Options.
Inner page Typography
Go to Appearance > Customize > Theme options > Inner page Typography.
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.
Body – Choose Font family for body of site. Adjust the font size, line height and letter spacing.
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.
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.
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.
Footer setting
Go to Appearance > Customize > Theme options > Footer setting.
If you want to align your footer content in center, Check the option “Enable to align center”.
Upload a footer logo which will be shown in the footer top section.
Put a copyright text in text area.
Add social icon profile links.
Add Newsletter by using our plugin lead form builder . Just install this plugin and create an awesome newsletter subscription form for your site.
You can also show widgets in your footer. For adding widget. Navigate to Widgets option and choose your desired widgets.
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.
Style – Pick desired color for each element.
Typography – Here you can choose desired typography for your menu with font size, line height and letter spacing.
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.
Style – Choose overlay color or gradient. Twelve different gradient are there and you can pick color for each element too.
Typography – Here you can choose desired typography for this section.
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.
Style – Choose the overlay as color or gradient. different overlay designs are given.
Frontpage WooCommerce section
Go to Appearance > Customize > Frontpage WooCommerce section.
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.
Typography – Choose the Font family, change the Font size, Line height and Letter-spacing (px) of each element.
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.
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.
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.
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.
Style – Pick color for your background and adjust the section padding of top and bottom.
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.
Typography – Choose the Font family, change the Font size, Line height and Letter-spacing (px) of each element.
Banner Section
Go to Appearance > Customize > Frontpage Business section > Banner Section .
In this section you can show banner Ad. Two different layout options. In first layout you can show two banner ad images with image overlay color and links. In Second layout you can show four banner images with tile design. You can pick the hover color and link to each image.
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.
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.
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.
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.
Go to Appearance > Customize > Frontpage Business section > Newsletter section.
You can easily show newsletter on homepage of your site. Just download the Lead form builder plugin from WordPress. Create a form and put the shortcode in the text area. Now your newsletter form will show on your site and visitors will easily contact you.
Typography – Choose the Font family, change the Font size, Line height and Letter-spacing (px) of each element.
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.
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.
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.
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 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 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.
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.
Navigate to Customize panel. In FAQs Page template just add a FAQs widget and you are able to put question & answer in site.
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.
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. .
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.
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.
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.
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.
Using Section padding you can adjust the top padding and bottom padding (in px).
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.
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.
Additional CSS
To add additional CSS go to “Appearance > Customize > Additional CSS and simply put your CSS here.
For more information you can contact our support team at support forum.
🎉 Black Friday Offer: Up to 40% OFF! on All Themes & Plugins
