Adeline User Guide

Product Guides  Last Updated: Time to Read: 10 minutes

Adeline is a feminine and fashionable e-commerce child theme, built to harness the customization power of Layers. It offers modern visual appeal and simplicity, 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 Adeline
  4. Load Demo Content
  5. Create New Pages from your favorite 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 if you haven’t set it up yet.

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. If you are new to WooCommerce, be sure to set aside some time to go through these short video courses on using the shop admin.

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

  1. Go to PLUGINSADD 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 adeline-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.
Themeforest Users: 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, or linked here (right-click and choose Save As). You can also use the default product dummy-xml found inside the WooCommerce folder. We do not recommend loading demo content into a site you intend to setup as a live store as it will load tags, categories and other data you may not want in your final setup!

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

Finally, time for the fun part!

  1. Go to LAYERS → ADD NEW PAGE
  2. Select a 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:

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 a drop-down containing the current shopping cart and totals on desktop screens. We recommend also placing the Cart widget in the mobile sidebar so the cart can be easily accessed 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 have changed them and want to go back to the demo font, choose Satisfy or Playfair Display for headings and Monserrat for everything else

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 without Sticky enabled.

Footer

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

  • Column 1: Text Widget
  • Column 2: Text Widget with Mailchimp Signup Form (simple CSs only version) – you can also use the Newsletter plugin or Wordchimp plugin which provides its own widgets
  • Column 3: Instagram Feed Widget

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. Under Product Images, your theme will setup your image sizes automatically
  5. 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.

See this linked guide for further advice on Configuring WooCommerce

Product Categories

Your Product Categories each need an image to represent them, as seen on Adeline’s Catalog page preset. For best results, use the same dimension images for all your categories, at least 600px wide.

Your theme and StoreKit are premium products with dedicated support offered through Layers Messenger. To enable the messenger, go to Layers → Dashboard and check the box on the far right in the Messenger panel. For general Layers questions, 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!