Shopletzy Theme Elements

A concise guide to JSON elements for building interactive and visually appealing e-commerce interfaces with Shopletzy.

This guide provides an in-depth look at the various JSON elements used in Shopletzy theme development. Each element is crucial for creating a dynamic and engaging user interface for an e-commerce platform.

Container

A versatile element that acts as a parent to other elements, organizing the layout and flow of the theme. "type": "container"

Usage:

{
    "type": "container",
    "className": "container",
    "sections":{
        // Child elements go here
    }
}

Output:

Text

A simple element that displays text on your theme. For example, you can use it to show an address or any other information. "type": "text"

Usage:

{
    "type": "text",
    "text": "Your text goes here",
    "className": "text",
}

Image-button

A clickable button that combines an image and text. You can use this to create visually appealing call-to-action buttons like an ‘Edit’ button with an icon. "type": "image-button" Usage:

{
    "type": "image-button",
    "text": "Add to cart",
    "url": "image url",
    "className": "image-button",
}

Output:

Button

The classic clickable button, often used to prompt users to take an action, such as “Shop Now”. It’s essential for guiding users through your site’s flow. "type": "button"

Usage:

{
    "type": "button",
    "text": "Add to cart"
    "className": "button"
}

Output:

Image

This element is used to display a static image. You can use it to enhance the visual appeal of your theme or to showcase products. "type": "image"

Usage:

{
    "type": "image",
    "url": "image url",
    "className": "image-view"
}

Output:

Product-image

A specialized image type that’s dynamically linked to the first image of a product in your store. It’s great for highlighting products directly in the theme. "type": "product-image"

Usage:

{
    "type": "product-image",
    "url": "{{product.images[0]}}",
    "className": "product-image-view"
}

Output:

Heading

Headings are used to define the hierarchy of your content, with h1 being the highest level. They’re crucial for both readability and SEO. {“type”: “heading”, “level”: “h1”}

Usage:

{
    "type": "heading",
    "level": "h1",
    "text": "H1 Your heading goes here",
    "className": "product-image-view"
}

Input

Input fields allow users to enter data, such as text, numbers, etc. They are essential for capturing user input in various parts of your theme, including search location, search products, and account creation pages.

Usage:

{
    "type": "input",
    "placeholder": "Enter your state",
    "bind": "addressEditor.state",
    "className": "input"
}

In this example, users can enter their state in an input field, and the value will be bound to the addressEditor.state variable.

List of Bind:

Bindings connect input fields to specific data sources or variables. When a user interacts with an input field, the value they enter is stored in the bound variable. List of Bind:

searchLocation: Used for location search (e.g., autocomplete input field for street names, cities).
searchProducts: Used for product search.
login.email: Binds to the email or mobile number input field for login and top verification.
login.signupFullName: Binds to the full name input field during account creation.
login.signupEmail: Binds to the email address input field during account creation.
login.signupMobile: Binds to the mobile number input field during account creation.
login.signupMobileOTP: Binds to the input field for entering mobile OTP.
login.loginOTP: Binds to the input field for entering email OTP.
addressEditor.fullName: Binds to the input field for entering the user’s full name for address details.
addressEditor.houseName: Binds to the input field for entering the house name of the delivery address location.
addressEditor.addressLine: Binds to the input field for entering the address line of the delivery address location.
addressEditor.landmark: Binds to the input field for entering a landmark associated with the delivery address.
addressEditor.area: Binds to the input field for entering the area of the delivery address location.
addressEditor.city: Binds to the input field for entering the city of the delivery address location.
addressEditor.zipcode: Binds to the input field for entering the zip code of the delivery address location.
addressEditor.state: Binds to the input field for entering the state of the delivery address location.

Search products

The search-products component allows users to search for products on your website. It provides a search input field where users can enter their query and find relevant products.

Usage:

    "search": {
    "type": "search-products",
    "className": "search",
    "sections": {
        "pinGrayIcn": {
        "type": "image",
        "url": "{{themeUrl}}/img/mobile/mSearch.png",
        },
        "input": {
        "type": "input",
        "placeholder": "Search for products",
        "bind": "searchProducts",
        "action": "searchProducts",
        }
    },
    "order": [
        "pinGrayIcn",
        "input"
    ]
    }

Explanation

The search-products component consists of an image (search icon) and an input field.
The bind attribute connects the input field to the searchProducts parameter.
When the user enters a query and presses Enter, the action attribute triggers the search functionality.

Category collection

The “category-collection” type is used to list categories on your e-commerce website.
You can add or update categories directly from the Shopletzy platform.

