How to Customize Font and Text in the Size Chart Modal
The size chart modal in your Staytuned app can be personalized to better suit your brand’s look and feel. This includes changing the font of specific text areas and editing the displayed text content. Below, we outline the steps to achieve these customizations.
Customizing Fonts Using CSS
To change the font family for text within the size chart modal, you can apply custom CSS. Follow the example below to target different areas of the modal:
For Text Above and Below the Chart: Use the
.ks-modal-content-wrapperselector to apply a custom font to all text outside of the chart table.
.ks-modal-content-wrapper * {
font-family: <font-family>, sans-serif !important;
}Replace <font-family> with your desired font family name (e.g., Arial, Georgia, etc.). This will apply to all text content in the modal except the size chart table itself.
For Text Inside the Chart Table: Use the
.ks-tableselector to style the table content specifically. An example looks like this:
.ks-table {
font-family: <font-family>, sans-serif;
}By using these CSS rules, you can ensure that the texts within and surrounding the chart adopt your preferred style.
Editing Text Content via the Editor
If you want to modify the header or subtext of the size chart modal (e.g., to update the title or add a note), you can do so through the app’s theme editor:
Open the size chart settings within the Staytuned app.
Locate the fields for modal header and subtext.
Update the text in these fields to your preference.
Save your changes, and the updated text will appear in the size chart modal when viewed by users.