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.
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.
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 of the Staytuned app to 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; }Save changes and preview to verify the adjustments.
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.