Create a message box in your product description area

To create a small message box on a product page, you can add some simple code in the Product description editor. 

In your product description area, switch to code view by clicking the icon at the end:

Once in code view, the other toolbar icons is be hidden:

Add the following code to where you'd like the message box to appear:

<div class="note" style="text-align: center;">Your message here</div>

Change Your message here to be the content you want to use inside the box. You can click the same icon again to toggle back to regular edit mode. 

Save the changes and preview your product. 

Sample result:


Variations

If you'd like the text inside the box to be left-justified rather than centred, use this code instead:

<div class="note">Your message here</div>

Another option is to have a background color to make it standout. Use this code for a green message box:

<div class="form-success">Your message here</div>

That will result in:

For a red background:

<div class="form-error">Your message here</div>

That will result in:

Still need help? Contact Us Contact Us