StoreKit User Guide

The Layers StoreKit plugin extends WooCommerce for your Layers theme, adding enhanced styling, menu cart, catalog and product post element visibility, and shop-exclusive sidebars. It also includes Product builder widgets for your Layers pages.

To report issues with StoreKit options specifically, or to get help with using the StoreKit widgets, click on Support from this website and head to the Dedicated Support section.

For help and support for WooCommerce, WooCommerce widgets and the functionality of the shop/cart beyond these settings, visit the WooCommerce support forum.

  1. You must have the WooCommerce plugin installed and activated.  Refer to How to Configure WooCommerce for Layers for setup tips.
  2. From the WordPress admin, go to PLUGINSADD NEW
  3. Click on UPLOAD PLUGIN 
  4. Click on CHOOSE FILE in the center white box and navigate to the to file, select it and click  OPEN
  5. Click INSTALL NOW
  6. When complete, click Activate Plugin

Access StoreKit options from LAYERS  → CUSTOMIZE.

storekit

The first section of the StoreKit options panel controls the Header options such as the menu cart and category images.

general-options-storekit

1 Menu Cart

This cart displays the current total of items added, and will toggle the “mobile sidebar” when clicked. Check this option to show the cart toggle in your Header Menu (default) or uncheck to hide it.
You may add widgets to the  Mobile Sidebar by returning to the main Customizer menu and choosing EDIT LAYOUT.

Place the WooCommerce Cart widget in the top position if the Menu Cart option is checked.

2 Cart Icon

If the Menu Cart option is checked, you may toggle this option to show or hide the cart icon.

3 Amount

If the Menu Cart option is checked, you may toggle this option to show or hide the cart total.

4 Product Count

If the Menu Cart option is checked, you may toggle this option to show or hide the number of products in the cart to the right of the icon and amount.

5 Category Image in Header

This option is new in StoreKit 1.2 and enables your WooCommerce Category image to fill the page title area when that Category is viewed. For best results, use HD category images at least 2000px wide and 600px tall. Choose Small, Medium, or Large to set the approx height of the header.

Click SAVE & PUBLISH and return to the StoreKit options panel.

To see the effects of this section’s options, click your Shop link in the Customizer preview.

Sidebar(s)

Choose whether to show the left sidebar, right sidebar, or both. You must have at least one sidebar widget in the chosen sidebar(s) for the layout changes to take effect. You can access these widget areas by clicking on the back arrow in the upper-left of the Customizer navbar, then click on EDIT LAYOUT and expand the Left or Right Shop Sidebar panels. These sidebars work best with WooCommerce widgets. Do not place Layers widgets here.

List

These settings allow you to choose what to display on your product list pages (the Shop and product category views). You will be able to set these options separately for the single Product view.

Products Per Row

Choose from 1-4 columns. If using two sidebars, it is best to set this to 1 or 2.

Your WooCommerce Product Image sizes will affect the image quality and size of images in the catalog. Refer to How to Configure WooCommerce for Layers for recommendations and ensure uploaded images are at least 800px wide for best results.

Products Per Page

Choose the number of products to display per page in the shop.

Note: this will not affect Categories, and cannot paginate categories if you have WooCommerce set to display categories on the main shop page instead of products.

Product Count

Check to show (default) or uncheck to hide the Showing 1–10 of 15 results or similar text at top-left of your Catalog

“Products Per Page” Dropdown

Check to show (default) or uncheck to hide the PER-PAGE drop-down in the catalog bar. This drop-down allows your visitors to change the number of products listed (this only affects their view).

To test the product count drop-down, Save your changes, then click the Layers icon in the Customizer nav bar and choose Preview This Page. Do not test it from within the Customizer preview pane / without saving first.

Product Sorting

Check to show (default) or uncheck to hide the DEFAULT SORTING drop-down in the catalog bar. This drop-down allows your visitors to sort your catalog by popularity, price or newness.

Sale Badges

Check to show (default) or uncheck to hide the Sale badge in the top-left corner of any on-sale products.

Add To Cart Buttons

Check to show (default) or uncheck to hide the SELECT OPTIONS or ADD TO CARTbutton. This is especially useful if you want to encourage click-throughs to the main product view, or create a view-only catalog for products that must be quoted or purchased locally.

