Step 1: Go to your Wp Dashboard > Appearance > Themes > Add New. Add Th Shop Mania zip file and Then click on the ‘Install Now’ button.
Step 2: After the installation is completed, click on the ‘Activate’ button and “Th Shop Mania” will be activated.
Step 3: After activating “Th Shop Mania” in your dashboard, Go to Th Shop Mania Options under Appearance and click on it. You’ll see Recommended options panel, install & activate all the plugins.
Step 4 : Now you can start customizing Th Shop Mania theme.
Installing Th Shop Mania Pro Plugin
Th Shop Mania Pro Plugin will add Advanced premium features and functionality to Th Shop Mania free theme.
Step 1 : Navigate to ThemeHunk homepage, You will see “Themes” menus on the top, when you hover over it you’ll see Pro Themes, click on it. In the Pro Themes page you’ll see Th Shop Mania Pro, click on View More button.
Step 2 : Th Shop Mania pro sales-page will open, Afterward, just simply hit the ‘Upgrade to Pro’ button and it will directly take you to the ‘Pricing‘ section of Th Shop Mania Pro Plugin.
Step 3: Now choose your desired plan from here and hit the button Buy Now from desired table.
Step 4 : Purchase your plugin from here, fill all the required details. Login to your member’s area. Your pro plugin has been added in your member’s area dashboard.
Step 5 : You’ll see a Th Shop Mania Pro plugin zip file in your Member’s area. Download the zip file of plugin.
Step 6 : Now, Open your WP Dashboard > Plugins > Add New > Upload the Plugin Zip file and Activate it.
Now you can customize your website using Pro features.
How to Add Search Bar in Theme.
After installing and Activating theme in your dashboard. Go to your Appearance > Th Shop Mania options > In recommended plugin you’ll see TH Advance Product Search.
Or You can Navigate to your website, On the Header you’ll see a Notice Please Install “th advance product search” Plugin. Click on it and Install & Activate Th Advanced Search plugin in your dashboard.
To set Menus in your site. First go to your Dashboard > Appearance > Menus.
Click the “Create a New Menu” button & Write a menu name on the field. Now Click the “Create Menu” button.
From the “Add menus items” you can add menu items to your menus. You can add pages, Create Custom links, categories, posts etc. Select your menu item by checking the box and Add Menu items in your Menu by Clicking on the “Add to Menu” Button.
Now you have created your Menu, you need to set it to a Menu location.
From the Menu Settings, you can display your Menu items in Header, Footer area.
You can Select Location by checking the Box of Header Above Menu, Main ( Frontpage Menu ), Sticky Header and Footer Menu ( Above Footer, Widget footer and Below footer ). Check them according to your requirement. You’ll only get Main menu in Free version.
Click “Save Menu“ button to save the changes.
Site Identity
Using this Option panel you can display Site logo or site title tagline and site icon in your website.
Logo– Upload a logo image with specific width and height.
Logo width – Set the desired logo image width.
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.
How to Customize Homepage
After setting up the homepage, Go to your site > click on Edit with Elementor. Now you can customize your website.
Header ( Pro Version )
Using Header Setting you can display and customize your Website Header. For the Main header setting, Go to Appearance > Customizer > Layout & Options > Header.
Video Tutorial for Setting up Header in your website.
Off Canvas Sidebar – You can Add Off canvas sidebar in your Header Before logo or After logo. Whenever you click on the Off canvas Sidebar icon button, it will open a side panel in your website. To setup widgets in Off canvas sidebar, just go to Widgets > Off Canvas Sidebar > add widget from the Widget panel and Publish it.
Choose Categories To Exclude – By checking the box you can Exclude ( not include ) any desired category from the Category box. You can also add the Category text.
Menu Alignment – You can choose the menu alignment left, right or center on your desktop device.
Mobile Menu Open – This option will open your mobile menu panel from left side or from the right side.
Sticky Header – This option will stick your site header on the top, whenever you scroll your website up or down it will goes with it. You can also choose two different animation effects for your sticky header.
Mobile Header ( Pro Version )
To customize the mobile header setting, Go to Appearance > Customizer > Layout & Options > Mobile Header.
Mobile Top Header Layout
You can customize 3 different types of Mobile Header layouts.
You can watch the below video to see how it works
Sidebar Setting ( Pro Version )
For the Sidebar setting, Go to Appearance > Customizer > Layout > Sidebar.
You can enable or disable the sticky sidebar from your site pages.
Video Tutorial to Customize Sidebar on your website.
The footer setting is specially used to display and customize your website footer. In footer area you can add important content and a navigation option. For this setting, Go to Appearance > Customize > Layout & Options> Footer.
Video Tutorial for Setting up Footer on your website.
Above Footer
For this setting, Go to Appearance > Customize > Layout & Options > Footer > Above Footer
It appears right above the Main Footer and allows you to show multiple elements like – social icons, menu, Text, and Widgets. You’ll get three layouts. One Column layout, Two Columns layout and Three Columns layout.
Using None Layout, you can disable Above Footer from your site.
You can also style your above footer by using options like height, bottom border and border color.
Widget Footer
For this setting, Go to Appearance > Customize > Layout & Options > Footer > Widget Footer.
Footer Widget – In Footer Widget there are eight different Footer Layout. You can add unlimited widgets in your footer by selecting the layout.
Below Footer
For this setting, Go to Appearance > Customize > Layout & Options> Footer > Below Footer. It appears below the footer widget.
You can add Copyright text in your footer area.
You’ll get Three Column layout in which Text, Widget, Menu, and Social media elements are available.
Using None Layout, you can disable the below Footer from your site.
Fixed Footer
For this setting, Go to Appearance > Customize > Layout & Options> Footer > Fixed footer.
A Fixed footer or sticky floating footer bar allows you to display your footer content to users. Whenever you scroll down or up your website it will display.
Container
For this setting, Go to Appearance > Customize > Layout & Options> Container
Site Style- You can select your website site style with Wide and, Max Width options.
Container Width- You can select the container width size.
Total Color & Background Options
For Color & Background, Go to Appearance > Customize > Color & Background. You can pick colors for every element and upload a background image.
Global Color –
For Global colors option, Go to Appearance > Customize > Global Colors.
You can change the default color all over the site using Theme Color.
You can pick color for link, link hover color, text color, title color, background color & Background image.
Header Color
For Header color option, Go to Appearance > Customize > > Total color & BG options > Header Colors.
You can pick Color for Header, Above Header, Offcanvas sidebar, Pan / Mobile Menu Color, Sticky Header, Below Header, Categroy and Main Menus elements.
Footer Color
For Footer color option, Go to Appearance > Customize > > Total color & BG options > Footer Colors.
Above Footer
You can pick the color for the Above footer background color, Text color, Link color, and Link hover color.
Widget Footer
You can pick colors for the Widget footer background color, Widget Title color, Text color, Link color, and Link hover color.
Below Footer
You can pick the color for the Below footer background color, Text color, Link color, and Link hover color.
Typography
You can add the typography on your site with multiple Google & standard fonts. Using different fonts on your site makes it a creative website.
Base Typography
For Typography, Go to Appearance > Customizer > Typography > Base Typography. Typography is the best way to show your content in a unique and attractive way. You can add multiple Google & standard fonts using typography on your site. Using different fonts on your site makes it a creative website.
Choose a Font family for the body text. Adjust the font size, line height, and letter spacing. This will be applicable to the overall site body.
You can also adjust “Text Transform” and set your body text as Capitalize, Uppercase, Lowercase, default, or none.
You can choose the “Font Weight” for your text.
Title
Choose the font of your title. This will set typography for overall site titles.
You can also customize “Text Transform” set your title as Capitalize, Uppercase, Lowercase, default, or none.
You can choose the “Font Weight” for your text.
Content
This will set the overall typography of single page from heading H1 to H6.
Heading (H1) – Applicable for for all h1 headings like page title, product title. Choose font family and adjust the font size, line height & letter spacing.
Heading (H2) – Applicable for h2 headings. Choose font family and adjust the font size, line height & letter spacing.
Heading (H3) – Applicable for h3 headings. Choose font family and adjust the font size, line height & letter spacing.
Heading 4 (H4) – Applicable for h4 headings. Choose font family and adjust the font size, line height & letter spacing.
Heading 5 (H5) – Applicable for h5 headings. Choose font family and adjust the font size, line height & letter spacing.
Heading 6 (H6) – Applicable for h6 headings. Choose font family and adjust the font size, line height & letter spacing.
Elemento Addons
This theme is integrated with Elemento addons which are useful in designing your site pages. There are Two addons integrated into the Free version. You can use the Product Simple addon and Simple post addon for designing your website.
To use these add-ons, just go to your Dashboard > Page and Click on Edit with Elementor
Elementor page editor will open, Scroll down the element or elements sidebar, here you’ll find the Elemento addons Category.
Product Simple addon
Simple post addon
Elemento Addons
This theme is integrated with Elemento addons which are useful in designing your site pages. There are 18+ addons given in Pro version. They easy-to-use elements those were designed to make your page designing easier.
To use these addons, just go to your Dashboard > Page and Click on Edit with Elementor
Elementor page editor will open, Scroll down the elementor elements sidebar, here you’ll find Elemento addons Category.
You can choose the desired element from here, and just and drop them to the section and edit them according to your need.
List of Pro Addons
Product Slider
Elemento Products
Elemento Big Products
Product Slider list
Add to Cart
Product Category
Advance Heading
Posts
Advanced Tabs
Compare Images
Content Switchers
Countdown Clock
Elemento counter
Image pointer
Testimonial lists
Image Animation
Elemento icon list
Price box
Contact form 7
Login & Registration Layouts (Pro Version)
To customize Login & Registration Layouts Navigate to Appearance > Customizer > Layout & Options > Login & Registration Layout
Here is the Video Tutorial to Customize Login & Registration Layouts on your website.
There are 4 Login & Registration Layouts that you can use to create a login page on your website. The 4 Login & Registration Layouts include- Classic Page, Standard Page, Popup Login Layout 1, and Popup Login Layout 2
Blog Page Layouts (Pro Version)
To customize Login & Registration Layouts Navigate to Appearance > Customizer > Layout & Options > Blog
Here is the Video Tutorial to Customize the Blog Page on your website.
There are 5 Types of Blog Layouts you can choose from. Layout includes-
Full Width.
Two Column.
Three Column.
Left Image.
Right Image.
Move to Top (Pro Version)
To customize Movie to Top settings Navigate to Appearance > Customizer > Layout & Options > Move to Top
You can Enable/Disable Move to the top in the settings, You can change the alignment position, Background color, icon color, and Border radius.
404 Page (Pro Version)
To customize Login & Registration Layouts Navigate to Appearance > Customizer > Layout & Options > 404 Page
Here is the Video Tutorial to Customize the 404 Page on your website.
There are 2 types of 404 pages on the Theme. One is Classic and Another is Standard.
Classic- In this layout, the content of the 404 page will be shown as the default 404 page. Although you can customize the 404 pages by adding an image, subtitle, description, and button.
Standard- In this layout, the content of the 404 page will be aligned center. Although you can customize the 404 pages by adding an image, subtitle, description, and button.
Social Icon
To customize the Social icon Navigate to Appearance > Customizer > Social icon
Here you can enter social media links to display on your website.
Preloader
To customize the Social icon Navigate to Appearance > Customizer > Preloader
Here you can enable or disable the preloader on the website. You can customize the preloader with Background Color and PreLoader Image.
Widgets
To customize Widgets Layouts Navigate to Appearance > Customizer > Widgets
You can create and modify different widgets on your website. Shop Mania comes with 11 widget options.
Video Tutorial to Customize WooCommerce pages on your website.
For WooCommerce pages. First, you have to Install WooCommerce Plugin and activate it from the Recommended plugins available in Th Shop Mania Options. If you have already done skip this.
Now Set the Shop page, Cart Page, Checkout page, and My Account Page on your site. To Know how you can easily set these pages in your site. Navigate to this Post.
For WooCommerce Setting, Navigate to Customize > WooCommerce. Here you’ll get all the Woo Setting for your Shop Products.
Product Style
To customize Product Style Navigate to Appearance > Customizer > WooCommerce > Product Style
From here you can Customize Product Image Hover Style and Sales Badefe Text-
Product Image Hover Style- Here you can change the product image hover style with, options like- Zoom, Fade Swap, Slide Swap
You can also Enable or Disable Hover on Quick View
Sale Badge Text- here you can enter your sale badge text.
Shop Page
To customize Product Style Navigate to Appearance > Customizer > WooCommerce > Shop Page
Pagination-
Here you can select different Pagination from available options- Numbered, Load More, Infinity Scroll. You can watch the below video to get an idea of how your shop page will look after different Pagination styles.
Product Layout-
Here you can change different Product Layout styles as you can see below video
Checkout Page (Pro Verison)
To customize Checkout Page Layouts Navigate to Appearance > Customizer > WooCommerce > Checkout Page
There are 3 Checkout page Layouts they are-
Standard
Vertical
Stepped
Video Tutorial to Customize Checkout on your website
You can Enable or Disable distraction-free checkout- A distraction-free checkout is one of the easiest ways to minimize cart abandonment rates, ensure a seamless checkout experience, and maximize your store’s sales
The checkout page comes with 3 Layout options- Standard, Vertical and Stepped.
Checkout Settings
To customize Checkout Page Layouts Navigate to Appearance > Customizer > WooCommerce > Checkout Settings
From here let you change the appearance of the WooCommerce checkout.
Company Name Field- Hidden, Optional, Required
Address Line 2 Field- Hidden, Optional, Required
Phone Field- Hidden, Optional, Required
Privacy Policy Page- Select the Privacy Policy Page
Terms And Conditions Page- Select a custom page
Privacy Policy- From here you can write a short Privacy Policy and after that a link for the full page.
Cart Page
To customize Checkout Page Layouts Navigate to Appearance > Customizer > WooCommerce > Cart Page
Enable Distraction Free Cart– Here you can enable or disable the distraction-free cart.
” it is to remove as much clutter and distractions through the checkout procedure – so customers can focus on completing the checkout entirely and end up buying your products.“
Enable Cross Sell Products- Here you can enable or disable cross-sell products
“Cross-selling is the process of offering customer products that are compatible with the ones they’re purchasing.”
Store Notice
To customize Store Notice Navigate to Appearance > Customizer > WooCommerce > Store Notice
You can enable or disable hinted store notice to tell your customer any important update or information. for more, you can watch the below video to get an idea about Store Notice.
Product Catalogue
To customize Product Catalogue Navigate to Appearance > Customizer > WooCommerce > Product Catalogue
Here you can customize Product Catalogue settings. You can watch the below video to get an idea about it.
Product Images
To customize the Product Images Navigate to Appearance > Customizer > WooCommerce > Product Images
Here you can customize image dimensions
Single Product Page (Pro Verison)
To customize Single Product Page Layouts Navigate to Appearance > Customizer > WooCommerce > Single Product
Product Image Gallery
There are 5 Different product image gallery layouts they are-
Grid Layout
Slider Layout
Vertical Layout
Slider with Lightbox
Vertical slider with lightbox
You can watch this video to know how it works-
Single Product Product Layout
There are 2 types of single-product page layouts.
You can watch Video to get an idea about Single Product
There are 5 Product Image Gallery styles and 2 Single Product Page Layouts you can use. They also come with lots of customizations.
Additional CSS
For adding Additional CSS Code to your site. Navigate to Appearance > Customizer > WordPress default > Additional CSS.
Now simply put your CSS code in the text area and Publish it.
