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.
Watch this video guide
Installing Th Shop Mania Pro Plugin
Th Shop Mania Pro Plugin will add Advanced premium features and functionality to Shop Mania free theme.
Now choose your desired plan from here and hit the button Buy Now from the desired table.
Step 4 : Purchase your plugin from here, and fill in 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 WordPress Dashboard > Plugins > Add New > Upload the Plugin Zip file and Activate it.
Now you can customize your website using Pro features.
Activate the License Key in Shop Mania
To Activate the License key for your Shop Mania Theme go to your WordPress Dashboard > ShopManiaOptions > Click on License. From here you can Enter or Find your license key.
Video Tutorial for activating Licesne Key
How to Update Shop Mania Pro
When your theme is not updated, you can update it from the dashboard. Let’s see the complete procedure of updating the theme.
Open your website dashboard.
Go to Appearance and click on Starter Templates.
On this page, you will find an update message, where you can see the latest version of the theme. Click on Update, and then on Update Now.
Your theme will be updated to the latest version.
You can watch the video below.
Renew License
If it is showing an error on the update page, like below.
It means your license has expired. You need to renew the license to use Shop Mania further. Click on this link to renew the license.
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.
Follow this video and learn to import demo data and pre-made website templates of Shop Mania theme.
How to Setup Menus
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.
Transparent Header
Transparent Header, as the name says, is a see-through header, where users can see what is underneath the header.
Let’s see how you can add a transparent header to your website.
Open your WordPress dashboard
Go to Appearance > Customizer > Layout & Options
Click on Transparent Header
Enable the Transparent Header with the first box. You can check the second box too if you want to disable the transparent header for inner pages, which means the transparent header will not be shown on pages other than the Home page.
And done, below is how your transparent will look.
Glass or Blur Effect Header
If you have ever seen such a header, you must be aware of how professional it looks. When you enable the glass header, the header and background are slightly visible when users scroll through the website.
Let’s see the complete procedure to enable this header.
Go to Layout & Options > Header > Main Header > Settings
Enable the Sticky Header Pro button
You can also change the background color from Total Color & BG Options > Header > Sticky Header. Here, you can change the background color, blur radius, and background image.
This is how it will look.
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
Bottom Sticky Header
To enable the Bottom Sticky Header on your site.
Open your WordPress Dashboard
Go to Appearance and click on Customize
Click on Layout & Options and click on Mobile Header
Check the button that says Enable Bottom Sticky Header
The file below is a preview of Bottom Sticky Header.
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.
Move To Top
Move to Top feature is a must to make a professional website. It looks cool and enables users to move to the top with one click, so they don’t have to scroll too much.
Let’s see how you can add a Move to Top button on your site.
Open your WordPress Dashboard
Go to Appearance and click on Customize
Navigate to Layout & Options > Move To Top
Enable the button and click on the Publish button to save changes
You get an appealing animation that shows how much the website you scrolled.
The footer setting is specially used to display and customize your website’s 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 Blog Page 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.
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 the 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.
Variation Gallery Images
To add the Variation Gallery Images, open the product in the dashboard and follow the steps shown in the gif below.
Scroll down to Product Data and select the product as Variable Product.
Now, click on Variations.
Click on the variation in which you want to add the variation gallery images.
Click on Add Variation Gallery Images and upload the gallery images.
That’s it. The Variation Gallery Images are set for the selected product. You can see the result below.
TH Bought Together
To show the related product on a page. Follow these steps
Open the product in the Dashboard
Scroll down to the Product Data area and click on TH Bought Together
In the Choose Product select the products you want to show in the Bought Together area
If you tick the Choose Default Product option, the products on the product page will be selected by default. If this is disabled, then users have to select the product manually as shown below.
That’s it. Save the changes. The Bought Together products are added.
Product Countdown
To add the Product Countdown to the product, follow the steps.
Open the Product in the Dashboard
Scroll down to the Product Data area and click on Product Countdown
Enable – Enable this button to start the countdown
Countdown Dates – Set the date for the beginning and end of the sale
Discounted Products – Enter the number of the products on sale
Already Sold Products – Enter the quantity of the products that have already been sold (in the image below, 500 products are on discount and 450 have been sold, which means only 50 products are left)
After all, publish the product to save changes
That’s it, the countdown is added to the product. Below is the preview of the product
Marquee
To add the Marquee to your site, follow the steps written below
Open the page and edit it with Elementor.
In the left sidebar, search for the Marquee widget or scroll down to Elemento Addons
Drag the widget and drop it on the location.
Once the widget is dropped, its settings will appear on the sidebar.
You will see Items. When you click on any item, you will see additional options to add content to it.
To add an Image to any of its items, click on the image section and upload the image.
Once the image is uploaded, it will show in the Marquee. Likewise, you can change the color of the title and button.
To change the text of the title and button, and to add a link in the button, click on the Content section beside Slide.
With the settings given, you can adjust the alignment of the slides
Slider Style – There are two layouts of the Slider Style, you can select whichever you like
Slider Direction – You can select the direction of the slider, whether you want to run it from left to right or right-to-left
Speed – Control the speed of the slider
On Hover Opacity – When hovered, a layout appears on the slide, control its opacity from here
If you want to stylize the widget with colors and other measures, go to Styles, which you will find at the top of the widget.
Here you can change the background and color it. And so many options given to style it, like border radius, width, padding, margin, etc. The Marquee always keeps moving; you can stop it on hovering cursor by the button given in the Style section.
You can even stylize the Title and Button individually.
And below is a preview of the Marquee
Swipe Slider
To add the Swipe Slider, open the page and edit with Elementor
At the top of the sidebar, search for the widget or find the Elemento Addons
Drag the Swipe Slider and drop it on the location where you want to add it
Once dropped, its settings will appear in the sidebar
In settings, you can see items. 1 item refers to 1 slide. Here you can add an image and give colors to the title, description, and button
To change the text of these things, click on the content beside the Slide in the Item
You can change the text for the title, description, and button, and provide the link for the button
To increase the number of slides, click on the Add Item button provided at the end of the items
With these lines, you can make changes in the width and gap of the content and slides
When you go a little down, you will find the content sorting section
Here you can sort the different elements of the slide
Down the Content Sorting, you will find the Slider Navigation
You can change the icon of the navigation. You can choose from the icon library or upload your also
Now let’s see how you can style the Swipe slider to make it look better
At the top of the sidebar, click on Styles
Here you can color the background of various things.
And below is the preview
Sticky Content Scroll
Let’s see how to add Sticky Content Scroll to a website. But before this, you need to create Elementor templates for the content.
I have created 4 templates for two slides, each slide has 1 image and 1 its description
To add Sticky Content Scroll, open the page and edit it with Elementor
Search for the Sticky Content Scroll or go to Elemento Addons
Drag the widget and drop it on the location
Having dropped the widget, its settings will appear in the sidebar
Here you can adjust the width of the content. You can select from the options whether you want to keep which side sticky. For mobile devices, settings are given too.
To add content, click on the Add Item button
This will create the Item. Add the left and right templates You can add two templates to each Item (as shown in image 3)
After creating the Item, click on Select Elementor Left Template and choose the template you created in Elementor. Do the same for the right template (as shown in image 3 above, I selected both templates of Blazer).
If you want to create the next item, click on the Add Item button or duplicate the Item with the button given on the right side of the Item. Then select the template for the other slide.
Below is the preview of the Sticky Content Scroll.
Sticky Cart Container
Let’s see how can you add the Sticky Card Container to your site Remember you need to create the Elementor templates before you add the Sticky Card Container
To add the Sticky Cart Container to your website open your site, and edit with Elementor.
Search for the Sticky Card Container or go to Elemento Addons, drag the Sticky Card Container widget and drop on the location where you want to place it.
Once you drop the widget, its settings will appear in the sidebar.
Click on the Item #1 to expand it
One Item shows one container
There is an option says Select Elementor Template click on the box in front of it and select the Elementor template, you want to show here
Line below template option is given to adjust the top margin
When you select a template, it will show on the page
Likewise, copy the container or click on Add New to add another container
For layout settings, click on Layout
When you enable the Enable Sticky button, all cards will scroll over previous one then after last card all cards will be scrolled.
Additionaly, you can adjust the offset and minimum height with below options
This is how you can add the Sticky Card Container to your site.
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
