Ido Hershkovits profile picture

Ido Hershkovits

Technical Designer

,

June 8, 2022

Custom badge using Multi-state box.

Follow along with Technical Designer Ido Hershkovits as he explains how to create a custom badge for an Editor X product page using a Multi-state box.

How to create custom badges using a Multi-state box.

Before you get started.

For this example, we’ll be working on an Editor X online store. In this case, a flower shop. To follow the steps we’ve provided for this site, simply open the template in the editor from the link provided above.

Part 1: Prepare the product page.

To display the product badge in a position relative to the product page, make these adjustments:


  1. Navigate to the product page from the pages dropdown

  2. Select the section that contains the product, then open the Inspector panel

  3. Change the section’s padding to 120px on the top, left and right

  4. Click Apply Grid in the floating action bar and add a 3 column grid

  5. Click Advanced Mode, then click the top bar of the middle grid column

  6. Change the middle column’s width property to min/max

  7. Set the maximum width to 1440px and the minimum to auto

  8. Click Done

  9. Select the product element and open the Inspector panel again

  10. Under Location in grid cells, click the middle cell

  11. Scroll down in the Inspector panel and change all margins to zero

Part 2: Create the first state.

  1. Click Dev Mode at the top of the editor, then Turn on Dev Mode

  2. Close the IDE by clicking the minimize icon in the top right of the panel

  3. Open the Add panel, click Layout tools and drag the Multi-state box option onto the canvas

  4. Delete one of the states by clicking Manage States. Then select one of the states, click the three dots beside it and hit Delete

  5. Select the Multi-state box, open the Inspector panel and change its width to 160px

  6. Select the state itself and change its height to 160px

  7. Click on the design tab icon in the Inspector panel and remove the box’s background color by setting the background opacity to zero

  8. Select the Multi-state box from the breadcrumbs and repeat step 7 to remove the background color of the box

  9. Dock the Multi-state box to the top and left and set the top and left margins to -80px

  10. From the Media menu in the Add panel, drag the “out of stock” vector image into the Multi-state box container

  11. From the Inspector panel, center the image and set its width to 100%

Part 3: Create the remaining states.

  1. Select the Multi-state box

  2. Click Manage States

  3. Select the existing state, and click the Duplicate State button twice to create two more states with the properties you created in Part 2

  4. Select the second state in the list of states

  5. Change the vector image to the “on sale” image

  6. Select the third state in the list

  7. Delete the vector from this state in order to add dynamic content to this state

  8. Select the state container and open the Inspector panel

  9. Change its background color to black from the design tab and create a circle by changing its corner sizes to 999px each

  10. From the Assets menu, drag the stack into the state container

  11. Open the Adjust section at the bottom of the Inspector panel and change the container’s rotation to -25%

Part 4: Customize the state IDs.

  1. Click Manage States

  2. Click on the first state, click the three dots beside it and click Rename

  3. Change its name to “outofstock” and click Done

  4. Repeat step 2 for the second state

  5. Change its name to “onsale” and click Done

  6. Repeat step 2 for the third state

  7. Change its name to “xleft” and click Done

  8. Select the text element containing the X on the final state

  9. Click the Properties and Events icon at the bottom of the screen to open the IDE

  10. From this panel, rename the text element ID “quantity”

Part 5: Add conditions via code.

  1. Select the Product Page from the pages dropdown

  2. Paste the following code into the code panel, after the onReady function:

$w(‘#productpage1’).getProduct().then((product)=>{

if (!product.InStock){

$w(‘#multistatebox1’).changeState(‘outofstock’);

$w(‘#multistatebox1’).expand();

}else if (product.quantityInStock < 6){

$w(‘quantity’).text = product.quantityInStock.toString();

$w(‘#multistatebox1’).changeState(‘xleft’);

$w(‘#multistatebox1’).expand();

} else if (product.discountedPrice < product.price){

$w(‘#multistatebox1’).changeState(‘onsale’);

$w(‘#multistatebox1’).expand();


Hit Publish in the top right of the editor to apply this code to the site

Part 6: Test the setup using your dashboard.

  1. Click Site in the top bar of the editor, then Dashboard

  2. Click Store Products, then Products

  3. Click on the Bliss Tulip product

  4. Scroll down to the Manage variants section and click Edit

  5. For both the large and small variants, click the Status dropdown and choose Out of stock

  6. Click Apply, then click Save in the top right

  7. Visit the live version of the product page to confirm that the “out of stock” badge is now displayed

How to create custom badges using a Multi-state box.
Before you get started.
Part 1: Prepare the product page.
Part 2: Create the first state.
Part 3: Create the remaining states.
Part 4: Customize the state IDs.
Part 5: Add conditions via code.
Part 6: Test the setup using your dashboard.
Ido Hershkovits profile picture

Ido Hershkovits

Technical Designer

I’m a web developer and Editor X specialist based in Tel Aviv. I work closely alongside the Editor X marketing team as a coding and responsive design expert. In my spare time, I’m a passionate musician and producer.

Did you find this lesson helpful?

Thank you for your feedback!

Related learning resources.

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Code & Dev
Arrow down icon
Collaboration
Arrow down icon
VIDEO TUTORIALS
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.

See all results ▶