Prices

Check to show (default) or uncheck to hide the price below the product title. This is especially useful if you want to encourage click-throughs to the main product view, or create a view-only catalog for products that must be quoted or purchased locally, but still be able to enter pricing info on the back-end.

Ratings

Check to show (default) or uncheck to hide the average star rating which appears after a product has received a review. You can disable reviews alltogether from the WooCommerce settings, or by disabling Comments on all Product posts using the Bulk Edit option in the admin.

Product Meta

Check to show (default) or uncheck to hide the Product category and tags

Stock Count

Check to show (default) or uncheck to hide the “X in Stock” text if you are managing stock on your items.

“New” Badges

Check to show (default) or uncheck to hide the “NEW!” badge on recent products. You may set a custom range in days for what determines “new” in the “New” Badge Period field (default is 30 days, therefore any products added in the last 30 days will display the New badge with this option enabled)

Thumbnails

Show Thumbnails

Check to show product images s(default) or uncheck to hide them

Thumbnails Flip

Choose this option to flip between the products featured image and the first image in the products gallery. By default, products with only one image will not animate.

To add additional images to your product gallery, edit the product and locate the Product Gallery box on the right side under the Category select box.

Click SAVE & PUBLISH then return to the StoreKit options panel.

Click a product in your catalog in the preview pane, then continue on to the Product Page options panel. You may need to view multiple products to view all of the available options, depending on which ones are new, on sale, etc.

Sidebar(s)

Choose whether to show the left sidebar, right sidebar, both or none. You must have at least one sidebar widget in the chosen sidebar(s) for the layout changes to take effect. You can access these widget areas by clicking on the back arrow in the upper-left of the Customizer navbar, then click on Edit Layout and expand the Left or Right Shop Sidebar panels. These sidebars work best with WooCommerce widgets. The same sidebar is shared on the catalog and single view. 

Layout

Click the thumbnail representing the layout you prefer for your product post – image left/content right or content left/image right.

Display

These settings allow you to choose what to display on your single product view.

Title

Check to show (default) or uncheck to hide the Product Title

Excerpt

Check to show (default) or uncheck to hide the Excerpt. This is any text you enter into the Product Short Description area of the product post edit screen and should not be confused with the main post editor content, which is displayed in the Product Description tab below the image and purchase options.

Sale Badges

Check to show (default) or uncheck to hide the Sale badge in the top-left corner of any on-sale products.

Add To Cart Buttons

Check to show (default) or uncheck to hide the SELECT OPTIONS or ADD TO CARTbutton. This is especially useful if you want to encourage click-throughs to the main product view, or create a view-only catalog for products that must be quoted or purchased locally.

Prices

Check to show (default) or uncheck to hide the price below the product title. This is especially useful if you want to encourage click-throughs to the main product view, or create a view-only catalog for products that must be quoted or purchased locally, but still be able to enter pricing info on the back-end.

Ratings

Check to show (default) or uncheck to hide the average star rating which appears after a product has received a review.
This does not hide the Reviews tab! You can disable reviews alltogether from the WooCommerce settings, or by disabling Comments on all Product posts using the Bulk Edit option in the admin.

Product Meta

Check to show (default) or uncheck to hide the Product SKU, category and tags.

Stock Count

Check to show (default) or uncheck to hide the “X in Stock” text if you are managing stock on your items.

“New” Badges

Check to show (default) or uncheck to hide the “NEW!” badge on recent products. You may set a custom range in days for what determines “new” in the “New” Badge Period field (default is 30 days, therefore any products added in the last 30 days will display the New badge with this option enabled)

Click  SAVE & PUBLISH, then return to the main Customizer menu and click EDIT LAYOUT

StoreKit includes three builder widgets for showcasing products on your Layers pages, the Product Slider, Product Category Widget and Product Content Widget. These can be used in any Layers page using the Layers Builder template in combination with other Layers and WooCommerce widgets.

StoreKit Demo

If you are not using a child theme that supports StoreKit presets, the following json file will help you import a demo homepage layout using these and Layers widgets.

