Almaira Pro

Installing Theme

  • First, download the Almaira 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 Almaira 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.

YITH WooCommerce Compare

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.

    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.
  • You can put below id’s for section scrolling menu.
    • Slider Settings –  #th-slider
    • Product Filter – #th-product-filter
    • Ribbon section – #th-ribbon
    • Categories – #th-categories
    • Home Page- #th-home-shop
    • Instagram section – #th-instagram
    • Brands – #th-brand
    • Highlights – #th-highlights
    • Custom section 1 – #th-custome-1
    • Custom section 2 – #th-custome-2
    • Custom section 3 – #th-custome-3
    • Custom section 4 – #th-custome-4
    • Go to WP Dashboard > Appearance. For showing your menu in front page header on your site. Navigate to Menus > Create menu > Menu Settings.
    • Select “Main menu” as a Theme Location for Section Menus. Display Menu on front page header.

    Above Header Menu

    • Go to WP Dashboard > Appearance. For showing your menu in above header on your site. Navigate to Menus > Create menu > Menu Settings.
    • Select “Header above menu” as a Theme Location for Section Menus. Display Menu on Above Header.
    • For showing your menu on footer. Navigate to Menus > Create menu > Menu Settings.
    • Select “Footer Menu” as a Theme Location for Section Menus. Display Menu on Footer section.

How to import Demo ?

  • For importing demo of Almaira, Go to Dashboard > Appearance > Almaira shop options .
  • In Almaira shop options panel, Install & activate “One Click Demo Import” plugin.
  • Now you’ll see a option of Import demo data in your panel. Click on “See library”.

  • You’ll see a option of Import demo data in your appearance sidebar. Click on the button “Import demo data“. Wait for few minutes Your demo will import successfully.

WordPress Default Setting

Site Identity

  • To display Site logo or site title tagline and site icon on your site.
  • Dashboard > Appearance > Customize > WordPress Default > 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.

Background

  • Go to Dashboard > Appearance > Customize > WordPress Default > Background . Using this option you can display image in background or you can pick color for your site background.

Setup 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 > WordPress Default > Homepage Settings. In homepage settings. Select the radio button of “A static page” and choose your homepage which you have created as front page.

Layout

Container Settings

  • For Container setting, Go to Appearance > Customizer > Layout > Container.
  • In container your overall site content will appear. You can manage your overall container by doing the below settings.
  • Container layout 1 – With Container layout 1, the main body goes with the edge to edge of the browser whereas the content is managed by the container width.
  • Container Width – You can manage the container width of content & sidebar by scrolling the slider. The Minimum container width is 768 px and Maximum container width is 1920 px.
  • Container layout 2 – With Container layout 2, the main body is set to a certain width which includes the content, header & footer whereas the container max width can be managed.
  • Top/Bottom Margin – You can control the Top/Bottom Margin of your site using this option.

Header

  • For header setting, Go to Appearance > Customizer > Layout > Header.
  • Above Header

  • It appears right above the Main header and allows you to show multiple elements. You’ll get one layout. In this layout column you can show elements like social icons, menu, search, Text, Widgets. Here styling can be done using the height, bottom border and border color.
  • Main Header

  • In main header your logo and main navigation will be displayed along with Menu.
  • To show navigation menu in your “header” first set the menus from the dashboard. Go with this link. With Main header setting, you can modify your overall header by adding layout with other content.
  • Last Menu Item – You can show search icon, social media profile, text, button or widgets as the last menu item.
  • Bottom Border size – This will add a separation between Main header and Below Header. You can adjust the width by increasing or decreasing the scroll bar or enter the value in text box.
  • Bottom Border Color – Pick desired color for your “main header” border. It will only appear when you add a border in your header.
  • Mobile Menu Open – Choose the Mobile menu alignment left. right or center.
  • Enable Search – This will show your Search icon in your header.
  • Enable Wishlist, Account and Cart – This will show Wishlist, Account and Cart icon on your Header.
  • For sticky header, Go to Customize > Layout > Header > Sticky header. The sticky header will be fixed in the top of your site when you scroll the page. You can easily access the menu from any part of the site. Slide and Fade Animation effect is provided to show your sticky header.
  • Stick Main Header – This option will enable Sticky Header in your Main header. For enabling this option, check the box.

Transparent Header

  • Transparent Header will simply merge your main header and content. Check the box and enable transparent header. This will display a transparent header on the Front Page.
  • For page header, Go to Customize > Layout > Header > Page Header . With this option you can upload Header image for Inner pages like Blog, shop, contact page.

