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
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.
Hiding the Size Logo Using Custom CSS
For more advanced users, you can hide the size logo by adding custom CSS:
Open your theme’s editor and locate the option to add custom CSS (often under Theme settings > Custom CSS, or via the theme’s stylesheet).
Add the following CSS rule to target the size logo element:
.size-logo-selector { display: none !important; }Replace
.size-logo-selectorwith the actual CSS selector used by your theme for the size logo element. You can find this by inspecting the element in your browser’s developer tools.Save your changes and refresh your storefront to confirm the logo is removed.
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.