Sign in

Theme installation

The theme can be installed through the WordPress Admin panel.

  1. Log in to the WordPress Admin panel.
  2. Go to Appearance -> Themes.
  3. Click on the Add New button, at the top of the screen.
  4. On the Add Themes screen, click on the Upload Theme.
  5. Click on the Choose theme, and then browse for theme file on your computer.
  6. Click on the Install Now to start the install process.
  7. After the installation is done, click on the Activate theme.

A detailed video for theme installation is available here: https://help.themeskingdom.com/how-to-install-and-setup-the-theme.

After activating the theme, you will be prompted to install the required plugins. Required plugins are:

  1. Jetpack
  2. Kirki
  3. Slider Custom Post Type
  4. MailChimp
  5. WooCommerce

Jetpack

JetPack is the world popular plugin that extends WordPress features. In the Scenery theme, it is used to extend galleries features and protection. The official documentation is available here: https://help.themeskingdom.com/jetpack-plugin/.

Kirki

Kirki is a plugin that enhances theme experience by adding useful elements in the Customizer, like image position picker, font settings and such.

Slider Custom Post Type

Slider Custom Post Type plugin adds Slider post type to the theme.

MailChimp

MailChimp plugin allows you to add a MailChimp signup form widget to your WordPress quickly.

WooCommerce

WooCommerce is a free eCommerce plugin that allows you to sell anything. Built to integrate seamlessly with WordPress, WooCommerce is the world’s favorite eCommerce solution that gives both store owners and developers complete control.

Theme demo

To set the theme as presented in our demo, you can import the demo file.

Theme setup

Before starting setup, please install and setup the WooCommerce plugin. During the setup process, you will need to set up store address, set payment methods and shipping methods. WooCommerce will also create all pages that are required for a shop – Shop, Cart, Checkout, and My Account.

