How to Customize Font and Text in the Size Chart Modal
The size chart modal inside Kiwi Sizing 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.
Additionally, you can customize the overall appearance of the size chart modal, such as icon sizes and spacing, to ensure it aligns seamlessly with your store's design.
Change text styles with built-in settings (try this before CSS)
Many font and size changes have a built-in setting — no code required. Check these first:
Size-chart link (the clickable link text on the product page): Styles & Settings → General Settings → Modal, then use Link Font Size and Size chart link style.
Modal header text: Styles & Settings → General Settings → Modal → Modal Styles → Modal Header Panel Styles.
Table header text (inside the size chart table): Styles & Settings → Size Chart → Table Styles → Table header text style.
If the change you need isn’t covered by these settings, use the CSS method below.
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:
FAQs
Why are my CSS changes not visible?
Double-check for any conflicting styles from theme settings or other installed apps. Use more specific CSS selectors or !important declarations to enforce your changes.
How can I ensure my customizations are responsive?
Test your CSS changes across different devices and browsers to maintain a consistent user experience.
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.
For instance, adding an !important declaration to your CSS rules can help ensure that your styles are properly applied even when there are overriding theme settings.
Making the Size Chart Icon Larger
To make the Size Chart icon more prominent, you can adjust its dimensions using the custom class selector .ks-chart-modal-link.with-icon .kiwi-svg.
Navigate to the Advanced tab and look for "Add custom CSS".
Use the following CSS code to specify the icon width and height:
.ks-chart-modal-link.with-icon .kiwi-svg { width: 20px !important; height: 20px !important; }
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.
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.