Set up your first size chart

After installation, go to the Genstore merchant admin, navigate to the Apps menu, click the app icon, and select Launch app to enter the app page. Follow the prompts to complete the initialization setup.

Step 1: Choose a size chart template

1. Select a template: The Size Chart app provides 10 preset templates, including those for men's, women's, and children's clothing, pants, shoes, etc. You can select the appropriate one or create a custom size chart for editing.
2. Size chart layout:
   • Set units: You can set the default unit (e.g., inches) and its conversion units, as well as the number of decimal places. Automatic unit conversion is supported for ease of use.
   • Edit dynamic size chart: In the size chart layout, you can add columns, rows, and input related information (such as length, width, etc.). Right-click options include: Insert column, Add row, Delete column, Delete row.
   • Add text, images, and videos to enrich the size chart content.
3. Set size chart status: Draft or active. Only active size charts will be displayed on the product page.
4. Set size chart priority: When a product is associated with multiple size charts, they will be displayed based on priority. The chart with a lower priority number will be shown first.
5. After setting, click Next.

Step 2: Link Size Chart with products

1. Select all products.
2. Link size chart with a specific product: In the product popup, select the relevant product.
3. Link size chart with a product collection: For a specified product collection, associate the size chart with all products in that collection.
4. After completing the setup, click Next.

Step 3: Set Size Chart button

1. Button settings
   • Position: Inline link or floating button
   • Type: Icon + text or text only
   • Size: Set the button size
   • Icon: Choose from system-provided icons or upload a custom icon
   • Button text: Set the text (e.g., “Size Chart”)
   • Button color: Set the button color
2. Position settings
   • Popup position: Choose center, full screen, left, or right
3. After completing the settings, click Save to apply.

Edit Size Chart

Steps:

1. After creating a size chart, you can edit or duplicate the size chart.
2. Editing includes dynamic size chart information, product/product series associations, and style settings.
3. After editing, click Save to apply.

Storefront display

Once installed and initialized, you can preview the size chart display effect through the Genstore Merchant admin under Online Store -> Themes.

1. Navigate to Online Store -> Themes.
2. Click Design.
3. In the newly opened window, click App embedding, enable the Size Chart, and then click Save to complete the setup.