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.install almaira pro

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.

How to import Demo ?

  • For more information follow this link.

Site Identity

  • For this setting, Go to Appearance > Customize > 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.

site identity almaira pro

Setup Homepage

  • For this setting, Go to Appearance > Customize > WordPress Default Setting > 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.

homepage setting almaira shop doc

  • 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.

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.

container layout almaira shop doc

Header

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

header layout almaira pro

Above Header

  • For Above 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.

above header almaira pro

Main Header

  • For Main Header setting, Go to Appearance > Customizer > Layout > Header > 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.

main header almaira pro

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.

transparent header almaira pro

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.
blog almaira pro

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.scroll to top almaira shop doc

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.

slider setting almaira pro

  • 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

slider setting color bg almaira pro

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.ribbon section almaira pro
  • 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.

color bg ribbon section almaira pro

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.

brands section almaira shop

  • 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.

brands color bg almaira pro

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.categories section almaira shop
  • 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.

categories color bg almaira pro

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.home shop almaira shop
  • 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.

home shop color bg almaira pro

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.product filter almaira pro
  • 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.

product filter color bg almaira pro

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.highlights section almaira pro
  • 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.

highlights color bg almaira pro

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.

 

instagram almaira pro

  • 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.

instagram color bg almaira pro

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.custom section almaira pro
  • 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.

custom section almaira pro color bg

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.

section ordering almaira shop

Color and Background

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

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.global color almaira pro

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”

header color almaira pro

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.

sticky header color almaira pro

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.

prodcut color almairapro

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.

single product color almaira pro

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.
font subset almaira pro

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.
base typography

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.

body typography almaira pro

  • 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.

content typography almaira pro

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.

pre loader almiara shop doc

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.

contact us template almaira pro

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.

about us template almaira pro

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.

faq template almaira pro

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.team template almaira pro

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.

woocommerce almaiar pro

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.

Product Content Alignment – You can align the whole Product content in Left, Right and Center.

product style almaira pro theme

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 – 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.

single product page almaira pro

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.
    cart page almaira pro

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.
    checkout page almaira pro