Blog

  • For Blog setting, Go to Appearance > Customizer > Layout > Blog. In Blog page you can show collection of post grouped by category, author, date and tag etc.
  • Blog Post content – In blog post content you can show your full content, No content and Excerpt length. Excerpt length allows you to set content length you want to show in your blog page.
  • Read More Text – In read more text, put the text you want to display for your Read more button.
  • Post Pagination – It will provide you Numbered navigation, Load more and Infinite scroll for your blog page.
  • Note – Go to dashboard > Reading Settings. You’ll see this option their “Blog pages show at most”. Enter the number of posts you want to show on your blog page.

  • For this setting, Go to Appearance > Customize > Layout > Footer.
  • In footer area you can add important content and navigation option of the site. You can add Copyright in below footer (copyright area).
  • It appears right above the footer widget and allows you to show multiple elements.
  • You can show elements like social icons, menu, search, Text, Widgets in each layout column. Styling can be done using the height, bottom border and Border color.
  • In Footer Widget there are eight different Bottom Footer Layout. You can add unlimited widgets in your footer by selecting the layout.
  • In Layout 4 – Four column widget area. Widgets will occupy 25% widget area in each column. Other layouts you’ll get with Pro Version.
  • Note – You’re absolutely free to add unlimited widgets in each widget area. Just click on “Go to Widget” button and add widgets.

  • It appears Below the footer widget and allows you to show multiple elements.
  • You can show elements like social icons, menu, search, Text, Widgets in each layout column. Styling can be done using the height, bottom border and Border color.
  • It will fix your footer on the bottom of your site.

Scroll To Top

  • For Scroll to Top, Go to Appearance > Customize > Layout > Scroll To Top.
  • You can add back to top button on your site. This button will easily scroll your site to the top of the page in just one click on the button. You can also disable it by checking the box.

Slider Settings

  • For Slider setting, Go to Customizer > Frontpage > Slider settings .
  • Slider settings will allow you to add slider images in your site. Just add new slide and upload desired image, Title, subtitle, Text and link.
  • To show your slider images in Mobile view, enable the responsive slider by checking the box.
  • If you don’t want slider on your Homepage, Just check the Disable section box.
  • Color & Background Setting – Color & background option is available for each element of Slider. Just pick the color for your desired elements and also you can add Color Overlay to your slider image

Ribbon Section

  • For Ribbon Section , Go to Customizer > Frontpage > Ribbon Section .
  • In ribbon you can add Background image. Disable or enable the section whenever you want.
  • Add heading, sub heading, Button Text and button link.
  • You can add Top & Bottom Padding in this section.
  • Color & Background Setting – Color & background option is available for each element of Ribbon. Just pick the color for your desired elements and Upload background image with color overlay.

Brand Section

  • For Brand section, Go to Customizer > Frontpage > Brand section .
  • With this section you can show Brands on your site.
  • You can show Brand image and link.
  • If you don’t want this section on your Homepage, Just check the Disable section box.
  • You can add Top & Bottom Padding in this section.
  • Color & Background Setting – Color & background option is available for each element of Brands. Just pick the color for your desired elements and Upload background image with color overlay.

Categories Section

  • For Categories Section , Go to Customizer > Frontpage > Categories Section .
  • In Categories Section you can display your categories in slider, just Choose Categories To Show and display them on homepage.
  • If you don’t want this section on your Homepage, Just check the Disable section box.
  • You can add Top & Bottom Padding in this section.
  • Color & Background Setting – Color & background option is available for each element of Category. Just pick the color for your desired elements and Upload background image with color overlay.

Home Shop Setting

  • For Home Shop , Go to Customizer > Frontpage > Home Shop .
  • Here you can display your Sort by categories like New arrivals, Featured product, On sale product, Low to high and High to low product in a arranged manner.
  • You can also display the product categories and set No. of Products To Show.
  • Disable or enable the section whenever you want.
  • You can add Top & Bottom Padding in this section.
  • Color & Background Setting – Color & background option is available for each element of Home Shop. Just pick the color for your desired elements and Upload background image with color overlay.

Product Filter

  • For Product Filter, Go to Customizer > Frontpage > Product Filter .
  • With Product Filter you can filter your products by categories. This will make easy for you to show the number of products in each category on Homepage.
  • From “Choose Categories” set the category you want to show on homepage and set No. of Products To Show.
  • If you don’t want this section on your Homepage, Just check the Disable section box.
  • Note – To create category for your product. Go to Dashboard > Product > Categories > Add category.

  • You can add Top & Bottom Padding in this section.
  • Color & Background Setting – Color & background option is available for each element of product filter section. Just pick the color for your desired elements and Upload background image with color overlay.

Highlights Section

  • For Highlights section, Go to Customizer > Frontpage > Highlights Section .
  • In Highlights section you can show your services .
  • Choose Icon, color and title to show your services in front page.
  • If you don’t want this section on your Homepage, Just check the Disable section box.
  • You can add Top & Bottom Padding in this section.
  • Color & Background Setting – Color & background option is available for each element of highlight section. Just pick the color for your desired elements and Upload background image with color overlay.

