How to Config Size Charts Apperence

How to Config Size Charts Appearance

Style Config is a global settings page that controls the default appearance of the size chart button and pop-up across your entire store. Access it from the left sidebar under your app. Changes here apply to all size charts unless overridden at the individual chart level.


The page is split into two tabs: Size chart Button and Size chart Popup. A Live Preview panel on the right updates in real time as you make changes.



Tab 1: Size Chart Button

Icon
Choose an icon to display alongside the button label. Options include several preset ruler/measurement icons, or select None for text only. To use your own icon, click the ↑ upload button to upload a custom icon image.

Layout
Controls the order of icon and label text on the button:
  1. Icon – Text: Icon appears before the label.
  2. Text – Icon: Label appears before the icon.

Button Style

Choose how the size chart trigger button is displayed on the product page. This is the global default (can be overridden per size chart in Settings → Position):
  1. Inline: A link-style button embedded within the product page, placed near the variant selector or add-to-cart button.
  2. Floating: A persistent tab anchored to the side of the browser window, always visible as the shopper scrolls.
  3. Both: Displays both an inline button and a floating tab at the same time.

Inline Button Settings
Visible when Button Type is Inline or Both:
  1. Text: The label shown on the button (default: "Size Chart").

  1. Text Style: Click to open a style panel with two tabs:
    1. Style tab — Bold, Italic, Underline toggles; Font family (defaults to Theme Font); Font size slider (px).
    2. Color tab — Color picker for the button label text.

  1. Margin: Click to set spacing around the button (Top, Right, Bottom, Left in px) — controls the space between the inline button and surrounding elements.

Inline Button Position
  1. Mode:
    1. Predefined: Choose from a list of common placements for size charts on product detail pages.
      1. Above Variant Picker   
      2. Below Variant Picker   
      3. Above Add To Cart   
      4. In Size Option Label

    1. Manual CSS Selector: Specify a CSS selector to place the button at an exact location. Set Position to Above, Below, or Inside the matched element, then enter the selector. If you need help adjusting the positions, please get in touch with us via in-app live chat.

Floating Button Settings
Visible when Button Type is Floating or Both:
  1. Text: The label on the floating tab (default: "Size Chart").
  2. Text Style: Same style panel as inline — Style tab (Bold/Italic/Underline, Font family, Font size) and Color tab.
  3. Padding: Click to set inner spacing of the floating button (Top, Right, Bottom, Left in px) — controls space between the label and the button edge.
  4. Border Style: Click to customize the button border:
    1. Width — border thickness in px.
    2. Radius — corner rounding in px.
    3. Style — border line style: None, Solid, Dashed, Dotted, Double, Groove, Ridge, Inset, Outset.
  5. Background Color: Click to open a color picker (hex input + RGB sliders + color palette swatches).

Floating Button Position
  1. Vertical Alignment: Top, Middle, or Bottom — where on the side of the screen the tab is anchored.
  2. Horizontal Alignment: Left or Right — which side of the screen the tab sits on.
  3. Note: Need a custom floating button position on mobile? Use the Contact us link and the support team will customize it for your store.

Tab 2: Size Chart Popup

Popup Display
Set the global default for how the size chart popup opens:
  1. Center: Classic centered modal overlay.
  2. Full Width: Popup spans the full width of the screen.
  3. Right Drawer: Panel slides in from the right.
  4. Left Drawer: Panel slides in from the left.

Popup Style
Controls the overall appearance of the popup container:
  1. Background Color: The popup background color.
  2. Text Color: Default text color for all content inside the popup.
  3. Border Style: Border color, width, radius, and line style (same options as the button border above).
  4. Padding: Inner spacing of the popup (Top, Right, Bottom, Left in px).

Table Style
Controls the appearance of size chart tables inside the popup:
  1. Text Style: Font size and font family for table content.
  2. Border Style: Table border color and style.
  3. Odd/Even Color: Apply alternating colors to rows, columns, or individual cells to improve readability. Options: None, Row, Column, Cell.
    1. Odd Color: Background color for odd rows/columns.
    2. Even Color: Background color for even rows/columns.

  1. Hover Color: Check Enable hover color to highlight cells when a shopper hovers over the table. Then configure:
    1. Hover Mode: What gets highlighted on hover — Cell, Row, Column, or Row + Column (crosshair highlight).
    2. Hover Background Color: Fill color of the highlighted area.
    3. Hover Text Color: Text color within the highlighted area.

Idea
Tip: After adjusting Style Config, check the Live Preview panel on the right and click Preview Storefront to see exactly how the button and pop-up look on your actual store before saving.