1.File Includes

Created: 05/09/2015
Latest update: 05/09/2015
By: ThimPress
Email: [email protected]
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this documentation, please feel free to request support at our Support Forum. Thanks so much!

All you need to install our theme is the zip file thimpress_adot_unzipme.zip.

2.Installation

2.1.Download Theme

Get the Theme installation package from your account download page and save it to your desktop.

Since required & recommended plugins are already packed in the download file, you won’t need to go download them individually.

2.2.Upload Theme

You can upload the Theme file in two ways:

I. Via WordPress – Log into your WordPress site.

upload-adot-theme

II. Uploading Via Filezilla

(SKIP THIS STEP if you have already successfully uploaded the theme via WordPress) – Now you will learn how to upload your files using the Filezilla client.

upload-adot-theme

2.3.System Requires

It is recommended using those limits to a minimum as follows in order for free-trouble while installing demo or saving customize.

max_execution_time 3000
memory_limit 256M
post_max_size 64M
upload_max_filesize 64M

Please see more instruction here.

2.4.Install Theme

For uploading Theme with WordPress uploader:

 Wait for the notice below to appear and then click the link “Activate”.
17

For uploading Theme with FTP tool:

1. Open the WordPress Dashboard.

2. Go to Appearance > Themes.

3. Click activate Theme.

2.5.Install Required Plugin

A notice will appear asking you to install some required plugins after Active Theme.

1. Click on the “Begin installing plugins” link.

image_13

 

 

 

 

2. Click on the box beside the “Plugin” label to select all plugins in the list, choose “Install” from the drop-down list at the top and then click “Apply”.

39

When the notice “All installations have been completed” appears, click on Return to Required Plugins Installer link under it to turn back to the plugin list.

3. Click on the box beside the “Plugin” label to select all plugins in the list, choose “Activate” from the drop-down list at the top and then click “Apply”.

42

The installing process status will be shown in your browser. It may take a few minutes, so please be patient.

After completing the activation and no bug occurred, you will see the status of all plugins is activated.

2.6.Import Demo Data

I. The first way: Importing by one click

This is a priority to use for importing fully demo content.

1. Click <<Import Data Demo>> buttons on backend:

image_39

2. Access the “Data Demo” tab and find the “Import Data Demo” section.

image_7

The progressing will display on import status bars so you will know when it is finished and your data is ready.

image_9

II. The second way is recommended to use if you have any trouble with the first way.

1. Import .xml file:

18

2. Set Up Front Page:

– Go to Setting >> Reading.
– select a static page (select below) >> Choose Front page is Home page.

3. Import Widget:

– Install and Active Widget Importer Plugin.
– Go to Tool >> Widget Setting Imports >> Select a file >> Choose file themes\adot\inc\admin\data\widget\widget_data.json >> Click on “Show Widget Settings” >> Select all active widget >> Click on “Import Widget Setting“.

4. Import Setting:

Go to Appearance >> Customize >> Import/ Export Setting >> Import Setting >> choose file theme/inc/admin/data/setting.js >> click “Save & Publish” button.

5. Configure Menu:

Go to Appearance >> Menu >> select “Main Menu” >> choose “Primary Menu” >> click “Save Menu“.

NOTES: IMPORT DEMO DATA WILL NOT INCLUDE IMAGES FROM OUR DEMO SITE. ALL IMAGES WILL BE REPLACED BY SAMPLE IMAGES.

3.Configuration

3.1.Customize

Customize

By clicking on the “Customize” menu under “Appearance”, you’ll be able to change all specific template settings.

image_46

There will appear:

1

Please note that, after configuring something in customize, you need to click blue button <<Save & Publish>> to apply changes.

1. Logo:

This is the section for you to set a Logo as your website identity. You can upload this Logo on your server, or just paste an URL into the Logo box.

image_22

The Logo will be displayed like this on your Header and will be sticky with menu when scrolling down your site:

adot-logo

The size of your Logo Section on the Header Menu could be set with the Width Logo option. Since the layout is built using the Bootstrap Grid system for a responsive design, the width of your Header Menu is also divided into 12 sections. We recommend using value 2 or 3 (corresponding with 16.67% or 25%) to the menu will be shown in a line. You can set logo size as you want then your site will automatically thumbnail size depending on the value of “logo width” to logo displayed balance with the menu.

