Building a custom badge 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