You must have products created and WooCommerce configured first for this to work! See How to Setup an Online Store Tutorial

StoreKit Demo HomePage

To use:

  1. Download and unzip the file to find the storekit_demo-homepage.json file
  2. Go to LAYERSLAYERS PAGES and create or edit a new page linked to the Layers template
  3. Click IMPORT and browse to this file and upload it.
  4. When complete, Save the page, then click EDIT YOUR PAGE
  5. Edit the widgets with your desired products and categories.

The following explain each widget in detail:

This doc is part of the StoreKit User Guide

The StoreKit Product Slider widget offers a unique post slider for your Layers pages for displaying products in a variety of layouts.

product-slider

1 – Search For Products

This section allows you to add published products to automatically create your slides.

Click into the Search For Products to Add field and a drop-down will appear displaying the last few products added. You may select from the list, or begin typing a product name to locate the product to add. Note that variable products will display one result per variation, so be sure to add the main product unless you want to feature a specific size or color!

search-create

When you are done, click the  + Create Slides button. One slide panel for each product will appear in the next section, but first, let’s customize the slider itself.

2 – Layout

Click the Layout button in the Widget Design Bar and choose between Boxed, Full-Width (default) and Full Screen.

  • Boxed – restricts the width of your slider to a max of 1000px. This layout works best when the header and footer of your site are also boxed.
  • Full-Width – expands your slider to the full width of the browser window. The content and individual slide width are still restricted and can be cusotmized separately.
  • Full-Screen – Automatically sizes the slider to fit the full width and height of the viewer’s browser window.

3 – Slider

Click the Slider button in the Widget Design Bar to access the primary Slider options.

Auto-Height Slides

Check this option if you want the slider height to automatically adjust to the slide content. This ensures the best chance of your slide content responding well on small screens.

Slider Height

If you prefer to set the height manually, enter your desired pixel value here. Note that some child themes and responsive modes will ignore this and force it to a mobile-friendly height to avoid forcing your visitors to scroll to see entire slides.

Show Slider Arrows

Check to show (default)  or uncheck to hide the slider arrows.

Show Slider Dots

Check to show (default)  or uncheck to hide the slider dots. If you are setting your slider to auto-play, we recommend keeping this option checked to give visitors a visual reference of how many slides there are.

Slider Controls Color

Choose a custom color for the arrows and dots, if shown.

Animation Type

Choose from Parallax, Fade or Slide.

  • Parallax: Animates the text in your slides independently of the images as the slider moves. Note this is not a scroll effect but is a slide effect.
  • Fade: fades the slides. This is not currently compatible with swping/grabbing, so we recommend using this only if Auto-Play is enabled.
  • Slide: a traditional slide animation, slideing left. For RTL languages, you should enable Fade if Slide is breaking your slider content.

Autoplay Slides

Unchecked (disabled) by default. Check to enable your slider to automatically advance each slide. Enter a number of seconds in the Interval field (we recommend 5-10 and ensuring Slider Arrows are not enabled when Autoplay is on)

4 – Customize Slides

slide-options

Now that you have your slider configured, you can jump into customizing the slides. These work just like the default Layers Slider slides, with similar customization options, and may be dragged and dropped into the order you wish them to appear.

To customize a specific slide, click the pencil icon to the right of the slide title to expand the slide options bar. Your chosen slide will update in the preview as soon as you make a change to any of these options, or you may manually navigate to the slide using the slider controls in the preview pane.

background-iconBackground

Choose Image

Click here to choose an image if you want it to fill the entire slide behind the content with something other than a solid color.

Textures, photos and images without embedded text are best.

Full-size images you will not be tiling should be at least 1908px wide and as tall as your widget height to ensure highest quality at all screen sizes. Tiles or repeatable images can be any size you want.

Color

Choose a background color.

Repeat

If using a tileable image, choose a Repeat option

Position

This option aligns your image vertically and can help you adjust the placement of the subject of your background if needed.

Stretch

Check this option if you want your image to always fill the slide at all screen sizes. This is helpful if your image is less than 1908px but should not be used on images below 1600px or you risk significant quality loss at higher resolutions.

For the pros, this option sets the background-size: cover; property.

Darken

