custom-icon_hamburger
custom-icon_home
custom-icon_account
custom-icon_dashboard
custom_icon-settings

WELCOME TO YOUR DASHBOARD

Home

Community

My Products

Settings

Categories

Instructions

Categories Instructions

Features of your new Categories Plug-In

An accordion that can appear either on the left-hand side or top of your store page.

Easily defined using the built-in SquareSpace editor.

Composed of themes chosen by you.

These are the topics under which you sort your products. When clicked, these themes expand to display all of your pre-defined categories.

Custom multi-select intelligent filtering.

The products on your page will be filtered based on selected categories, disabling options with no associated product.

Dynamic to your product page.

Add as many products as you want and they will be appropriately added to the multi-select categories according to their associated themes.

Implement your new Categories Plug-In

Follow these simple steps to add the Cateogies Plug-In to your website. The process involves inserting custom code and selecting product themes & categories.

01

Insert code into your website

Add the required scripts to your website’s header and footer

02

Categorize products

Tag each product with one or many theme#category pairs.

01 Insert code into your website

Step 1: Navigate to Custom Code

  1. In the left menu, select “Website” > “Pages”.

  2. At the bottom of the left menu, select “Custom Code” > “Code Injection”.

Header Script

Step 2: Add Scripts

  1. Into the HEADER text box, paste the header script

  2. Into the FOOTER text box, paste the header script

<script src="https://www.lemonsiteshop.com/s/carousel_header_live.js"></script>

Footer Script

<script src="https://www.lemonsiteshop.com/s/carousel_live_v1-4.js"></script>

‍ ‍Note that you may have been provided a slightly different purchase.

02 Categorize Products

On the page you would like to add the Carousel Plug-In, add a new section.

1

5

4

Navigate to your store

In the page navigation panel, click the chevron (>) to enter your store page.

2

Identify product categories

Scroll to the “Organization” section, under which you will see “CATEGORIES”. Click the “>”. Select an existing category (or categories) or create a new one.

Categorize!

Select an existing category (or categories) or create a new one. New categories must be formatted as follows:

  • The first word is the name of the accordion (theme) under which you would like the category to appear.

  • The second rod is the name of the category under which your product falls.

  • The first and second words must be separates by a ‘#’.

  • Examples: color#red and color#blue are two categories (red and blue) under one theme (color) | type#plate, type#cup, and type#bowl are three categories (plate, cup, bowl) under one theme (type). A products can be assigned any number of categories and themes!

List all products

Click the “All” to list all of your products.

3

Edit a product

Edit a products by clicking the three dots, and then select “EDIT”

Enter editing mode by clicking the EDIT button in the top left corner of the page.

Add image clusters

Each cluster consists of images and text blocks that work together to create your carousel content.

1

Add Image Blocks

Add 1-2 "Image" blocks per cluster, a primary image and/or a secondary "on-hover" image.

2

Add Text Blocks

Add 1-3 “Text” blocks per cluster, two captions and/or a tag.

3

Repeat for Multiple Clusters

You may add as many clusters as you wish.

> Image block requirements

A left image

This is the primary image that will appear in the carousel.

A right image (optional)

This is the secondary image that replaces the primary (left) image when the user hovers with their cursor. If this second image is excluded, then only the primary image will appear. This image must appear to the right of the primary image, and must be situated closest in proximity and vertical space to its associated primary image than the other images in other clusters.

> Text block requirements

Caption 1 (required)

This is the primary caption to the image. The formatting you choose for this caption will determine its appearance. This caption must be located closest to its respective cluster, and situated above the optional secondary caption. If you do not want a caption, simply include a text block with a space.

Caption 2 (optional)

This is the secondary caption to the image. The formatting you choose for this caption will determine its appearance. This caption must be located closest to its respective cluster, and situated below the primary caption.

Tag (optional)

This is the name given to another page in your website to which the user will be directed when the "Learn More" button is clicked. The tag must lead with a "#", and if excluded, the "Learn More" button will not appear.

> Important guidelines

  • You may delete any items that are "optional." If you delete any required item, then that cluster will not appear.

  • You may add as many clusters as you wish.

  • As you add clusters, ensure that the items within that cluster are situated as described above. The plug-in works so that items situated closest are identified as belonging to that cluster.

  • The font styles and colors follow those specified by the section within which they are situated. If you would like to change the theme, simply edit your styles. Specifically, the progress bar is linked to the colors for "Toggle Color - on" and "Toggle Color - off"