How to Customize the Appearance of Your Size Chart
Customizing the appearance 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, 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
To move the size chart to the right of the 'Size' text and align it without an icon:
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.
Troubleshooting Common Issues
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.