Check this option to add a semi-transparent dark overlay to your image. This can help your text stand out better on bright images or images with high contrast.

image-iconFeatured Media

This setting adds an image or video player to the content area of your slide. Unlike the background, this media is responsive.

Choose Image

Click here to choose or upload an image in the Media Library. For best results, use images at least 960px wide. They will be resized automatically based on the image layout and ratio you choose in the next few options.

Video URL

You can add a video from any hosted source by pasting the oEmbed URL into this field.

Most major providers support oEmbed, including YouTube, Vimeo, SoundCloud, Twitter and Vevo.

The URL is copied from the "Share" link on the video itself.

video-widget
Image Ratio

The icon bar at the bottom of the Featured Media panel controls how your image is scaled or cropped. When using embedded video, these options will only control the width of the player and the circle option is ignored.

From left to right:

  • Portrait: Uses the 340px wide scale of portrait oriented images, or crops your image to 340px from center. The original height is maintained.
  • Landscape: Uses the 480px wide scale of landscape oriented images, or crops your portrait images from center.
  • Square: crops your image to 480x480 from center
  • Original: Uses the original image, scaled proportionately to fit the layout. For left and right aligned images, this is a max of 630px wide. For center-aligned images, this is a max of 1000px wide.
  • Circle: Sets a radius on your image.  To get a perfect circle, your original image must be square. Portrait and Landscape originals will produce ovals.
 

image-alignContent Alignment

Select your desired alignment for your image.

text-iconText

Choose an alignment for your text and your preferred size.

  • Each size option is pre-configured with optimal balance, line height and size combinations.

To set a custom color, click on the Color option and select a color from the palette or enter an HTML hex value.

Display

  • Show Featured Image: Check to show (default) or uncheck to hide the product image
  • Show Title: Check to show (default) or uncheck to hide the product title
  • Show Excerpt: Check to show (default) or uncheck to hide the Product Short Description
  • Show Price: Check to show (default) or uncheck to hide the price
  • Show Sales Badge: Check to show (default) or uncheck to hide the On Sale badge
  • Show Button: Check to show (default) or uncheck to hide the Add to Cart/Select Options button

Buttons

If Show Button is checked, this option allows you to set a custom color for the button text and background.

5 – Advanced

The advanced option allows you to create a custom CSS class and add widget-specific styling. For details on using this option, see How to Use the Advanced Design Bar Option 

 Save & Publish when finished, then click the Layers icon in the Customizer nav bar and choose Preview This Page to check out your new slider.

This doc is part of the StoreKit User Guide

The StoreKit Product Categories widget displays the category image, title and description for each selected category in a grid or Masonry layout on your Layers pages, and may be customized using the powerful Layers design bar and column settings.

product-categories

To display a list of category links in your Shop Sidebar, you can use the WooCommerce Product Categories widget.

To set images for your categories, go to ProductsCategories from the WordPress admin, edit a category, and click on the Thumbnail option.

Category images should be at least 630px wide to take advantage of all the image  and column size options in the widget. If you plan to use them as page title backgrounds, we recommend they be at least 2000px wide and 600px tall.

productcategories

1 – Widget Title & Description

You may add a title and introduction for this section of your page, if desired, or leave these fields blank.

2 – Add Categories

Click into the Select Which Categories to Display field and a drop-down of your existing Product Categories will display. Select the categories you wish to add in the order you want them to appear, or begin typing a category name to locate it in the list quickly.

3 – Layout

Click the Layout button in the Widget Design Bar and choose between Boxed, Full-Width (default) and Full Screen.

  • Boxed – restricts the width of your slider to a max of 1000px. This layout works best when the header and footer of your site are also boxed.
  • Full-Width – expands your slider to the full width of the browser window. The content and individual slide width are still restricted and can be customized separately.

4 – Text

Choose an alignment for the widget’s main Title and Description and select your preferred size.

  • Each size option is pre-configured with optimal balance, line height and size combinations.

To set a custom color, click on the Color option and select a color from the palette or enter an HTML hex value.

5 – List Style

  • Grid will arrange your columns in a uniform grid with an equal height on all column blocks.
  • Masonry allows each column block to fit together at various heights (like Pinterest)

Uncheck the gutter option to remove the margins/spacing between blocks.

6 – Display

This section controls the visibility of all the things that the categories can display.

Title & Excerpt Position

  • Regular places the category title and description below the category image.
    Overlay places the category title and description over the image when hovered.

Show Featured Images

Check to show (default) or uncheck to hide the Category image.

Show Category Titles

Check to show (default) or uncheck to hide the Category Title

Show Product Count

Check to show or uncheck to hide (default) the number of products in the category next to or in place of the Category Title.

Show Category Description

Check to show (default) or uncheck to hide the Category Description. Edit your categories under Products Categories to change or add a description. For best results, stick to one-line.

Excerpt Length

If Category Excerpts are displayed, you can control the length of the text by entering a character count here. This will clip overly long descriptions to that length to aid in providing a uniform look and content height in the widget. Increase this number if you want to ensure the whole description shows, regardless of length.

Show Button

Check to show (default) or uncheck to hide the View Category button. If you choose to show the button, you may set a custom button label in the following field.

7 – Columns

Choose the number of columns for your layout, to a maximum of 6.

You may also set a custom background color for the content area if the Regular Display option is used.

Uncheck the gutter option to remove the margin/spacing between columns, if desired.

8 – Buttons

Set a custom color for the Button and button label, if you enabled it in the Display option.

9 – Image Ratio

Image Ratio options control how your images are scaled or cropped.

From top to bottom:

  • Portrait: Uses a uniform height image cropped from center. Originals with a portrait orientation are least affected. Featured images should be at least 480px tall for this to work well
  • Landscape: Looks for a 660px wide copy of your image at 2 columns and 480px at 3 or more. Portrait oriented originals are cropped from center. If your original is smaller than 660px wide, use more columns.
  • Square: crops your image to 660×660 for 2 columns or 480×480 from center for 3 columns or more.
  • None: Uses the original image, scaled proportionately depending on the column size and browser window width. Best used in combination with the Masonry layout.
  • Round: When set to 3 columns or more, this option uses the Layers square crop of your product image and applies a circular radius. If using a 2 or 1 column layout, your Large image dimensions configured under SETTINGS  → MEDIA must be square, ie 1000 x 1000. If you change those settings, make sure you regenerate thumbnails.

10 – Background

Choose Image

Click here to choose an image if you want it to fill the entire widget behind the content with something other than a solid color.

Textures, photos and images without embedded text are best.

Full-size images you will not be tiling should be at least 1908px wide and as tall as your slider height to ensure highest quality at all screen sizes.

Background Color

To choose a background color, click the color palette or enter an HTML hex value.

Repeat

If using a tileable image, choose a Repeat option

Position

This option aligns your image vertically and can help you adjust the placement of the subject of your background if needed.

Stretch

Check this option if you want your image to always fill the slide at all screen sizes. This is helpful if your image is less than 1908px but should not be used on images below 1600px or you risk significant quality loss at higher resolutions.

For the pros, this option sets the background-size: cover; property.

Darken

Check this option to add a semi-transparent dark overlay to your image. This can help your text stand out better on bright images or images with high contrast.

Advanced

The advanced option allows you to create a custom CSS class and add widget-specific styling. For details on using this option, see How to Use the Advanced Design Bar Option 

 SAVE & PUBLISH when finished, then click the Layers icon in the Customizer nav bar and choose Preview This Page to check out your new slider.

This doc is part of the StoreKit User Guide

The StoreKit Product List widget displays your product posts in a grid or masonry layout on your Layers pages, and may be customized using the powerful Layers design bar.

From the main Customizer window, ensure you are previewing a Layers page, then click Edit Layout and expand the page’s Body panel. To add the Product List widget, click +Add a Widget and select Product List

To display a list of product links in your Shop Sidebar, including On Sale or Featured items,  use the WooCommerce Products widget.

 

product-list-widget

1 – Widget Title & Description

The widget is prefilled with demo content and settings. You may edit the title and introduction for this section of your page, if desired, or remove the default content for no title or description.

2 – Choose Products

Filter By

