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.

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.

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.

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)

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.

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.