Learn how to implement styles in the Salesforce Lightning Design System to control the appearance of text.

Using Salesforce Lightning Design System (SLDS) styles, admins have some control over the appearance of text in the CPQ configurator UI. Note that this functionality is not fully supported and may be limited in a number of scenarios. Consult this Salesforce documentation for the available SLDS styles.

Due to the lack of complete support, utilizing an SLDS class will affect everything in the field. That means if you use “slds- text-title_bold”, everything in the field will be bolded. Therefore, consider whether you can use SLDS styling for your use case, as a new field will need to be created for us to insert the class and isolate the styling. A good use case as a result is using styles to make headers, and weʼll use that as the basis for this article.

If we want to make a header using SLDS, the first step is to identify which field(s) you want a header for, and make sure theyʼre displayed in the layout. Then, from the layout screen, navigate to the field and remove its label. This will leave you with just the fieldʼs variable name.

Next, create a new text field and give it some text. This new field will be placed above the existing field and essentially act as its “header”. Place it in the layout and remove its label. Your layout should resemble this example.

Finally, in the layout, hover over the new field you created that will act as the header, and click the gear to bring up the Field Properties. For Class Name, add the desired SLDS class. In this example, we have used slds-text-heading_large.

Redeploy your blueprint and youʼre done. Open an applicable product in the configurator to see the result.