How to Customize the Appearance of Your Size Chart
Customizing the appearance and positioning of your size chart can help align it with your store's branding and improve user experience. This guide provides step-by-step instructions for removing logos, adjusting placement, repositioning the size chart, and using custom CSS for advanced customization.
Removing or Adjusting Logos
Two different things — please don't mix them up:
Your own uploaded Shop Logo (an image you added to the size chart modal): this can be removed in settings — see below.
The "Powered by Kiwi Sizing" watermark (Kiwi branding shown on the Free plan): this is not a shop logo. It is removed by upgrading to a paid plan, and is not removed through the logo settings below.
Removing the Logo from the Size Table
To delete your logo from the size table, follow these steps:
Navigate to Styles & Settings in your admin panel.
Click on the Modal tab under General Settings.
Scroll down to the Modal Styles section.
Locate the Shop Logo option and remove your logo.
Removing or Changing Icons in the Header
If you want to remove or change an icon displayed in the header of your size charts:
Go to Styles & Settings > General settings > Modal > Modal style.
Adjust or remove the icon as desired.
Aligning and Repositioning the Size Chart
The size chart can be displayed in various locations on your product pages, such as:
Above the sizing options
Next to specific text (e.g., "Size")
Above the quantity selector
Under the product description
These adjustments can be made using app settings, theme editors, or manual placement tools.
To move the size chart to the right of the 'Size' text and align it without an icon:
Moving the Size Chart Above the Sizing Options
To move the size chart to the left side above the sizing options:
Refer to the step-by-step tutorial provided in the app documentation: How to Change Size Chart Position ([URL]).
If you need assistance, share a screenshot of your desired placement and the product link with the support team.
Inform the support team if you are using any swatch or variant apps, such as Swatch King or Rio Options, as this may affect placement adjustments.
Access your store theme or size chart configuration settings.
Adjust the placement settings to align the size chart as desired.
If you encounter difficulties, consider providing screenshots or videos to your support team for further assistance.
Moving the Size Chart Pop-Up to a Different Location
To move the size chart pop-up to a location other than above the "Add to Cart" button:
Open the app settings and navigate to the size chart placement options.
Select the desired location, such as above the quantity selector.
If the app settings do not provide the flexibility you need, contact support for assistance with manual adjustments.
Troubleshooting Common Issues
Fixing Alignment Issues After Placement
If the size chart link or text alignment shifts unexpectedly after placement (e.g., moving to the left after being placed under the product description):
Use the Kiwi app block placement controls or your theme editor to adjust the position.
If your theme re-renders content on variant changes, enable the "Reinject" option in the Kiwi app settings to preserve the placement.
If the issue persists, reapply the placement using the Kiwi app block in the theme editor.
Icons or Logos Not Updating: Ensure you have saved your changes and cleared your browser cache.
CSS Changes Not Taking Effect: Double-check the CSS selector and syntax. Use browser developer tools to identify the correct selector.
Theme or App Conflicts: Some apps or themes may override default settings. Check for conflicting configurations and adjust accordingly.
By following these steps, you can effectively customize the appearance of your size chart to better suit your store's needs.
Advanced Customization Options
For more complex customizations, such as integrating the size chart with specific apps or creating unique layouts, consider:
Exploring advanced settings in your size chart app.
Consulting with the app's support team for tailored solutions.