Format Item Information fields using HTML – Pepperi Support

You can format the Item information fields in the Order Center views to any style, font, color you wish using Pepperi's HTML Custom Field types.

This formatting aligns the catalog even more so with your branding and allows you to fully control the buyer's experience.

In addition, use the Theme Editor, to select colors, fonts and styles for other Web App components.

For example, enlarge and color the item name to emphasize it, and improve readability of the catalog pages:

Format the Item Information page, making it more readable, improving the buyer's experience and making it easier to spot the important details.

This is easy to achieve in Pepperi using custom HTML formatted fields.

The calculation in the HTML field gets the value of the field to be displayed, and then formats it in HTML.

Create a custom field in the Transaction Type you wish to customize the formatting for.

The field is type HTML formatted Text, Calculated Field.

The formula will return a string of html, using the GetValueByApiName function to get the values of the fields you want to display.

Pepperi's professional services can implement this for you if you don't have HTML programming knowledge in your organization.

Here is an example formula that returns the Item name formatted in HTML, as seen in the screenshot of the item thumbnail above:

var style='.fd-item-page-sm__top-title {margin: 0; padding: 0; color: #c95c0d; font-size: 1.4em; line-height: 1.2em; font-weight: bolder; position: absolute; bottom: 0;}';
var html='<html><head><style>'+style+'</style></head><body>';
html+='<h2 class="fd-item-page-sm__top-title" >' + GetValueByApiName("ItemName") + '</h2>';
return html+'</body></html>';

Here is an example formula that returns the item information formatted in HTML seen in the screenshot of the item info page above:

Once you have created the field, position it in the relevant view in the Order Center Views Configuration.

function currencyFormat(num) {
return '$' + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}

//font='html * {font-family: -apple-system, BlinkMacSystemFont, sans-serif;}';
var style='strong {font-size: 110%;}';
style+='.fd-item-page-lg {margin: 0; padding: 0; }';
style+='.fd-item-page-lg__title {color: #c95c0d; margin-bottom: 0.5em;}';
var html='<html><head><style>'+style+'</style></head><body>';
html+='<div class="fd-item-page-lg">';
html+='<h2 class="fd-item-page-lg__title" style="margin-top: 0.25em; font-size: 2.2em; line-height: 1.2em; font-weight: bolder;" > ' + GetValueByApiName("ItemName") + '</h2>';
html+='<hr style="border: solid 1px #e0e0e0; margin: 1em 0;}">';
html+='<p class="body-md">ID: <strong>' + GetValueByApiName("ItemExternalID") + '</strong></p>';
html+='<p class="body-md">Main Category: <strong>' + GetValueByApiName("ItemMainCategory") + '</strong></p>';
html+='<p class="body-md">Product Group: <strong>' + GetValueByApiName("ItemProp1") + '</strong></p>';
html+='<p class="body-md">Secondary Group: <strong>' + GetValueByApiName("ItemProp2") + '</strong></p>';
html+='<p class="body-md">Quality Level: <strong>' + GetValueByApiName("ItemProp5") + '</strong></p>';
html+='<p class="body-md">Case Quantity: <strong>' + GetValueByApiName("ItemCaseQuantity") + '</strong></p>';
html+='<p class="body-md">Packaging: <strong>' + GetValueByApiName("ItemProp3") + '</strong></p>';
html+='<p class="body-md">Quantity Per Package: <strong>' + GetValueByApiName("ItemProp4") + '</strong></p>';
html+='<hr style="border: solid 1px #e0e0e0; margin: 1em 0;}">';
html+='<p class="body-md">Price After Discount: <strong>' + currencyFormat(UnitPriceAfterDiscount) + '</strong></p>';
html+='<h3 class="fd-item-page-lg__title" style=" font-size: 1.8em; line-height: 1.2em;" > ' + GetValueByApiName("ItemTSAPromotionDetails") + '</h3>';
return html+'</div></body></html>';