New in 1.6 this option allows you to choose from WooCommerce Featured Products, On Sale products, or by Category.

 To feature products, you must choose Featured in the Product editor, or click the little star icon in the main Products admin page on the right side of the product row.

Category to Display

If Category is selected in the filter box, you may choose a category here or leave All selected to grab the latest products from all categories.

Number of Products to Show

Choose the number of products. To keep your homepage from loading slowly or overwhelming visitors, we recommend keeping this low – less than 12. Pagination can be enabled under the Display option.

Sort By

Choose how to sort the products. To manually order the posts, you may select Custom Order, which requires you Quick Edit each product under the Products admin page and add a number in the Order field. All products in the selected category must have an Order number for this to work, since 0 is given highest priority.

Design Bar

3 – Layout

Click the Layout button in the Widget Design Bar and choose between Boxed or Full-Width (default)

  • Boxed – restricts the width of your slider to a max of 1000px. This layout works best when the header and footer of your site are also boxed.
  • Full-Width – expands your slider to the full width of the browser window. The content and individual slide width are still restricted and can be customized separately.

4 – Text

Choose an alignment for the widget’s main Title and Description and select your preferred size.

  • Each size option is pre-configured with optimal balance, line height and size combinations.

To set a custom color, click on the Color option and select a color from the palette or enter an HTML hex value.

5 – List Style

Choose from Grid or Masonry. Masonry allows product columns with varying heights due to different image dimensions or product descriptions to tile themselves. Grid will list them in a strict grid and depends on using one of the image ratio settings explained in a minute.

6 – Display

This section controls the visibility of all the things that the products can display.

Title & Excerpt Position

  • Regular places the title and product info below the product image.
  • Overlay places the title, price, button over the image when hovered. This option can only support a condensed amount of information so some checkbox options will be ignored if this is enabled.

Show Featured Images

Check to show (default) or uncheck to hide the Product image.

Show  Titles

Check to show (default) or uncheck to hide the Product Title

Show Short Description

Check to show (default) or uncheck to hide the Product Short Description. This is drawn from the Product Short Description field or Custom Excerpt, if enabled in your Product Edit screen and is NOT an auto-generated excerpt of your product post content!

Excerpt Length

If the short description is displayed, you can control the length of the text by entering a character count here. This will clip overly long descriptions to that length to aid in providing a uniform look and content height in the widget. Increase this number if you want to ensure the whole description shows, regardless of length.

Show Prices

Check to show (default) or uncheck to hide the Product Price.

Show Sales Badges

Check to show (default) or uncheck to hide the Sale! badge which displays in the top left corner of the image.

Show Ratings

Check to show (default) or uncheck to hide the star ratings which appear when the product has received at least one review.(does not show in Overlay mode)

Show Buttons

Check to show (default) or uncheck to hide the Add to Cart/Select Options button.

Show Pagination

Check to show or uncheck to hide (default) post pagination below the widget. Products will be paginated within the chosen Category (if selected) on the same page.

7 – Columns

Choose the number of columns for your layout, to a maximum of 6.

You may also set a custom background color for the content area if the Regular Display option is used.

Uncheck the gutter option to remove the margin/spacing between columns, if desired.

8 – Buttons

Set a custom color for the Button and button label, if you enabled it in the Display option.

9 –  Image Ratio

Image Ratio options control how your images are scaled or cropped. Product images should be at least 660px wide to take advantage of all the image ratio and column sizes available.

From top to bottom:

  • Portrait: Uses a uniform height image cropped from center. Originals with a portrait orientation are least affected. Featured images should be at least 480px tall for this to work well
  • Landscape: Looks for a 660px wide copy of your image at 2 columns and 480px at 3 or more. Portrait oriented originals are cropped from center. If your original is smaller than 660px wide, use more columns.
  • Square: crops your image to 660×660 for 2 columns or 480×480 from center for 3 columns or more.
  • None: Uses the original image, scaled proportionately depending on the column size and browser window width. Best used in combination with the Masonry layout.
  • Round: When set to 3 columns or more, this option uses the Layers square crop of your product image and applies a circular radius. If using a 2 or 1 column layout, your Large image dimensions configured under Settings  → Media must be square, ie 1000 x 1000. If you change those settings, make sure you regenerate thumbnails.