To set up the theme, please follow the next steps:

  1. First, go to Pages -> Add New, and create pages Home, About and Blog. For Homepage, set the Featured Products template, while the other pages should use the Default template. The page with Featured Products Page will display products that are marked as Featured products.
  2. Go to Settings -> Reading. Select the homepage to display a static page. For the Homepage set Home page, and for Posts, page set Blog page.
  3. Create some posts – go to Posts -> Add New and create several posts. Be sure to Set featured images. All posts will be displayed on the Blog page.
  4. Go to Products -> Categories. Create several product categories – in our demo, we have created categories Books & Magazines, Living, Accessories, Clocks, Office, etc… Categories are used to group similar products – and to display product groups in the navigation. In our demo, we have also used product tags for different brands.
  5. Create several products and associate them with the product categories. Set featured image, enter a description, and price for each product. Add product tags to each product. As we have mentioned, the homepage displays the products that are marked as featured. After creating the product, click on Catalog visibility and mark the product as Featured.
  6. To set up the main navigation, go to Appearance -> Menus. Create a new menu and add items. Add all your pages. For Brands option, add placeholder item (custom link item with target #) and add product tags as subitems.
  7. Now it’s time to set the rest of the theme.
    Go to Appearance -> Customize and set the following options:

    1. Site Identity: Set site logo and favicon.
    2. Content Options: Enable author bio on a single post.
    3. Theme Settings:
      • Blog layout: Set blog layout to standard.
      • Shop layout: Set it to 3 columns, and enable Show a product’s tag above its title
      • Slider: Set ti to medium.
    4. WooCommerce:
      • Store Notice: Enter your notice if needed – you can use HTML to style text.
      • Shop Header Settings: Enable both – My Account and Saved items, and Mini Cart.

The Customizer


The Customizer is a great WordPress feature that allows you to customize the theme and set theme options. Customization options available in the Customizer:

  1. Site Identity
  2. Header Media
  3. Background Image
  4. Menus
  5. Content Options
  6. Widgets
  7. Homepage Settings
  8. Theme Settings
  9. Color Settings
  10. Footer Settings
  11. WooCommerce
  12. Font Settings
  13. Additional CSS

Site Identity


Site Identity allows you to set your site logo, title, tagline, and icon. The Site Title is the name of your site and it’s displayed in the header, where the logo is displayed. The Tagline is the short description or your motto, and it’s displayed just under the title.

  1. Logo: For logo set JPG, JPEG, or PNG image.
  2. Logo Size: Moving slider to the left or right will increase or decrease logo size. Changes in logo size will be displayed in the preview panel.
  3. Site Title: Name of your site. The Site Title is displayed only if the logo is not set.
  4. Tagline: Site punchline. The Tagline will be displayed together with a Logo or Site Title.
  5. Display Site Title and Tagline: If enabled, both Title and Tagline will be displayed in the header.
  6. Site Icon: The Site Icon is used as a browser and app icon for your site. Icons must be square and at least 512px wide and tall.

Header Media

Header Media is the default section that allows the upload of the video in the header.

  1. Header Video: Upload your video in .mp4 format and minimize its file size for the best results.
  2. YouTube URL: Instead of uploading a video, you can paste a YouTube URL.
  3. Header Image: Click “Add new image” to upload an image file from your computer. Your theme works best with an image that matches the size of your video — you’ll be able to crop your image once you upload it for a perfect fit.
  4. Title: Title that will be displayed before the video starts playing.
  5. Title Color: The color of title.
  6. Text: Enter the short text that will be displayed with the title.
  7. Text Color: The color of the text in the header.

Background Image


Depending on the use case, some users need to set a background image on the site. In Background Image panel you can set a background image. After choosing an image, you will be able to set background behavior.

  1. Preset: Defines image size – Fill Screen will stretch the image to fill the whole site; Fit to the screen will cover the only visible part of the site, and Repeat will keep original image proportions, but it will repeat the image. Custom allows you to manually set background parameters.
  2. Image Positions: Tool used to define what is the starting position for the image.
  3. Scroll with Page: Option available only if the background image is set to Repeat. If checked, the background will scroll together with the page content.


This option allows you to manage created menus quickly. You can select what menu will be displayed as Primary Menu or Social Menu. If you need to manage actual menu items, you can do that in Appearance -> Menu.

Content Options


Content Options allows you to turn on or off author bio on the single post page.

Widgets


The Widgets section allows you to manage widgets in the widget areas quickly. This option allows you the same possibility as the Widgets option in the WordPress admin panel.

Homepage Settings


This option works the same way as Settings -> Reading. It allows you to set them to read the latest post or to use static pages for landing and blog pages.

Theme Settings


In the Theme Settings panel, you can set layout options for Blog, Shop, and Slider. The Blog can be set to display posts in a standard grid or in the shuffle – posts are displayed scattered around.

Color Settings


Theme colors are used to add a personal, artistic touch to the site. Lines Color Setting controls the color of lines on the homepage. The Background Color will define background color on the whole site, while other options are used for the text color on the site.

WooCommerce


WooCommerce panel keeps settings specific for the Shop – layout, what products and categories will be displayed, and theme-specific image sizes for the Shop.

  1. Store Notice
  2. Product Catalog
  3. Product Images
  4. Checkout

Store Notice


The Store Notice will appear at the bottom of your site. It’s used to display important information – e.g. delays in shipping, or discount promotions, etc. You can use HTML elements to style the notice.

Product Catalog


Product Catalog defines how WooCommerce pages – main store page and product category pages – will display products, how many of the products will be displayed and in what layout.

  1. Shop page display: Choose what to display on the main shop page – products, categories or both.
  2. Category display: Choose what to display on product category pages – products, subcategories or both.
  3. Default product sorting: Defines what parameter will be used for default product sorting.

Product Images


Settings related to image width on the shop and single product page.

  1. Main image width: Main product image width, which will be used on the single product page.
  2. Thumbnail width: Width for the main product image on the shop page.
  3. Thumbnail cropping: How the thumbnail will be cropped. There are three settings: 1:1 – an image will be cropped proportionally based on original dimensions; Custom – depending on the input value, cropping will use that proportion; uncropped – image will be scaled down.

Checkout


The Checkout section contains settings related to the checkout page. Here you can customize what optional fields are displayed and if they are required, and you can configure Privacy policy and Terms and conditions pages, as well as notices.


Footer Settings have only text area. Add text to the footer copyright area. HTML elements can be used for formating.

Font Settings


The Font Settings panel is displayed only if the Kirki Framework plugin is installed and activated. Font Settings are used to set font families and weights for global text elements content, headings, and navigation. Available fonts are from Google Fonts but without extended variants. If you need assistance on how to integrate additional variants, please submit a support ticket.

Additional CSS


Additional CSS section is used for custom CSS classes, without interfering with the theme original CSS files or creating a child theme. These classes are always loaded first, before other stylesheets. In the Useful CSS Classes section, you can find some most used classes.

Useful CSS Classes

Was this article helpful?
YesNo

We’re here to answer all your questions!

If, somehow, you haven’t found answers to your questions, feel free to contact our chatty & friendly support team.

Support request

Need help configuring your theme?

Don’t want to spend hours building your site from the ground up and perfecting its design? Let us do it 一 we like to get our hands dirty!

Services
New
Help