Favicon:

Similarly, the image indicated by the Favicon box will be your site logo favicon, which will appear on the status bar of the browser.

image_77

The favicon should be in one of the following formats: .ico, .png, .gif. Usually, we should use .ico.

It will be shown in frontend:

3

2. Header Options:

4

 

  • Drawer
adot-drawer

There are options to control Drawer that can be used to insert widgets at the top of your page. Note that you need to Add a Widget to show Drawer. The guideline to Add a Widget will be expressed in the Widget Section below.

– You can choose to Show or Hide Drawer.
– Or select a Drawer Background color.
– Drawer Text Color: The text color in Drawer.
– Drawer columns: Select the number of columns in Drawer.
– Currently, there are 2 styles of Drawer Style for you to choose.

  • Offcanvas Sidebar

Note that you need to Add a Widget to show Offcanvas Sidebar. The guideline to Add a Widget will be expressed in the Widget Section below.

adot-offcanvas-sidebar

There are options help control every element on Offcanvas Sidebar:

– Show or hide: Choose to show or hide Offcanvas Sidebar.
– Background color: Select Background Color for Offcanvas Sidebar.
– Text color: Text Color in offcanvas Sidebar.
– Link color: Color for link on offcanvas Sidebar.

  • Header Layout

7

– Select a Layout: there are 3 options to elect layout for header.

– Header Position: there are 3 options is Default, After Slider, Overlay.

– Header Background color: select color for Header Background.

– Header Text color: select color for Header Text.

– Header Text Hover Color: select color for text header when hover mouse on.

– Color Border Header: select color for Border Header.

  • Main Menu

8

– Border Color active: select color for main menu when active a menu item.

– Font Size: select font size for text menu.

adot-main-menu
  • Sticky Menu

9

– Sticky Header Height: adjust Header height when Menu on scroll.

  • Mobile Menu

11

This option allows you to configure to see main menu on mobile.

  • Sub Menu

12

To configure for Sub Menu such as Backgound colorText colorText color hover.

Sub Menu is already configured and will be shown in frontend as below:

adot-sub-menu

3. Footer Options

As the name indicated, it is the section to control the Footer part of your site.

image_16

  • Footer:

14

– Background Footer Color: Select Background color for Footer.

– Text Footer Color: Select color for text footer.

15

  • Copyright Options

16

– Background Copyright Color: select color for background copyright.

– Text Color: Select color for text in copyright.

– Copyright Text: allow you to input content for the tagline in your footer.

17

 

 4. Styling Options

  •  Layout Section Option:

Select a layout: choose to display your site in full width, or in a boxed zone.

  • Patterns Section Option:

image_57

– Background Pattern: checking the box under this option title and you will be able to select one of ours.

– Upload Background: select background to upload to use as your Background Pattern.

– Background Repeat: to repeat the image in your background.

– Background Position: to set the starting position of a background image.

– Background Attachment: to set whether a background image is fixed/scroll/local/ initial or inherit with the rest of the page.

– Background Size: to specify the size of the background images.

  • Background Color and Text Color

18

– Body Background Color: This option should only be used with the Boxed Layout. You can select a solid color for the background of your page.

– Theme Primary Color:

Each of our themes will have one major color called “Theme primary color”. The elements of the primary color are included with: Hover Icon color of “Search”, “Account”, “Wishlist” “Cart”; Hover Background Product color; Hover social link color, Hover Custom Menu color… If you configure any color, it also will be applied similarly to these elements.

– Theme Second Color:

This is the color of Background “Add to cart” button, Heading Title of “Posts Display”,… Theme second color will be shown to above elements if you configure it.

– Text Second Color: This is the text color of MailChimp Content, Custom Menu, …

5. Display

19

  • Front Page:

20

 Select layout default:

This is the place for you to select an alignment for your frontpages, which is the first display page on your site. You can choose whether or not to use the sidebar, as well as positioning it in a layout with 1 or 2 columns.

image_14

1 – No sidebar at all
2 – One sidebar, located on the left
3 – One sidebar, located on the right

– Show/ Hide Breadcrumb or Tittle: select show or hide title or breadcrumbs.

– Top Image: upload Top Image for the front page.