10 – Background

Choose Image

Click here to choose an image if you want it to fill the entire widget behind the content with something other than a solid color.

Textures, photos and images without embedded text are best.

Full-size images you will not be tiling should be at least 1908px wide and as tall as your slider height to ensure highest quality at all screen sizes.

Background Color

To choose a background color, click the color palette or enter an HTML hex value.

Repeat

If using a tileable image, choose a Repeat option

Position

This option aligns your image vertically and can help you adjust the placement of the subject of your background if needed.

Stretch

Check this option if you want your image to always fill the slide at all screen sizes. This is helpful if your image is less than 1908px but should not be used on images below 1600px or you risk significant quality loss at higher resolutions.

For the pros, this option sets the background-size: cover; property.

Darken

Check this option to add a semi-transparent dark overlay to your image. This can help your text stand out better on bright images or images with high contrast.

Advanced

The advanced option allows you to create a custom CSS class and add widget-specific styling. For details on using this option, see How to Use the Advanced Design Bar Option 

 SAVE & PUBLISH when finished, then click the Layers icon in the Customizer nav bar and choose Preview This Page to check out your new slider.

Layers extensions are best updated manually unless the author has provided you with an auto-update plugin.

If you purchased your Layers Extension on CodeCanyon, ensure your email notifications are setup so you are emailed when a new version is uploaded. You may also subscribe to our Updates RSS feed here to get notified on updates of Layers products created by Obox.

If you have purchased an extension created by Obox (such as Layers Pro or StoreKit) , redeem your purchase code on layerswp.com to gain access to updates, special bundles and discounts, and dedicated support. You can view our list of products here.

To access updates from our site, login and click the Download button under the item you want to save the updated zip file to your desktop.

Help, I bought a child theme made by a different author that came with Layers Pro, how do I update?

A: You will need to contact the theme author to get an updated copy of Pro.

If you have purchased your extension from an independent website or author on CodeCanyon, check with the author for update info. Examples of independently authored extensions are:

Not sure? Visit the extension page on CodeCanyon and check the Author in the right-hand sidebar. Extensions authored by us will show Obox as the author.

Download a Fresh Copy

  • For Layers products on layerswp.com, login and click Download under the items in your Downloads tab to save the zip file to your desktop.
  • For 3rd party items on CodeCanyon, login and go to Dashboard, then click Download and choose Installable WordPress File Only and save the zip file to your desktop.

Update Layers First

In most cases, updated plugins require WordPress and Layers to be at the latest, greatest version to take advantage of bug fixes and new features.

  1. Go to APPEARANCE → THEMES and activate the main Layers theme.
  2. Go to LAYERS → DASHBOARD and verify you have the Layers Updater Plugin installed. Refer toHow to Update Layers
  3. Go to DASHBOARDUPDATES from your main WordPress admin menu. If an update for Layers is available, you will see it listed in the Themes section. Apply any updates needed.

Reinstall via WordPress

Extensions that do not have an auto-update feature need to be re-downloaded and reinstalled.

  1. Go to Plugins and locate the plugin to update
  2. Click Deactivate. This will not affect your content or settings.
  3. Click Delete and confirm deletion.
  4. Click on Add New and proceed to reinstall the plugin using the new plugin zip you downloaded above.

Update Manually via FTP (Advanced)

If you need to update outside of WordPress for any reason, you can do so by overwritin the child theme folder with the new one via FTP. Your host provides you with FTP file access to your webspace via a free program such as FileZilla, or through your hosting control panel. If this option sounds daunting, see the Reinstall method above.

For best results, deactivate the plugin before doing this.

  1. Download your updated extension file and unzip it to your desktop. You should have a single folder (ex. layers-pro-extension) containing a functions.php and includes folder.
  2. Connect to your site via FTP
  3. Browse to wp-content/plugins and locate the existing folder and delete it.
    • This is very important, as older versions may include files that are in use or have been removed, leading to issues when you attempt to activate the plugin again.
  4. Upload the extension’s  folder you unzipped in step 1 to the plugins folder
  5. You should be asked to confirm overwriting of this folder and its contents. Confirm the overwrite.

 

 

Last Updated: