Concept Living User Guide

Product Guides  Last Updated: Time to Read: 10 minutes

Concept Living is a reboot of our wildly popular Store theme for WordPress, now built to harness the customization power of Layers. Concept Living offers the same visual appeal and front-end functionality, with the addition of Layers building widgets for even more layout control.

Setup

Below are links to helpful articles to get you going with this child theme. The setup order is important to ensure the content you need is present prior to diving into presets and page building.

  1. Install Layers
  2. Install WooCommerce & StoreKit
  3. Install Concept Living
  4. Load Demo Content
  5. Load Presets
  6. Customize

Your Child Theme is a collection of styles, presets and templates for the Layers theme framework, which is free to install. View the Layers Install Guide

This theme’s demo uses the StoreKit extension for the menu cart and product widgets on the Shop pages, which require WooCommerce to be installed and configured first.

Install WooCommerce

WooCommerce defines a set of templates for displaying your products, including how the image, price, additional info and so on are arranged. Layers simply provides simple styling to help these layouts conform to the Layers theme and framework for a more unified look. WooCommerce is required for StoreKit compatibility and shop functionality.

  1. From your WordPress admin, go to PluginsAdd New and search for WooCommerce and install and activate it.( It is listed as WooCommerce  – excelling eCommerce with a purple hedgehog graphic).
  2. Upon Activation you will be taken through the WooCommerce Onboarding wizard. We recommend you do this now.
  3. If prompted to install WooCommerce pages, do so.

 

Install StoreKit

StoreKit is a Layers extension that adds additional functionality to Layers such as shop and product customization, product widgets for your builder pages and a header cartand is included free with Concept Living.

StoreKit is found inside your Themeforest zip file as storekit-extension.zip 

  1. Go to Plugins  → Add New
  2. Click Upload Plugin
  3. Browse to the storekit-extension.zip file and open it
  4. Click Install
  5. Activate when finished

View the StoreKit User Guide for detailed setup and usage instructions.

Recommended Plugins

Your theme can be used without any WordPress plugins, but is greatly enhanced both by extensions packaged with the theme, and a few select free plugins we use on the theme demo. The following steps are recommended if you do not have existing plugins to fill these roles or are setting up a new site.

  • Optional: On the Add New Plugin screen, search for Contact Form 7 and install and activate it. This is the most popular contact form plugin, used on the Contact page, and is easy to  configure.
Note: If you are not running the latest version of WordPress, please update under DASHBOARDUPDATES
  1. Login to your WordPress admin panel, go to APPEARANCE and click ADD NEW at the top
  2. Click the UPLOAD THEME button at the top
  3. Click the BROWSE button inside the center white box (Choose File on some browsers)and navigate to the location of your layers-concept-living-theme zip file.browse-themefile
  4. Select the file and click Open.
  5. Click INSTALL NOW to begin the installation.
  6. Wait for the success message, then click the Activate link.
  7. You will be directed to the  Getting Started screen.
  8. Wait before installing any page presets! You must install and configure plugins and demo content first to ensure products load! Proceed with the next section to setup your shop.
 Getting a stylesheet not found error? Make sure you unzip the themeforest download package first to find all of the install zips and supporting files!

Layers themes use Presets instead of traditional demo content that you load via an XML, but we do provide this file if you do not have any existing Product content and want to rapidly setup Presets. You can find this file inside the Themeforest zip package.

The XML will not setup widgets, customizer settings or plugins, it will only auto-load posts, products and images.

Some presets use the StoreKit Product widgets, which grab products by ID. The widget content may appear blank if you do not use our demo file. You may need to configure the widgets with your own product post content, as IDs are unique to each WordPress install.

WooCommerce also offers some starter product content to populate your store and give you an idea of how products are put together. See the Importing WooCommerce Content for details and how to load it into WordPress.

Finally, time for the fun part!

  1. Go to Layers → Add New Page
  2. Select a Concept Living preset, such as Home and click Select
  3. You will be brought to the Edit Layout screen of the Customizer. Here you may proceed to edit the widget content by expanding each one
  4. For more detailed help with using Layers and Layers widgets, be sure to review the main user guides:

Note: The Contact page preset has a Contact Form 7 shortcode prefilled which may not correspond to your install of Contact Form 7. Simply visit the Contact option in your admin to configure your form, then copy the shortcode at the top of the screen to replace in the Contact page’s widget. You may also use any other contact form plugin or shortcode there. See the Contact & Maps guide for detailed usage.

This section provides some recommended setups for your Customizer to help you mimic our demo. To begin, go to Layers → Customize

Setup Header Cart

If you leave the Header Cart enabled in StoreKit, you will see a little cart button to the right of the Header Menu that displays the total. When clicked, this will expand the off-canvas sidebar. We recommend placing the Cart widget in this sidebar so the cart can be easily accessed from the Header cart, and also on mobile screens.

  1. Click the Edit Layout customizer section
  2. Click the Mobile Sidebar
  3. Click +Add Widget and add the WooCommerce Cart widget
  4. We recommend removing default widgets here. Other widgets you may wish to add are:
    • Custom Menu Widget – Your top bar is not visible on mobiles. Select the Top menu here or create a new one that combines your top and footer links into one utility menu.
    • WooCommerce Recently Viewed

Site Settings

Logo & Title

