resca

Support Purchase

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.

Upload Theme

You can upload the Theme file in two ways:

I. Via WordPress – Log into your WordPress site.

II. Uploading Via Filezilla

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

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

Install Theme

For uploading Theme with Wordpress uploader:

For uploading Theme with FTP tool:

1. Open the WordPress Dashboard.

2. Go to Appearance > Themes.

3. Click activate Theme.

Install Required Plugin

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

1. Click on “Begin installing plugins” link.

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

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 “Plugin” label to select all plugins in the list, choose “Activate” from the drop-down list at the top and then click “Apply”.

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

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

 

Import Demo Data

I. The first way: Importing by one click

This is priority to use for importing fully demo content.

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

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

1. Import .xml file:

Where is file .xml to import?

There are 9 demo style file placed in folder adot\inc\admin\data and each style file contains “demodata.xml” file. Just click on one demo file then find file “demodata.xml” to import demo. If you choose any demo type then after importation process, your site will be styled accordingly.

Following these steps to import demo data via .xml file:

2. Set Up Front Page:

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

3. Import Revolution Slider:

The download package contains the exported slider (Revolution Slider) that can be used as your slider template. Please follow the steps below to import it.

• Go to “Revolution Slider”
• Click “Import Slider” button
• Click “Browse” >> choose file themes\zoneshop\inc\admin\data\revslider >> select one file zip revolution slider >> Click “Import Slider” button to start import the selected slider.
• Repeat the steps to import anothor revolution slider.

How to Edit a Revolution Slider When you can’t import image correctly?

You need to Edit revolution Slider.

You’re still on the main page of Revolution Slider, click Edit Slides.

Please note that these steps are to set up slider for homepage the same as in live demo. If you want to make your own slider, please follow the official Slider Revolution document.

4. 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“.

5. Import Setting:

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

6. Configure Menu:

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

This is video tutorial installation via xml file.

 

Customize

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

There will appear:

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.

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

The size of your Logo Section on Header Menu could be set with Width Logo option. Since the layout is built using 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 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 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.

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

It will be shown in frontend:

2. Header Options:

• Drawer

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

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

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

• Main Menu
  

 

– Select a Layout: there are 2 style for header main menu.

– Header Position: select type Header Position for main menu.

– Background color: select color for background main menu.

– Text color: select color for text of main menu.

– Text Hover color: select color for text when hover over main menu.

– Font Size: select font size for text main menu.

– Font Weight: select font weight for main menu text.

• Sub Menu

– Color Border Top: select color for border top of sub menu.

– Background Color: select color for background of sub menu.

– Color Border Bottom: select color for border bottom of sub menu.

– Text color: select color for text of sub menu.

– Text color hover: select color when hover over text sub menu.

• Sticky Menu

– Config Sticky Menu: you can choose “custom” or let it “same with main menu” when sticky menu.

– Sticky Background color: If custom sticky menu, select background color for main menu when sticky.

– Text color: If custom sticky menu, select text color for main menu when sticky.

– Text Hover color: If custom sticky menu, select text hover color for main menu when sticky.

• Mobile Menu

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

– Background color: select background color for main menu when view on mobile.

– Text color: select text color for main menu when view on mobile.

– Text Hover color: select text hover color for main menu when view on mobile.

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

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.
– Icon: enter icon name.

3. F​ooter Options

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

• Footer:

– Background footer image: upload background image for footer.

– Text Color: select color for text in footer.

– Background Color: select background color for footer.

• Copyright Options

– Text Color: Select color for text in copyright.

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

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:

– 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

 

-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 theme will have one major color called “Theme primary color”. The elements of the primary color are included with: Hover Text color of “Book a Table”, color of “View Detail” button, color of text “Book Menu” button,  hover social link icon… If you configure any color, it also will be applied similarly to these elements.

5. Display

• Front Page:

– Front Page Layout

This is the place for you to select an alignment for your frontpages, which is the first display page in 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.

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

– Top Image: upload top image for front page.

-Background Heading Color:

–Text Color Heading

-Custom Title

– Select Layout Default:

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

– Background Heading: Select Background Heading color for front page.

– Select Style Default: select style default for front page.

– Select Columns: This configuration just works for style grid layout, select number columns displayed in front page.

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

– Height Heading: adjust height heading of front page.

• Archive:

 

-Archive Layout

-Top Image

–Background Heading Color

–Text Color Heading

-Excerpt Length

• Post & Page:

 

-Single & Page Layout

-Top Image

–Background Heading Color

–Text Color Heading

• Sharing:

• Page 404:

chú thích

6. WooCommerce

•  Category Products

-Archive Layout

-Top Image

–Background Heading Color

–Text Color Heading

•  Product Page

-Select Layout Default

-Top Image

–Background Heading Color

–Text Color Heading

• Setting:

-Column

-Number of Products per Page

•  Sharing

7. Typography:

•  Body Section Option:

• Font Sub Title

•  Heading Section Option:

 8. Custom Css:

 9. Widget:

ảnh minh họa

• Menu Right

• Main Bottom

• Footer

 

10. Static Front Page:

-Front page displays

-Front page

-Posts page

11. Import/ Export Settings:

To configure options under 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.

 

 

 

 

 

 

 

 

 

 

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.

 

 

 

 

 

 

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”

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.

 

1. Go to Appearance >> Menu

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

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

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

On 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 “save menu” button.

 

 

1. Create a Blog page

• Go to Pages >> Add New page.

• Setting Blog page

Go to Setting >> Reading

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:

•  To Add New Tag, come to Posts > Tags and fill in the fields then click Add New Tag:

3. Create Menu for Blog page:

 

Footer

1. In Widgets

 

2. In Customize

 

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

1. Go to Appearance ->  Customize –> Header and configure  the options for header.

2. Go to Appearance -> Widget:

It will be displayed as below:

Siteorigin

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.

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.

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.

 

Widget 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: Display Posts Slider

2. Thim: Filter Gallery

 

3. Thim : Google Maps

 

4. Thim: Single Image

 

5. Thim: Heading

 

6. Thim : OpenTable Reservations

 

7.  Thim: Tab Restaurant Menu

8. Thim: Tweets Feed