Text variables for your eCommerce page are set in ACME Back Office under Theme>Website>Text variables. These CSS variables allow you to customize the language displayed on the eCommerce pages. HTML formatting can be used in conjunction with these CSS variables to allow you to further enhance and style this text.


Below we have included some common scenarios and examples of the HTML needed.

TABLE OF CONTENTS

Text Formatting


Style
Base Command
Formatted Example
Result
Bold

<b>

This is <b>Bold</b> TextThis is Bold Text
Italic<i>This is <i>Italic</i> TextThis is Italic Text
Underline<u>This is <u>Underlined</u> TextThis is Underlined Text
Font Color<font color=#HEX>This is <font color=#E25041>Colored</font> FontThis is Colored Font
Font Size<font size=#px><font size=18px>Larger Font</font>
<font size=10px>Smaller Font</font>
Larger Font
Smaller Font
Font Weight<font weight=###>This is <font weight=100>Thin</font> Text
This is <font weight=400>Regular</font> Text
This is <font weight=700>Bold</font> Text
This is <font weight=900>Black</font> Text
Subscript<sub>This is <sub>Subscript</sub> TextThis is Subscript Text
Superscript

<sup>

This is <sup>Superscript</sup> TextThis is Superscript Text
"Quotes"<q><q>Short quote without paragraphs</q>"Short quote without paragraphs"



Layout Formatting

<br> - line break

<p> </p> - start and end a paragraph, with padding in between paragraphs


Embedding Content

Whenever using content in the Theme that has quotes, be sure to use a \ before every quote to keep the JSON valid. The below examples have been formatted with the \ in place for use in the Theme variables. You can also use these examples in other HTML enabled fields, like event template email confirmations, however, the \ should be removed in those areas.


<a href=\"www.url.com\">View target=\"_self\">View more info</a> 

This inserts a link where "View more info" is the link text. Will open in the same tab.

  • <a href="www.url.com">View target="_self">View more info</a>
    Use formatting like this to use in a non-Theme HTML field, like event template email confirmations


<a href=\"www.url.com\">View target=\"_blank\">View more info</a>
In this example, the link will open in a new tab (aka blank target)



Embed a Photo




Embed a Video

Get the embed code from where your video is hosted (e.g. Vimeo or YouTube) and paste it in. Add a \ before every quote for use in the Theme.


<iframe src=\"https://player.vimeo.com/video/337876567\" width=\"640\" height=\"360\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen></iframe>


Resources

If you want to explore more advanced HTML options, we have found the following resources helpful: