StoreKit Install & Setup

Product Guides  Since: 1.0 Last Updated: Layers ver. 1.6 Time to Read: 10 minutes

The Layers StoreKit plugin extends WooCommerce for your Layers themes, 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 options, you are welcomed to send us a question via the Layers Messenger under your Layers Dashboard.

For help and support for WooCommerce, WooCommerce widgets and the functionality of the Cart or Checkout pages beyond what StoreKit settings do, 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-storekit1-6

1 Menu Cart

This cart displays the current total of items added, and will toggle the “mobile sidebar” when clicked unless the Mini Cart Dropdown is enabled. Check this option to show the cart toggle in your Header Menu (default) or uncheck to hide it. The Menu Cart requires at least one of the following three elements to be enabled to show up:

2 Cart Icon

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

3 Amount

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

4 Product Count

If the Menu Cart option is checked, you may tick this option to show or hide the number of products in the cart. Note that some child themes will hide the amount until a product is added, so test from the shop page by adding a product to the cart.

5  Mini Cart Dropdown

This option is new in StoreKit 1.6 and changes your menu cart from toggling the sidebar into a cart link that when hovered over with your mouse, displays the cart items and checkout button.

The mini cart is not shown on mobile devices (no hover support on touchscreens) but will redirect to the cart page instead. If you do not see the hover preview in the Customizer, Save & Publish, then use the Preview This Page option in the customizer menu to open the page in a new browser tab.

6 Category Image in Header

This option  enables your WooCommerce Category image to fill the page title area when that Category is viewed. To see it in action, browse to a Category page in your shop in the Preview pane. To allow it to appear to fill the entire header zone of your site, you must have Transparent Header enabled in the Header options of Layers.

Category images are set in WooCommerce under Products → Categories by editing a category and clicking the thumbnail icon to browe/upload an image. For best results, use large category images with no embedded text that are at least 2000px wide and 1000px tall.

Choose Small, Medium, or Large to set the approximate height of the header.

Because Layers is responsive, your header height will change based on the width of the screen. It is important to note that the background of the header you set here will only scale relative to the title container size to ensure the image can always fill it. For this reason it is best to use textures, background graphics or ambient photography that does not have embedded text. 

Click Save & Publish and return to the StoreKit options panel by clicking the back arrow in the Customizer Menu:

general-backbutton

 

To see the effects of this section’s options, click your Shop page 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 twice, 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.

Take a moment here to expand the Mobile Sidebar and add the WooCommerce Cart Widget to the top position if you are not using the Mini Cart Dropdown.

When you are finished customizing your sidebar widget setup, click the back arrow and return to the Product List settings.

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 option 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 600px wide for best results (1000px wide if using one column)

Products Per Page

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

Note: this will not affect Categories if you have WooCommerce set to display categories on the main shop page instead of products. Categories are not pageable items in WordPress. To resolve this, ensure BOTH is selected if you want category images shown in the shop before your products with product pagination.

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. Some child themes may already hide this.

“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)

Display Product Images

Show Product Images

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 and click to expand the Product Page options.

Click a product in your catalog in the preview pane so you can see these options take effect. 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. These sidebars work best with WooCommerce widgets.

The same sidebar is shared on the catalog and single view, and some widgets will not display from the single product, such as the Price Filter or Filtered Nav.

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. These are one element in WooCommerce, so if you wish to hide only the SKU and Tags, but show the Categories, you must do so with Custom CSS.

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. Each is described in detail in the following articles:

The following json  file will help you import a demo homepage layout using these and Layers widgets if you do not have a StoreKit-powered child theme.

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.