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.

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!

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

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

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.

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

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.

Content Alignment

Select your desired alignment for your image.

Text

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.

To set images for your categories, go to Products → Categories 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.

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

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.

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.

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:

• Layers Plus
• Pricing Table Layers Extension
• Gallery Mojo

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 DASHBOARD → UPDATES 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.