Instagram Setting

  • For Instagram section, first 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]. Add heading and link.
  • You can disable or enable the section.
  • You can add Top & Bottom Padding in this section.
  • Color & Background Setting – Color & background option is available for each element of Instagram section. Just pick the color for your desired elements and Upload background image with color overlay.

Custom Section

  • For custom section, Go to Customizer > Frontpage > Custom Section .
  • There are four custom section. In each custom section you can choose desired layout and put widget in it.
  • If you don’t want this section on your Homepage, Just check the Disable section box.
  • You can add Top & Bottom Padding in this section.
  • Color & Background Setting – Color & background option is available for Background & Heading of Custom section. Just pick the color for your desired elements and Upload background image with color overlay.

Section Ordering & Section On/Off

  • For Section Ordering setting, go to Appearance > Customize > Frontpage Sections > Homepage Layout Settings > Section Ordering.
    You can Change the order of any particular section.

Color and Background

For Color & Background, Go to Appearance > Customize > Color & Background. You can pick color for every element and upload background image.

Global Color

  • For Global colors option, Go to Appearance > Customize > Global Colors.
  • Color Scheme – You can choose Dark or Light scheme for your site. Dark will make your site black in color. Whereas the light will make your site overall White.
  • 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 this option Navigate to Appearance > Customize > Color & Background > Header. You can pick color for your overall header which includes “Main Header”, “Above header”, “Page Header”, “Mobile/Pan Color”

    Above Header –

  • Background Color & Image – Pick color for your above header background or you can upload image there.
  • Above Header Menu – Pick color for link, hovered link and Hovered Background Color. These will be applied for Above header Menu item only.
  • Above Header Sub Menu – Pick color for link, hovered link and Hovered Background Color. These will be applied for Above header Sub Menu item only.
  • Above Header Content – Pick color for text, link and hovered link. These will be applied for Above Header Content only.
  • Main Header –

  • Site Title – Pick color for your site title, title Hovered Color and Tagline. To display your Site Title from Appearance > Customizer > Site Identity.
  • Background Color & Image – Pick color for your header background or you can upload image there. These will be applied for Main Header Background only.
  • Main Header Content – Pick color header text, link and hovered link. These will be applied for Main Header Content only.
  • Main Menu – In Main Menu option you can pick color for each Menu item and for menu background area. Individual Color options are given for Menu and Sub menu. These will be applied for Main menu items only.
  • Mobile/Pan Color –

  • Background Color & Image – Pick color for your Mobile/Pan background or you can upload image there.
  • Mobile/Pan Content Color – Pick color for link, hovered link and Hovered Background Color. These will be applied for Mobile/Pan content items only.

Sticky Header Color

  • You can do all the above setting for Sticky Header too. For setting up Sticky Header color, Go to Appearance > Customize > Color & Background > Sticky Header.
  • For this option Navigate to Appearance > Customize > Color & Background > Header. You can pick color for your overall Footer which includes “Footer Widget”, “Above & Below Footer”.

    Above Footer –

  • Background Color & Image – Pick color for your Above Footer background or you can upload image there.
  • Above Footer Content Color – Pick color for Text, link and hovered link. These will be applied for Above Footer content items only.
  • Footer Widget –

  • Background Color & Image – Pick color for your Footer Widget background or you can upload image there. You can choose widgets from Appearance > Customize > Layout > Footer Widget.
  • Above Footer Content Color – Pick color for Widget Title, text, link and hovered link. These will be applied for Footer Widget content items only.
  • Below Footer –

  • Background Color & Image – Pick color for your below Footer background or you can upload image there.
  • Above Footer Content Color – Pick color for Text, link and hovered link. These will be applied for below Footer content items only.
  • For this option Navigate to Appearance > Customize > Color & Background > Sidebar. From this option you can pick color for Sidebar elements of your site.
  • Widget Title Color – Pick color for title of widget, you’ll select for your sidebar.
  • Text Color – Pick color for the text of your sidebar text.
  • Link Color – Pick color of link in sidebar.
  • Link Hover Color – Pick color of hovered link in sidebar.

Product Color

  • For this option Navigate to Appearance > Customize > Color & Background > Products. From this option you can pick color for Product elements on Shop page.

Single Product Color

  • For this option Navigate to Appearance > Customize > Color & Background > Single Products color. From this option you can pick color for every single Product elements on Shop page.

Typography

Typography makes your content visually stunning. You can add typography on your site with multiple Google & standard fonts. Using different fonts on your site makes it a creative website.

Font Subsets –

Go to Appearance > Customizer > Typography > Font Subsets.
Google font families support every subset. With this option you’ll get subsets like Latin, Latin-ext, Cyrillic, Cyrillic-ext, Greek, Greek-ext, Vietnamese and Arabic. Without these special characters won’t be displayed at your site. Just check the desired subset and enable it on your site.

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 in your site. Using different fonts on your site make it a creative website.

For Typography, Go to Appearance > Customizer > Typography > Base Typography.

  • Body – Choose Font family for body text. Adjust the font size, line height and letter spacing. This will be applicable for overall sites body.
    You can also adjust “Text Transform” set your body text as Capitalize, Uppercase, Lowercase, default or none.
  • Title – Choose 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.
  • 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.

Social icon

  • For adding social profile links, Go to Appearance > Customize > Social icon.
  • You can show these social icon in the header as well as at the footer. To show social icons just put the links in the text area.
    By default it will follow the color scheme but You can also show the “original color” for each social icon.

Preloader

  • For Pre loader, Go to Appearance > Customizer > Pre Loader.
  • For enabling the loader, check on the box “Enable loader”. Preloader will be shown when you load or refresh your site. You can upload a GIF or an image as a preloader or you can pick background color instead of image.

Contact Template

  • For Contact template option, First you need to Install & activate Lead form Builder plugin then create a Contact form.
  • Create a page, Go to Dashboard > Pages > Create new page and select Contact template from Page Attributes. After that Navigate to Appearance > Customize > Contact Template.
  • In contact template, You can add elements like Big heading, small heading, Address, Mobile Number, Email and Working hours. Just add the shortcode of form which you have created using Lead form builder plugin.
  • You can also pick color & background for each element.

About us Template

  • For about us template option, Create a page, Go to Dashboard > Pages > Create new page and select About us template from Page Attributes. After that Navigate to Appearance > Customize > About us Template.
  • In about us template, You can add elements like Services content, Introduction content, testimonial content & counter content.
  • You can also pick color & background for each element.

Faq Template

  • For Faq template option, Create a page, Go to Dashboard > Pages > Create new page and select Faq template from Page Attributes. After that Navigate to Appearance > Customize > Faq Template
  • In Faq template, You can add elements like Title & Text by adding New Faq.
  • You can also pick color & background for each element.

Team Template

  • For Team template option, Create a page, Go to Dashboard > Pages > Create new page and select Team template from Page Attributes. After that Navigate to Appearance > Customize > Team Template.
  • In Team template, You can add elements like team content and No. of team member to show on your page.

WooCommerce

  • For WooCommerce setting. Go to Appearance > Customize > WooCommerce. . First Setup your WooCommerce. Go to your WP dashboard, Install WooCommerce plugin from WordPress.org and activate it.
  • To create Pages, Navigate to this Doc.

Product Style

  • In product style, add Product Image Hover Style effect as Zoom or Swap.
  • Zoom – It is a kind of basic magnify effect on your product, it will zoom out your product while hovering the mouse over it.
  • Swap – In swap condition your product gallery images will be displayed while hovering or clicking the mouse over the Product. It will exchange the product image and show other images of product which have some different look. For “Product Gallery option” Go to a single product page on the rightmost side you can set your product gallery images.
  • Enable Quick View

    By enabling quick view it will add a Quick view badge to the product image and will show a popup on its click instead of redirecting a visitor to the product single page.

  • Product Box shadow – You can highlight your product with a Shadow in the background. Set product box background shadow by just scrolling the bar or enter the value in the text box.
  • Product Box shadow on Hover – Set product box on hover shadow by just scrolling the bar or enter the value in the text box. Whenever you hover your mouse on the product it will show a shadow in the background.

Single Product Page

  • You can set up your single product. For single product, Go to Appearance > Customize > WooCommerce > Single Product Page .
  • Disable Sidebar in single product page – You can disable or enable sidebar on your single product page.
  • Product Description Tab – You can Disable or Enable the Product description tab from product single page.
  • Product Tab Layout – You can show your product short description in horizontal or vertical view in tablet & mobile devices.
  • Floating Cart

    Using this option you can directly jump to your cart. It will make your customer easy to buy any product.

  • Up Sell Product

    These are the items that your customer might prefer instead of the product currently viewed. Items which is offered as an up-sell might be more popular, have better profit margin or a higher quality. Check the box “Display upsell product”. If you check this box you can now set the Number of Column and Number of up-selling Product you want to show.

  • Related product are the items which are similar to the product your customer is viewing. Check the box “Display related product”. If you check this box you can now set the Number of Column and Number of related Product you want to show.

Distraction Free Cart page

To Enable distraction free cart page, Just go to Appearance > Customize > WooCommerce > Cart Page and Click on the check box. With this option the menu in the header and the footer of the website disappears from the cart page. You can also set the number of Cross Sell Product to show with columns.

Distraction Free Checkout page

To Enable distraction free checkout page, Just go to Appearance > Customize > WooCommerce > Checkout Page and Click on the check box. With this option the menu in the header and the footer of the website disappears from the checkout page.