– 

– Text Color Heading: text color heading in Frontpage.

– Number Category: enter the number categories shown on heading of front page.

– Select Style Default: there are 5 default styles for displaying of the front page.

– Select Columns: This configuration just works for masonry layout, select the number columns displayed on the front page.

– Custom Title: enter name of the Tittle front page. If leave a blank field, the system will automatically display the name of front page.

 

  • Archive:

21

This is the place for you to select an alignment for your archive pages. You can choose whether or not to use the sidebar, as well as positioning it in a layout with 1 or 2 columns.

1 – No sidebar at all
2 – One sidebar, located on the left
3 – One sidebar, located on the right

– Show/ Hide Breadcrumb or Tittle: select show or hide title or breadcrumbs.

– Top Image: upload Top Image for archive page.

– 

– Text Color Heading: text color heading in archive page.

– Number Category: enter the number categories shown on heading of archive page.

– Select Style Default: there are 5 default styles for displaying of archive page.

– Select Columns: This configuration just works for masonry layout, select number columns displayed on archive page.

– Custom Title: enter name of the Tittle archive page. If leave a blank field, system will automatically display the name of archive page.

– Excerpt Length: the number of words of posts displayed in archive and front page.

– Show/Hide category, date, author comment, avatar, tags of posts in archive, and front page.

– Date Format: select date format for posts.

  • Post & Page:

22

This is the place for you to select an alignment for your single post and pages. You can choose whether or not to use the sidebar, as well as positioning it in a layout with 1 or 2 columns.

1 – No sidebar at all
2 – One sidebar, located on the left
3 – One sidebar, located on the right

– Show/ Hide Breadcrumb or Tittle: select show or hide title or breadcrumbs.

– Top Image: upload Top Image for single post and page.

– 

– Text Color Heading: text color heading in single post and page.

– Show/Hide category, date, author comment, avatar, tags of posts in archive and front page.

  • Page 404:

23

This is the place for you to configure pages not found. This option just works with the header position option is Overlay.

Top Image: select top image for pages 404.

Background Top Heading Color: select background heading color to display rather than top image.

  • Portfolio:

24

– Show/ Hide Breadcrumb or Tittle: select show or hide title or breadcrumbs.

– Top Image: upload Top Image for portfolio pages.

– 

– Text Color Heading: text color heading in portfolio pages.

6. WooCommerce

27

  •  Category Products

25

Here is the place for you to configure separately for Category Products.

– Archive Layout: select a layout for your shop detail page with this option.

– You can Show or Hide Breadcrumbs on the Shop page.

– Top Image: select top image for shop page.

– Background Heading color: select background heading color to display rather than top image.

– Text color Heading: select color for text heading.

– Number Category: enter the number categories shown on heading of the shop page.

  •  Product Page

26

You also can configure separately for Single Product here.

Other options for setting the single product are similarly described in the Category Product Section.

  • Setting:

28

You can do setting of other options for single product page and categories product page here.

– Column: to set number column of category product page.

– Number of Products per Page: to set the amount of single product shown on each category product page.

– Effect image: when visitors hover mouse over the product image, it will zoom out or popup.

– Show/ Hide Wishlist, Quickview in the products list.

  •  Sharing

29

This important function is used to automatically share your products on various social networks to promote your site. You can check which network should content of your website be shared on. Just un-check all options if you don’t want to share any content at all.

7. Typography:

image_10

The Typography section gives you the control to style general text on your website. You will style the common text in your posts and pages with Body Options, Tittle.

Headings Options will help you style the headings in your posts.

  •  Body Section Option:

image_8

  •  Tittle Section Option:

image_102

  •  Heading Section Option:

image_9

 8. Custom Css:

image_6

In case you want to add a new CSS class to style your shop more easily, add it in this text box. This will overwrite the theme CSS, so please be careful!

 9. Widget:

image_103

To Add “Social Links” Widget for one “Copyright” Widget Area:

adot-copyright

You also follow as above to add any widget or just Drag & Drop a Widget into a Widget Area.

10. Static Front Page:

This is place that you can set a static front page.

30

– Front page: select front page as you want.

– Posts page: select blog page as you want.

11. Import/ Export Settings:

To configure options under the Customize section.