Usage:

    "collection": {
        "type": "category-collection",
        "className": "collection"
    }

Product collection

The “product-collection” type is used to display a list collection of products.
You can add or update product collection directly from the Shopletzy platform.

Usage:

   "top-products": {
        "className": "top-products",
        "type": "product-collection",
        "highlightKey": "Top Picks"
    }

"type": "product-collection": Indicates that this section will display a collection of products. "highlightKey": "Top Picks": Specify the type of product collection.

Pre-listed highlightKey are Top Picks, Best Sellers, Whats New.

Product pan pinch

The “product pan pinch feature enhances the product detailed page by allowing users to view multiple images of a product with zoom options. It provides an interactive way for users to explore product images in detail.

Usage:

Type: "type" : "product-pan-pinch"
- This type is used to display the product image in detail.
- Users can click on the image to zoom in for a closer view.
Customization in product-pan-pinch.json:
- In the product-pan-pinch.json file, you can customize the following aspects:
  - Product Image: Adjust the appearance and layout of the product image.
  - Thumbnails: Customize the thumbnails that appear alongside the main image. "type" : "product-thumbnail"
  - Pinch Zoom: Configure the pinch zoom functionality for a seamless zoom experience. "type" : "product-zoom"

Example:

Markdown

Markdown is a lightweight markup language that allows you to format text without using HTML tags. It’s commonly used for creating content on product description, blogs, and so on.

Usage:

{
    "type": "markdown",
    "text": "{{product.description}}",
    "className": "product-description"
}

The Content Display component is used to show various views, such as modals or drawers, within your Shopletzy theme. Let’s break down its usage:

The type property should be set to "type": "modal".
Use modals to display views like login forms, location selection, or other temporary overlays.

Usage:

"contentDisplay": {
    "type": "modal"
}

Drawer

The type property should be set to "type": "drawer".
Drawers are suitable for showing persistent views like a shopping cart, login panel, or address input.
You can specify the placement option to control where the drawer appears ( right, left, bottom, or top).

Usage:

"contentDisplay": {
    "type": "drawer",
    "placement": "left"
}

Address list

The address list has the following properties:

"type": "address-list": Specifies that this field represents an address list.

"mode": "select": Indicates that the user can select an address from the list.

Usage:

    {
        "addressInfo": {
            "type": "address-list",
            "className": "addressInfo",
            "mode": "select"
        }
    }

Address editor

Address Editor Overview:

The "type": "address-editor" in Shopletzy allows users to add new customer addresses. It’s a crucial part of any e-commerce platform, ensuring accurate shipping and billing information.
In your case, the address editor should retrieve place details (such as city, state, and pincode) based on the user’s input.

Usage:

{
    "type": "address-editor",
    "className": "addressEditor"
}

Using “location-selector” Type:

To implement the address editor, you’ll use the "type": "location-selector" field.
When users interact with this field, they can either get their current location or search for a specific location from a dropdown list.
The address fields (e.g., house name, address line, landmark, area, city, zipcode, and state) will be updated based on the selected location

Binding Address Fields:

You mentioned using bind keys. These are essential for connecting the address editor to the relevant data.
Here’s how you can set up the binding for the address fields:
- addressEditor.houseName: Bind this to the user’s input for the house name.
- addressEditor.addressLine: Bind this to the address line.
- addressEditor.landmark: Bind this to any landmark information.
- addressEditor.area: Bind this to the area or locality.
- addressEditor.city: Bind this to the selected city.
- addressEditor.zipcode: Bind this to the user’s input for the postal code.
- addressEditor.state: Bind this to the state information.

Example Usage of bind:

    {
        "inputField": {
            "type": "input",
            "bind": "addressEditor.fullName",
            "placeholder": "Your Full Name",
            "className": "inputFullName"    
        }
    }

Location Selector Configuration:

In your theme configuration, define the location selector as follows:

Usage:

    "deliveryLocation": {
        "type": "location-selector",
        "refTemplate": "address-location-selector",
        "bind": "addressEditor.placeDetails",
        "mode": "placeDetails"
    }

“refTemplate”: Refers to a predefined template for the location selector.
”bind”: Connects the selected location details to the addressEditor.placeDetails.
”mode”: Specifies the mode (e.g., place details) for the location selector.

Add to cart

Add to Cart Overview:

The "type": "add-to-cart" element is used to add products to the cart.
It’s a crucial component for e-commerce platforms, allowing users to purchase products with ease.
The add-to-cart element can be customized to suit your theme’s design and functionality.

Usage:

{
    "type": "add-to-cart",
    "className": "add-to-cart"
}

