If you're new to working with JSON, we recommend that you contact us to integrate with your theme.

Abra uses a JSON schema to configure your Abra blocks. You can change your global schema to integrate better with your theme and create richer online store experiences for buyers.

These customizations will apply to every promotion.

Getting started

Before changing your JSON schema, we recommend that you:

1. Create a backup of your schema

2. Validate your changes in a JSON validator

To change your schema, go to the "Settings" page and then select "Edit JSON file". You'll see a default schema in the code editor.

At any point, you can revert to the latest default for your theme by clicking "Revert to default".

The schema uses the outline shown below. You can replace the capitalized placeholders with the values found in the table under the example.

{
  "schema": {
    "TEMPLATE": {
      "BLOCK_ID": {
        "type": "BLOCK_TYPE",
        "PROPERTY_NAME": "PROPERTY_VALUE"
      }
    }
  }
}

Example

A promotion using a popup block in the schema.

{
  "schema" {
    "all" {
      "dd1627cb-428e-4b7d-bc05-dd96cc6cb50a": {
        "type": "popup",
        "persistentState": true,
        "states": [
          {
            "state": "DEFAULT",
            "text": "20% APPLIED"
          }
        ]
      }
    }
  }
}

Blocks

Blocks are the pieces nested within the template in your schema. There are 3 types of blocks:

1. Object block - dynamically access an object and update some HTML

2. Element block - render elements and customize block content from your promotion

3. Method block - manipulate different parts of your storefront with these helpers

Product object block

Only applies when the product is eligible for the active promotion.

The product block allows you to replace a block of HTML with new HTML. You have access to the product context in the new HTML.

Block properties

Liquid variables

Selected variant and selling plan liquid variables

When using the above liquid variables to update the product price, it is recommend to use them in conjunction with selected variant and selling plan liquid variables to show the price of a specified product variant.

Example: Product template

Change your product detail template .price element to include the final price and a slashed compare at price.

{
  "schema": {
    "all": {
      "main-product-price": {
        "type": "product",
        "selector": ".price",
        "html": "<div class=\"price\"><div class=\"price--sale\">{{ selected_variant.final_price }}</div><div class=\"price--regular\"><s>{{ selected_variant.compare_at_price }}</s></div></div>"
      }
    }
  }
}

Example: Collection template

Change your collection template product card .price element to include the final price and a slashed compare at price.

{
  "schema": {
    "all": {
      "collection-product-price": {
        "type": "product",
        "container": ".product-card",
        "selector": ".product-card .price",
        "html": "<div class=\"price\"><div class=\"price--sale\">{{ selected_variant.final_price }}</div><div class=\"price--regular\"><s>{{ selected_variant.compare_at_price }}</s></div></div>"
      }
    }
  }
}

Cart object block

Only apply when an item within the cart is eligible for the active promotion.

The cart block allows you to replace a block of HTML with new HTML. You have access to the cart context in the new HTML.

Block properties

Liquid variables

Example

Update the subtotal of your cart drawer and add the total discount

{
  "schema": {
    "all": {
      "cart-drawer-subtotal": {
        "type": "cart",
        "selector": "#CartDrawer .cart-drawer__footer .totals__subtotal-value",
        "html": "<p class=\"totals__subtotal-value\">{{ final_subtotal_price }} (-{{ total_discount }})</p>"
      }
    }
  }
}

Cart item object block

Only apply when the item is eligible for the active promotion.

The cart-item block allows you to replace a block of HTML with new HTML. You have access to the cart item context in the new HTML.

Block properties

Liquid variables

Example

Change your cart item to show the final price and slash the original price

{
  "schema": {
    "cart": {
      "cart-item-pricing": {
        "type": "cart-item",
        "item": "#cart .cart-item",
        "selector": "div.product-option",
        "html": "<div class=\"product-option\">{{ final_price }} <div class=\"cart-item--regular-price\">{{ original_price }}</div></div>"
      }
    }
  }
}

Announcement bar element block

The announcement-bar block allows you to show and update the content of your announcement bar.

Block properties

Block state properties

A block state allows you to show different content based on the state of the promotion and discount.

Liquid variables

Example

Showing an announcement bar with a gift icon and some text.

{
  "schema": {
    "all": {
      "gift-announcement-bar": {
        "type": "announcement-bar",
        "persistentState": true,
        "states": [
          {
            "icon": "gift",
            "state": "DEFAULT",
            "text": "FREE GIFT ON ORDERS OVER $50"
          }
        ]
      }
    }
  }
}

Banner element block

The banner block allows you to show and update the content of your banner.

Block properties

Block state properties

A block state allows you to show different content based on the state of the promotion and discount.

Liquid variables

Example

Showing a banner with a discount icon and some text.

{
  "schema": {
    "all": {
      "gift-banner": {
        "type": "banner",
        "name": "default",
        "persistentState": true,
        "states": [
          {
            "icon": "discount",
            "state": "DEFAULT",
            "text": "FREE GIFT ON ORDERS OVER $50"
          }
        ]
      }
    }
  }
}

Popup element block

The popup block allows you to show and update the content of your popup.

Block properties

Block state properties

A block state allows you to show different content based on the state of the promotion and discount.

Liquid variables

Example

Showing a popup with some text

{
  "schema": {
    "all": {
      "custom-popup": {
        "type": "popup",
        "persistentState": true,
        "states": [
          {
            "state": "DEFAULT",
            "text": "{{ code }} APPLIED"
          }
        ]
      }
    }
  }
}

Hide method block

The hide block allows you to hide an element when the promotion is active.

Block properties

Example

Hiding your footer element.

{
  "schema": {
    "all": {
      "hide-footer": {
        "type": "hide",
        "selector": ".footer"
      }
    }
  }
}

Add class method block

The add-class block allows you to add a class to an element when the promotion is active.

Block properties

Example

Adding a vip-customer class to the body element.

{
  "schema": {
    "all": {
      "vip-customer-style": {
        "type": "add-class",
        "selector": "body",
        "value": "vip-customer"
      }
    }
  }
}

Remove class method block

The remove-class block allows you to remove a class to an element when the promotion is active.

Block properties

Example

Removing a hidden class from a navigation item.

{
  "schema": {
    "all": {
      "show-special-nav-item": {
        "type": "remove-class",
        "selector": ".nav .nav-item--vip",
        "value": "hidden"
      }
    }
  }
}

Theme examples

See our GitHub repository for more examples.