If you want to have a new site with similar settings as your created site. Use this function to export a file js in created site and import this file js into the new site.

3.2.WooCommerce Settings

Inside this panel you will find all core WooCommerce settings such as: catalog settings, pages, payment gateways, shipping methods and tax rates which are accessible via the tabs at the top of the screen.

To configure your shop go to “WooCommerce > Settings”, then browse through the tabs below to get more information on the WooCommerce Options and then click Save changes.

adot-woo

For more details, please follow the official docs.

Product Thumbnail Settings

The Product thumbnail size is decided by Product Image settings in WooCommerce. To customize, open WooCommerce Settings menu, then switch to the “Products” >> “Display” >>  “Product Image Sizes

32
If you change these options after the images are set for your product, please re-generate your thumbnails to match the new settings by accessing the Tools >> Regen. Thumbnails menu and click on the <<Regenerate All Thumbnails>> button.

Product Sales Countdown

You would also need to open the Product Sales Countdown tab and configure the settings there with values in the screenshot below.

adot-woo-3

Wishlist Settings

Go to YIT plugins >> Wishlist. Settings in Wishlist tab should also be configured with the following values.

adot-woo-4

4.Set up menu

1. Go to Appearance >> Menu

image_96

2. Select a menu to edit or click create a new menu.

Note: when you import our demo content, it will automatically create the Main menu for you, so select “Main Menu” if you want to have the same menu as in preview.

3. Select pages or categories or links… from the left meta box and click Add to Menu

adot-setup-menu-2

n the right, feel free to drag and drop menu items to organize them.

4. Check Primary Menu for theme locations at the bottom of the page.

5. Click the “save menu” button.

5.Set up Blog page

1. Create a Blog page

  • Go to Pages >> Add New page.
adot-setup-blog-page
  • Setting Blog page

Go to Setting >> Reading

adot-blog-page-2

2. Add new Category and Tags

  • To add new category for a blog, come to Posts > Categories and fill in fields then click Add New Category, there will appear:
adot-blog-page-3
  • To Add New Tag, come to Posts > Tags and fill in the fields then click Add New Tag:
adot-blog-page-4

3. Create Menu for Blog page:

adot-blog-page-5

6.Set up header

6.1.Header Style 1

To configure this style header,  please do follow our instruction below:

1. Go to Appearance ->> Widget and configure as our guide:

menuright

2.  Go to Appearance ->> Customize ->> Header ->> Header Layout :

In this, there are two options for you :

  • If you choose Header style 1 and choose Header Position is Overlay :

header1_overlay

It will be displayed on your site as below. You can see Home 1-> Home 4  has this style header in our demo.

5-11-2015 9-22-40 AM

 

  • If you choose Header style 1 and choose Header Position is Default:

header1_default

You can see Home 5 & Home 6  has this style header in our demo. It will be displayed as below:

01_home_v5

6.2.Header Style 2

To configure this style header,  please do follow our instruction below:

1. Go to Appearance ->> Widget and configure as our guide:

menuright

2.  Go to Appearance ->> Customize ->> Header ->> Header Layout :

header22

2. Go to Appearance ->> Customize ->> Styling  ->>  Layout and choose layout  is ” Boxed”  as below:

boxed

 

You can see Home 8  has this style header in our demo. It will be displayed as below:

01_home_v8

6.3.Header Style 3

To configure this style header,  please do follow our instruction below:

1. Go to Appearance ->> Widget and configure as our guide:

header33

 

2.  Go to Appearance ->> Customize ->> Header ->> Header Layout :

header3

It will be displayed on your site as below.  You can see Home 7  has this style header in our demo.

01_home_v7

8.Set Up Home Page

8.1.Set Up Home Page 3

Homepage 3

8.2.Set Up Home Page 2

Hompage 2

8.3.Set Up Home Page 4

Home 4

8.4.Set Up Home Page 5

Home 5

8.5.Set Up Home Page 6

home 6

9.Element in Adot

Since Adot theme uses Siteorigin to create its visual page builder, you won’t have to go through fuzzy widget to build your pages with it. You can take full control over your WordPress site and build any layout.

9.1.Site Origin

Siteorigin is the fantastic plugin, that adds a drag & drop page builder to your WordPress theme. It gives you the tools you need to be able to create complex page layouts without touching a single line of code. Read more at here

When editing a widget, on the right of the interface always shows a Widget Styles column consisting of Attributes, Layout, Design to help you configure for this widget.

adot

When editing a widget, on the right of the interface always shows a Widget Styles column consisting of AttributesLayoutDesign to help you configure for this widget.

widget1

Widget Class: a CSS class.

CSS Styles: CSS Styles, given as one per row.

Padding: Padding around the entire row.

Background Color: select Background color of the row.

Background Image: select Background image of the row.

Background Image Display: how the background image is displayed.

Border Color: Border color of the row.

Font Color: Color of text inside this widget.

9.2.Widgets Built By ThimPress

Asides from the default elements that Siteorigin provides, we also offer some special elements that are designed especially for WordPress shops built with Thimpress.

1. Thim: Banner Text

bannertext

 

2. Thim: Product Slider

productslider

 

3. Thim Product

thimprroduct

4. Thim : Posts Display

displayproduct

 

5. Thim: Slider

thimslider

 

6. Thim: Empty Space

emty

 

7. Thim: Collection

thimcollection

 

8. Thim: Single Images

singeimage

9. Thim : Tab

tab

Show by: There are many options to show them.

tab2

Order by :

tab3

10. Thim: Icon box

iconbox

10.Pages

10.1.About Us

about us

10.2.About Shop

about shop

10.3.Contact

1. Create contact form

contact form

2. Contact page

contact page

11.WooCommerce Product

Adding a product

Adding a simple product is a straight forward process that is not very different from publishing a standard WordPress post. In the Products menu click “Add Product”, you will be presented with a familiar interface, and should immediately see where to type the product title and full description.

woo-adding a product

Next is setting the Product Data tab. This is where the majority of the product data is input.

woo product data

 

  1. SKU – stock keep unit, used to track products. It must be unique for each product, and should be named so it does not clash with post ID’s.
  2. Price:
  • Regular Price – The item’s main price.
  • Sale Price – The item’s sale price. When adding a Sale Price, a “Sale” icon will automatically appear on your product image.

3. Product New and Product Hot: You can choose product category that are dispalyed.

For more details, please follow the official docs.

 Product Variations

Variable products are a great feature of WooCommerce for offering variations of your product with different prices, stock and more. They can be used to offer variations of a product, for example different sizes for a type of T-shirt. You can set different properties and prices for each variation.
Set the product type: to add a variable product, first select the type ‘variable’ from the product type drop-down. The interface will change to reflect your selection.
2-27-2015-4-08-16-PM
Define variation attributes: on the attributes tab add some attributes to your product. You can use global attributes or define some custom ones specific for your product.
woo-add variation
Add variations:Add variations: After saving your product you can now begin to add variations, or link all possible variations. To add a variation, click the ‘add variation’ button. A new blank row will appear for your inputting of data.
woo-add variation
Price fields must be set per product
For more details, please follow the official docs.

Adding Product Galleries

Product galleries simply display all images attached to a product, with the Featured Image to be the primary image.
You can create a product gallery using the same method as adding a featured image, rather than using the Product Gallery meta box instead.
featured image product
Product thumbnails are the gallery thumbnails on your product details page (if you have a gallery).
Uploaded images will be resized to match your input value as accurately as possible. For example, if your setting is 100×100 and you upload a 300×600 image, it will be resized to 100×200.

Set Featured Products

To set a product as Featured, go to the product list at Dashboard>Products>Products and tick the star in the product line.
set feature image
For more details, please follow the official docs.
On the Catelog tabWP Dashboard >> WooCommerce >> Settings >> Products >> Product Image Sizes >> Catelog Images, of the WooCommerce settings you’ll see three image dimension inputs.
Please remember that if you change these settings after uploading product images you will need to regenerate your thumbnails within WordPress for the changes to be applied to your current image. To do this we recommend using the Regenerate Thumbnails plugin.
Now that WooCommerce has been successfully installed and setup, you can start building the view of your shop and other components of the site.

12.Extra information

Thanks a lot for your kind attention to our documentation. Hopefully, our theme is working well to satisfy you and your customers. If you need further guidelines, please read Knowledge Base or create a topic here to us for assistance within 24 hours.

Suggest Edit