Embedded Template fo add to cart:

The add-to-cart element can be embedded within a template to ensure a consistent design across your theme.
you can customise the product quantity increament and decreament button. For increament button you can use "actions": "addToCart" and for decreament button you can use "actions": "removeFromCart".

Usage:

    "add-to-cart": {
        "type": "add-to-cart",
        "embeddedTemplates": {
            "cartEmpty": {
                "type": "button",
                "text": "Add To Cart",
                "action": "addToCart"
            },
            "cartNotEmpty": {
                "type": "container",
                "sections": {
                    "minus": {
                        "type": "text",
                        "text": "-",
                        "action": "removeFromCart"
                    },
                    "items": {
                        "type": "text",
                        "text": "{{product.quantity}}"
                    },
                    "plus": {
                        "type": "text",
                        "text": "+",
                        "action": "addToCart"
                    }
                },
                
                "order": ["minus", "items", "plus"]
            }
        }
    }

Initialization Step login.step = ‘init’:
- At this stage, the user can decide whether they want to log in or create a new account.
- Use a button with the following properties:
```
"loginWithEmail": {
    "type": "button",
    "text": "Login",
    "action": "loginWithOTP" // or use "signup" for sign-up
}
```
Login Step login.step = ‘login’:
- If the user chooses to log in:
  - Provide an input field where the user can enter their email or mobile number (bind: "login.email").
  - If the email or mobile is not registered, show an error message using:
```
"showIf": "login.error",
"text": "{{login.error.message}}"
```
  - Use a button with the action "sendLoginOTP" to send an OTP.
Verification of Existing Customer:
- If the user is already registered:
  - After receiving the OTP via email or mobile, provide an input field for entering the OTP (bind: "login.loginOTP").
  - Use a button with the action "verifyLoginOTP".
New Customer Sign-Up:
- If the user is a new customer:
  - Collect the full name (bind: "login.signupFullName") and email (bind: "login.signupEmail").
  - Use a button with the action "sendSignupOTP" to verify the customer’s account via email.
  - After successful email OTP verification, prompt the customer to verify their mobile number.
  - Provide an input field for entering the mobile number (bind: "login.signupMobile").
  - Use a button with the action "sendMobileOTP" to send an OTP to the mobile number.
  - Finally, ask the customer to enter the received OTP in another input field (bind: "login.signupMobileOTP").
  - Use a button with the action "verifyMobileOTP" to complete the sign-up process.

Cart item list

"type": "cart-item-list": Specifies that this section will display a list of items in the cart.

Usage:

    "cartList": {
        "type": "cart-item-list",
        "className": "cart-items"
    }

Add-on groups

Addon Group Purpose:

The "type": "addon-groups" is used to display product addon items. For example, if a customer adds a “Fried Mushroom with Corn Cheese Pizza” to their cart, the addon group will show additional items related to the pizza size (e.g., small, medium, large).

Customization in addon-selector.json:

You can customize the addon group in the addon-selector.json trigger folder.

Usage Example: Here’s an example of how the addon group is structured in your theme

    "showWarning": {
        "type": "text",
        "text": "Show Warning",
        "showIf": "{{addonGroup.maxSelection}}",
        "actionParams": {
            "showWarning": true
        }
    }

Addon Styling:

The addon group contains individual addons. Each addon has its own styling options.
The tick section represents a checkbox or indicator for the addon. You can define different styles based on whether the addon is selected or disabled.
The title section displays the addon title. Again, you can customize the styles for selected and disabled addons.

Show Warning Message:

To show a warning message based on the maximum selection of the addon group, you can use JSONata expressions.
In your addon-selector.json, add the following section

"showWarning": {
    "type": "text",
    "text": "Show Warning",
    "showIf": "{{addonGroup.maxSelection}}",
    "actionParams": {
        "showWarning": true
    }
}

Addon Properties:

addon.selected: Used to style the selected addon item inside the styleIf condition.
addon.disabled: Used to style the disabled addon item inside the styleIf condition.
addon.title: Used to display the title of the addon group.
addon.price: Used to display the price of each addon item.

Order list

Order List:
- The "type": "order-list" is used to retrieve a list of orders placed by customers.
- Usage: To get the order list, use "type": "order-list".
Order Detail:
- The order detail provides comprehensive information about a customer’s order. It includes:
- Usage: To retrieve order details, use "type": "order-detail".
  - Delivery address "text": "{{orderDetail.pickupAddress}} and you can able to breakdown see the pickup address like addressLine1, area, city, state, zipcode, country.
  - Order item list "type": "order-item-list"
  - Order payment method (online or COD) "text": "Paid via: {{orderDetail.payment.mode}}",
  - Order status (e.g., Awaiting fulfillment, Awaiting pickup, shipped, completed, returned)
  - Total order value "text": "₹{{orderDetail.billing.toPay}}"
- For order status, you can access it using "text": "{{orderDetail.status}}".
Order Item List:
- The order item list displays the products included in an order.

Promotion list

Get the Promo Code List:
- To retrieve the promo code list, use the following json code snippet:
```
"type": "promotion-list"
```
- This will fetch the list of available promo codes.
Retrieve a Promo Code:
- To get a specific promo code, use the following json code snippet:
```
"text": "{{ promotion.code }}"
```
- Replace "{{ promotion.code }}" with the appropriate variable or context where you want to display the promo code.
Check Promo Code Eligibility:
- To verify whether a promo code is eligible, use the following json condition:
```
"showIf": "promotion.eligible"
```
- This condition will determine whether the promo code meets the eligibility criteria.

Template

Template Overview:

The "refTemplate": "element name" element is used to define a template that can be reused across your Shopletzy theme.
Templates are essential for maintaining consistency in your theme design and functionality.
You can create custom templates for various components like header, footer, cart item, product cards, banners, or modals.

Usage:

    "content": {
        "type": "cart-item-list",
        "refTemplate": "cart-item"
    }

Lottie

Lottie Animation Overview:

Lottie is a library that renders After Effects animations in real-time.
It’s a powerful tool for creating interactive animations on your website.
You can use Lottie animations to enhance the visual appeal of your theme and engage users.

Usage:

    {
        "type": "lottie",
        "src": "your lotie animation url"
    },

Lottie Animation Properties:

"type": "lottie": Indicates that this element will display a Lottie animation.
"src": "animation url": Specifies the URL of the Lottie animation file.

Delivery slot list

Here we have delivery slot type fixed and flexible delivery slot.

Usage:

    "deliverySlot": {
        "type": "delivery-slot-list",
        "className": "deliverySlot",
        "mode": "fixed"
    }

Fixed Delivery Slot:

The fixed delivery slot is a predefined time slot for delivery. It’s suitable for users who want to receive their orders at a specific time.
You can customize the fixed delivery slot based on your business requirements at shopletzy app.
You get slot name, slot time, slot closed and slot selected using {{deliverySlot.name}}, {{deliverySlot.formattedDate}}, {{deliverySlot.isClosed}}, {{deliverySlot.selected}} respectively.

Flexible Delivery Slot:

The flexible delivery slot allows users to based business days. example: if you have a business day from Monday to Friday, you can set the delivery slot for these days.
You can customize the flexible delivery slot based on your business requirements at shopletzy app.
You get slot name, slot time, slot closed and slot selected using {{deliverySlot.formattedDate}}, {{deliverySlot.isClosed}}, {{deliverySlot.selected}} respectively.

Post

Post Overview:

The "type": "post" element is used to display blog posts on your e-commerce website.
Posts are essential for sharing valuable content with your audience, such as product updates, industry news, or how-to guides.
You can create and manage posts directly from the Shopletzy platform.

Usage:

    "post": {
        "type": "post",
        "className": "post"
    }

Post collection

Post Collection Overview:

The "type": "post-collection" element is used to display a collection of blog posts on your e-commerce website.
Post collections are essential for showcasing a series of related posts, such as product updates, product made, or how-to guides.
You can create and manage post collections directly from the Shopletzy platform.

Usage:

    "postCollection": {
        "type": "post-collection",
        "className": "postCollection"
    }

"collection": "featuredPosts" to get the featured post collection

Config Get User Location

Shopletzy Theme Elements

Container

Text

Image-button

Button

Image

Product-image

Heading

Input

List of Bind:

Search products

Explanation

Category collection

Product collection

Product pan pinch

Markdown

Content Display - Modal / Drawer

Modal

Drawer

Address list

The address list has the following properties:

Address editor

Address Editor Overview:

Using “location-selector” Type:

Binding Address Fields:

Location Selector Configuration:

Add to cart

Add to Cart Overview:

Embedded Template fo add to cart:

Account login

Cart item list

Add-on groups

Addon Group Purpose:

Customization in addon-selector.json:

Addon Styling:

Show Warning Message:

Addon Properties:

Order list

Promotion list

Template

Template Overview:

Lottie

Lottie Animation Overview:

Lottie Animation Properties:

Delivery slot list

Fixed Delivery Slot:

Flexible Delivery Slot:

Post

Post Overview:

Post collection

Post Collection Overview: