Welcome to the Shopper Pro Document Page !

These instructions will explain to you how to setup and configure all customize features in Shopper Theme.

This documentation covers the installation and the usage of this theme, so we encourage you to read through this document and keep it handy for reference. If you have any questions about your theme or need assistance with something, please feel free to contact us and our dedicated support staff will be happy to assist you.

How to install Shopper Theme ?

  1. Log into your WordPress site and open the admin dashboard.
  2. Navigate to the “Appearance” tab.
  3. Choose the “Themes” tab.
  4. Click “Add New
  5. Search for “Shopper” (Select )
  6. Click “Install
  7. Wait for it to complete, click “Activate” and you’re ready to use theme.

Plugin Requirements and Configuring

**Note: Before you start please make sure that you have installed all of these plugins:

(WooCommerceShopperProKirki Toolkit).

How to install Shopper Pro Add-on ?

  1. Firstly, you must download the add-on file “Shopper Pro” from your dashboard by login to your account.
    Member Dashboard
  2. Once you have downloaded it, you have to login to your website then go to plugin -> add new -> upload the add-on file -> activate the plugin.

Activation license of Shopper Pro:

  • Before you can activated license of the Shopper Pro add-on, you probably need a license key. So, in order to get those keys, you have to login to your account -> tab ‘License’ -> click on box keys (to show the license keys) -> copy all license keys.

  • After activated of the plugin “Shopper Pro” and copied the license keys then Go to Admin Dashboard => Shopper Pro => Settings => Tab ‘License’ => Input your license key => click Activate License.

Theme Configuring

Shopper has been created an easy option panel for user to manage their layout and styles. Below we have detail with the guide for you.

Homepage

Use this option to update Homepage’s layouts and controls.

  1. Layouts
    Use this option to choose layout of homepage.
  2. Controls
    Use this option to move (Drag & Drop) and to ON/OFF controls on Homepage for Layout.
  3. Controls Settings
    Use this option to edit title, limit number of post, and set column layout of Homepage Controls.
  4. Carousel Settings
    Use this option to enabled/disabled the carousel post slider on Homepage Controls.
  5. Hero Box
    Use this option to choose herobox layout and add a herbox items.

Header

Use this option to update Header Section of theme.

  • Header background image
    Use this option to add background image of header.
  • Background Color
    Use this option to change/select background colors of header.
  • Text Color & Link Color & Link Hover Color
    Use this option to change/select colors on text and link in header section.
  • Top Navigation
    Use this option to change/select colors of background, text & link, and hover link on top navigation section.
  • Main Navigation
    Use this option to change/select colors of background and text on main navigation section.

Footer

Use this option to update Footer Section of theme.

  • Background Color
    Use this option to change/select background colors of footer.
  • Widget Background Color
    Use this option to change/select colors Widget in footer.
  • Heading Color
    Use this option to change/select colors of Heading section in footer.
  • Text Color
    Use this option to change/select colors of text in footer.
  • Footer Widget Columns
    Use this option to select the number of column footer widget.
  • Footer Copyright
    Hide/Show and Insert custom text in footer copyright.

Blog

Use this option to update Blog’s layouts&Settings of theme.

  1. General Setting
    In General Option will allow you to manage general location on your website. Below is the option that you can manage easily.

    • Post Layouts
      • Use This Option to choose layout grid or list.
    • Excerpt Length
      • Use this option to limit the number of words to show in blog posts or archive.
    • Excerpt Ending Text
      • Custom your own Ending Text when after excerpted.
    • Meta Info (Checked what you want to hide):
      • Date
      • Author
      • Categories
      • Tags
      • Comment count
    • Pagination Styles

      • Use this option to custom pagination styles (Numeral, Older/Newer, Load More, and Auto Infinite Scroll).
    • Back to top
      • Use this option to enabled/disabled the back to top button.

  2. Single Setting
    Use this option to customize in single post such as:

    • Post Navigation (Enabled/Disabled)
    • Author Bio (Enabled/Disabled)
    • Comment
      • Highlight Author Comment
      • Hide Date Comment
    • Related Posts
      • Enabled/disabled
      • Set number of related post
      • Select Related Post Taxonomy
      • Select Related Post Layout
  3. Layout
    • General layout of sidebar (Left/Right/None Sidebar)
    • Thumbnail Position (Left/Right/Top of content)

Shop

In Shop Option will allow you to manage Product’s layouts, Product’s Categories, and Add to cart&Checkout section. Below is the options that you can manage easily.

  1. Category Page
    • Category Layout
      • Layout: Select sidebar layout of category page.
      • Product Display: Select products display style.
      • Product Per Page: Set number of products per page.
      • Product Per Row: Set number of products per row.
    • Header/Footer
      • Show Category Title: Hide/Show title of the categories.
      • Show Product Filter: Hide/Show product filter by sorting.
      • Product Pagination: Hide/Show pagination of the produts
      • Navigation Position: Set position of the pagination navigation.
  2. Product Page
    • Gallery
      • Product Image Style: Select layout of product’s detail page.
    • Product Summary
      • Text Align: Set align text of product summary.
      •  Show Meta/Category: Hide/Show meta category and tag.
      • Show Share Icons: Hide/Show share icons.
    • Add to cart button
      • Layout: Select layout of add to cart button.
      • Color: Select color of background, text, and hover on button.
      • Style: Select style border and outline of button.
      • Add to cart label: Set the text of button.
  3. Cart and Checkout
    • Cart/ Checkout Layout
      • Set layout of the cart and checkout.
    • Cart
      • Cart Sidebar Content: Add content in the cart total.
      • After Cart Content: Add content at the bottom of the cart page.
    • Checkout
      • Checkout sidebar content: Add content on sidebar of the checkout page.

Background

In Background Option will allow you to manage the background image and background color.

  1. Background Image
    • Set image to the background of the website.
  2. Background Color
    • Select color to the background of the website.

Color

In Color Option will allow you to manage the color of heading, link and text of the website.

  1. Heading color
    • Set color to each heading of website.
  2. Text Color
    • Set color to the text of website
  3. Link / accent color
    • Set color to the link of website

Buttons

In Button Option will allow you to manage the button of the website.

  1. Background color
    • Set color to background of the button.
  2. Text color
    • Set color to text on button.
  3. Alternate button background color
  4. Alternate button text color

Sharer

In Sharer Option will allow you to manage the Social Share.

  1. Enable Social
    • Hide/Show the social share.
  2. Twitter Username
    • Add twitter username account profile – Your@username will be added to share-tweets of your posts (optional).
  3. Social Sharing Button Positions
    • Set position of the share button
  4. Check to Enable Social Buttons
    • Checked the type of social media to include in share button.
  5. Select Theme
    • Select theme style of the share button
  6. Social Sharer Style
    • Select style of border and outline of the button.
  7. Show Count
    • Hide/Show count on share button.
  8. Popup Window
    • Select type of target button to open share in new window.
  9. Show Label
    • Hide/Show label of the social share button.

Typography

In Typography Option will allow you to manage the fonts, font size, and line-height on body and header.