Our demo uses a basic Site Title and Tagline with “Display Header Text” checked and no image logo.

Fonts

Fonts are set by the theme on activation. If you need to set them back for any reason they are:

  • Body: Rufina
  • Headings: Montserrat
  • Buttons: Montserrat

Menus

You should create at least 3 menus:

  • Header – Assign to the Header Menu location. We recommend adding your Shop and Blog pages, plus Product Categories to this menu. Drop-downs are supported.
  • Top – Assign to the Top-Right location. We recommend adding the My Account and Checkout pages to this menu. This menu is intended to be utility, no drop-downs are supported.
  • Footer – Assign to the Footer location. We recommend adding the Shipping & Returns or other policy pages here, plus your Contact and About pages if you have them.
(Optional) Social

If you have installed Layers Pro, you can add social link icons and your profile URLs by using the Custom Link option in the Appearance/ Menu builder.

Save your customizer changes and return to the WordPress admin, then go to Appearance → Menus

Create a new menu called “Social” and assign to the Top-Left location.

Header

Our demo uses the Logo Center Top layout with Sticky enabled.

Footer

Our demo uses 4 Footer Columns. The widgets we use under the Footer panel in Edit Layout are:

  • Column 1: Text Widget
  • Column 2: WooCommerce Products Widget (set to Recent Products)
  • Column 3: WooCommerce Products Widget (set to Random Products)
  • Column 4: WooCommerce Shopping Cart

Configure WooCommerce

How you configure WooCommerce, and which WooCommerce extensions you use, can affect how your catalog and single products look in Layers, requiring specific settings and in some cases, additional custom styling to fit the overall design of your site. Below are some basic settings we recommend for WooCommerce to work best with your Layers setup.

WooCommerce Sidebars

These settings in the customizer allow you to choose whether to show or hide the Shop Sidebar on your catalog and product pages.

  1. Go to LAYERSCUSTOMIZE
  2. Browse to your shop or product page in the preview panel.
  3. Click on WooCommerce to expand the panel
  4. Choose the Left, Right, both or no checkboxes to set the layout of the catalog and single product views
  5. If you enabled a sidebar: Click the Back arrow in the customizer nav
    • backarrow
  6. Click EDIT LAYOUT and expand the SHOP SIDEBAR to add WooCommerce or standard sidebar widgets. Do not put Layers Builder widgets in this sidebar.
  7. Click SAVE & PUBLISH when done

Depending on the sidebar layout, you will notice the size of your images in the product column changes. The maximum width and the crop of these images is determined by your WooCommerce Product Image settings.

Optimizing your original images

We recommend using a uniform image size for all of your original product images and leave the hard crop unchecked in your WooCommerce Product settings, especially for clothing shops. The subject should be centered and have some space around the edges of the photo to ensure it is not cut off by the crop or resizing.

Your originals must always be at least as wide as your single product image width setting.

Regenerate Your Images

If you had content in WooCommerce or WordPress previous to activating your theme, you must run the Regenerate Thumbnails plugin to re-create your theme images properly. See How to Regenerate Images to Fit Theme Templates

Also check out How to Setup an Online Store with Layers for other great tips!

Products
  1. Go to WooCommerceSettings
  2. Click the Products tab, then click the Display link
  3. Ensure the Shop Page has Shop selected in the pages drop-down.
    • If you do not have this in your dropdown because you skipped setup, you will need to create a shop page or load our demo content, then return to this step.
  4. Ensure “Enable AJAX add to cart buttons on archives ” is unchecked if you are using StoreKit or Social Commerce.
  5. Under Product Images, Concept Living will setup your image sizes automatically, but you can choose if you want hard crop checked (crops the height) or unchecked (leaves original image height and just scales image to the width)
  6. Optional: Click the Inventory link at the top under the Products heading
    • Check Hide Out of Stock Items from Catalog if you are managing inventory and do not want out of stock items to be visible.
Checkout
  1. Click the Checkout tab
  2. Uncheck Enable guest checkout if you want to capture customer data or enforce tracking/account management
  3. Check Force Secure Checkout if you have installed SSL on your domain
    • Leave Force HTTP when leaving the checkout unchecked unless your Payment Gateway requires otherwise
  4. Select your Cart and Checkout pages created by WooCommerce or our demo content in the corresponding drop-downs.
    • If you do not have this in your dropdown because you skipped setup, you will need to create these pages or load our demo content, then return to this step.
  5. Select a page to use as your Terms and Conditions. This can be any full-width or default page you create under Pages. If you do not have one yet, create one and return to this step.
Accounts
  1. Click the Accounts tab
  2. Choose the page to use for the My Account page in the drop-down
View the WooCommerce documentation for specifics on configuring Inventory, Shipping and Payment Gateways.

Concept Living and StoreKit are premium products with dedicated support offered through our theme shop at Obox ThemesRegister your account or access support here. Please note that general Layers questions or issues, including any customization or CSS help should be directed to our Community forums.

WooCommerce Support

Our WooCommerce documentation covers basic setup that is specific to the theme. For more information on how to use WooCommerce products, options and settings, including Shipping, Payment and other you-specific settings, please consult their user guide. It goes into great detail in terms of both setup and maintaining your products, shipping, stock, tax and much more. View the WooCommerce User Guide

Want full color customization, accordions, call to action bars and blog options? Check out Layers Pro!