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 |
| This is <b>Bold</b> Text | This is Bold Text |
| Italic | <i> | This is <i>Italic</i> Text | This is Italic Text |
| Underline | <u> | This is <u>Underlined</u> Text | This is Underlined Text |
| Font Color | <font color=#HEX> | This is <font color=#E25041>Colored</font> Font | This 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> Text | This is Subscript Text |
| Superscript |
| This is <sup>Superscript</sup> Text | This 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.
Embed a Link
<a href=\"www.url.com\" 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" 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\" target=\"_blank\">View more info</a>
In this example, the link will open in a new tab (aka blank target)
Embed a Photo
<img src=\" put link here \"> - just an image, which will display at it's full hosted size
<img src=\" put link here \" alt=\"The hover text\"> - image with hover text defined
<img src=\" put link here \" alt=\"The hover text\" style=\"width:300px; height:300px;\"> - image at a defined window size, with hover text defined
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: