How to set the appearance for Size Chart popup?
Pop-up position
To set the appearance of size chart popup on your storefront, go to Appearance screen -> Size chart popup card in app. Select the position of the popup on the screen when being opened:
- Header text: Enter the title text for size chart popup
- Position: Select the position to display the popup on the page. There are 5 positions: Center, Fullscreen, Left, Right, Custom
Advanced Settings
Click the link Guide me to access an interactive video that will guide you through this feature. New feature - Design Customization
Click the Start customizing button to open the Advanced Settings screen, where you can customize every aspect of your size chart display.
The Advanced Settings screen is divided into two main sections:
- Left Panel - Design Controls: This is where you’ll find all customization options for the element you’ve selected.
- Right Panel - Visual Preview: This displays a real-time preview of your size chart as it will appear on your store. You can switch between mobile and desktop views.
Tip: Select any part on the right section to start customization
Click on the Floating button in the preview to customize:
- Icon: Choose from preset icons or upload your own
- Text: Edit the button text, color, size, weight, and decoration
- Border: Add and customize border color and radius
- Background Color: Change the button’s background color
- Size: Adjust button dimensions
- Rotation: Rotate the button by 90 degrees
Click on the Inline link in the preview to customize:
- Icon: Choose from preset icons or upload your own
- Text: Edit the text, color, size, weight, and decoration
- Border: Add and customize border color and radius
- Background Color: Change the link’s background color
Click on the Size chart popup in the preview, then select specific elements to customize:
a. Header: Edit header text and appearance
b. Table
- Text Color: Customize the color of text in the table
- Hover Color: Set the highlight color when customers hover over rows/columns
- Emphasis: Choose which elements to emphasize (alternating rows/columns, headers)
- Emphasis Color: Set the color used for emphasized elements
c. Media (Images/Videos)
- Adjust media size percentage
d. Tabs
- Position: Choose the alignment of the tabs (Center, Left, Right)
- Style: Select a visual style for the tabs (Underline, Filled, Outlined, Basic)
- Text: Modify the text color and font weight for both selected and unselected tabs, as well as on hover
- Background: Change the background color for the selected tab and on hover
- Size: Adjust the text size for all tabs (default 13px)
- Border Radius: Customize the roundness of the corners for certain tab styles
e. Popup Overall
Click on any empty area of the popup to customize:
- Text: Edit the global text color and size
- Color: Change background and overlay colors, add/remove shadow
- Size: Adjust border radius, responsive width and height
- Alignment: Set top and left alignment for precise positioning
Mobile vs Desktop Views
- Use the “Switch to desktop interface” button to toggle between mobile and desktop views
- Some settings (like alignment and size) only apply to desktop view
- When in mobile view, a helpful message will prompt you to switch to desktop view for these settings
Tips for Effective Customization
- Match your brand colors: Use your store’s color palette for a consistent look
- Consider contrast: Ensure text is readable against your chosen background colors
- Test on mobile: Your size chart should look good on all devices
- Keep it simple: Don’t overcomplicate the design - focus on readability
- Use emphasis wisely: Highlight the most important information in your tables