Size Chart

{% doc %} @prompt Create a product page size chart popup block for a kids clothing store (Kidsmire). It should work as follows: 1. A small clickable link/button that says "📏 Find My Size" placed just above the size selector buttons on the product page. It should be subtle — not a full button, more like a text link with the tape measure emoji. 2. Clicking it opens a clean modal/popup overlay (no page navigation) with: - A heading "Find the Perfect Fit" - A size chart TABLE with these columns: Size | Age | Height (inches) | Height (cm) | Chest (inches) | Chest (cm) | Garment Length (inches) - Rows for: 6-12M | 6-12 months | 26-29" | 66-74cm | 17-18" | 43-46cm | 11" / 12-18M | 12-18 months | 29-31" | 74-79cm | 18-19" | 46-48cm | 12" / 18-24M | 18-24 months | 31-33" | 79-84cm | 19-20" | 48-51cm | 13" / 2-3Y | 2-3 years | 33-37" | 84-94cm | 20-21" | 51-53cm | 14" / 3-4Y | 3-4 years | 37-40" | 94-102cm | 21-22" | 53-56cm | 15" / 4-5Y | 4-5 years | 40-43" | 102-109cm | 22-23" | 56-58cm | 16" / 5-6Y | 5-6 years | 43-47" | 109-119cm | 23-24" | 58-61cm | 17" - A "How to Measure" section below the table with a simple SVG child silhouette showing 3 measurement points: (1) Height: top of head to floor, (2) Chest: fullest part of chest, (3) Garment Length: shoulder seam to hem. - A tip note at the bottom: "💡 Tip: If your child is between sizes, we recommend sizing up for a comfortable, room-to-grow fit." - A close button (X) at the top right of the popup. 3. The popup should have a clean white background, soft rounded corners, subtle shadow, and be fully mobile responsive (full screen on mobile, centered modal on desktop). 4. The table should have alternating row colors (very light pastel) and be horizontally scrollable on mobile. Make it a standalone Shopify theme block that can be added to the product page template. {% enddoc %} {% assign ai_gen_id = block.id | replace: '_', '' | downcase %} {% style %} .ai-size-chart-trigger-{{ ai_gen_id }} { display: inline-block; width: 100%; } .ai-size-chart-link-{{ ai_gen_id }} { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: {{ block.settings.link_color }}; text-decoration: none; cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; transition: opacity 0.2s ease; } .ai-size-chart-link-{{ ai_gen_id }}:hover { opacity: 0.7; } .ai-size-chart-overlay-{{ ai_gen_id }} { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .ai-size-chart-overlay-{{ ai_gen_id }}.active { opacity: 1; visibility: visible; } .ai-size-chart-modal-{{ ai_gen_id }} { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); background-color: {{ block.settings.modal_bg_color }}; border-radius: {{ block.settings.modal_border_radius }}px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); z-index: 9999; max-width: 900px; width: 90%; max-height: 90vh; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; } .ai-size-chart-modal-{{ ai_gen_id }}.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .ai-size-chart-header-{{ ai_gen_id }} { position: sticky; top: 0; background-color: {{ block.settings.modal_bg_color }}; padding: 24px 24px 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; align-items: center; z-index: 1; } .ai-size-chart-title-{{ ai_gen_id }} { font-size: {{ block.settings.heading_size }}px; font-weight: 600; color: {{ block.settings.text_color }}; margin: 0; } .ai-size-chart-close-{{ ai_gen_id }} { background: none; border: none; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; color: {{ block.settings.text_color }}; opacity: 0.6; transition: opacity 0.2s ease; } .ai-size-chart-close-{{ ai_gen_id }}:hover { opacity: 1; } .ai-size-chart-content-{{ ai_gen_id }} { padding: 24px; } .ai-size-chart-table-wrapper-{{ ai_gen_id }} { overflow-x: auto; margin-bottom: 32px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.1); } .ai-size-chart-table-{{ ai_gen_id }} { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 600px; } .ai-size-chart-table-{{ ai_gen_id }} th { background-color: {{ block.settings.table_header_bg }}; color: {{ block.settings.table_header_text }}; padding: 12px 8px; text-align: left; font-weight: 600; border-bottom: 2px solid rgba(0, 0, 0, 0.1); white-space: nowrap; } .ai-size-chart-table-{{ ai_gen_id }} td { padding: 12px 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); color: {{ block.settings.text_color }}; } .ai-size-chart-table-{{ ai_gen_id }} tr:nth-child(even) { background-color: {{ block.settings.table_row_alt_bg }}; } .ai-size-chart-table-{{ ai_gen_id }} tr:last-child td { border-bottom: none; } .ai-size-chart-how-to-{{ ai_gen_id }} { margin-bottom: 24px; } .ai-size-chart-how-to-title-{{ ai_gen_id }} { font-size: 18px; font-weight: 600; color: {{ block.settings.text_color }}; margin: 0 0 16px; } .ai-size-chart-diagram-{{ ai_gen_id }} { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; } .ai-size-chart-svg-{{ ai_gen_id }} { flex-shrink: 0; } .ai-size-chart-svg-{{ ai_gen_id }} svg { width: 200px; height: auto; } .ai-size-chart-instructions-{{ ai_gen_id }} { flex: 1; min-width: 250px; } .ai-size-chart-instruction-{{ ai_gen_id }} { margin-bottom: 12px; display: flex; gap: 8px; align-items: flex-start; } .ai-size-chart-instruction-number-{{ ai_gen_id }} { background-color: {{ block.settings.link_color }}; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; } .ai-size-chart-instruction-text-{{ ai_gen_id }} { color: {{ block.settings.text_color }}; font-size: 14px; line-height: 1.5; } .ai-size-chart-tip-{{ ai_gen_id }} { background-color: {{ block.settings.tip_bg_color }}; border-left: 4px solid {{ block.settings.link_color }}; padding: 16px; border-radius: 4px; display: flex; gap: 12px; align-items: flex-start; } .ai-size-chart-tip-icon-{{ ai_gen_id }} { font-size: 20px; flex-shrink: 0; } .ai-size-chart-tip-text-{{ ai_gen_id }} { color: {{ block.settings.text_color }}; font-size: 14px; line-height: 1.5; margin: 0; } @media screen and (max-width: 749px) { .ai-size-chart-modal-{{ ai_gen_id }} { width: 100%; height: 100%; max-height: 100vh; border-radius: 0; top: 0; left: 0; transform: translateY(100%); } .ai-size-chart-modal-{{ ai_gen_id }}.active { transform: translateY(0); } .ai-size-chart-header-{{ ai_gen_id }} { padding: 16px; } .ai-size-chart-content-{{ ai_gen_id }} { padding: 16px; } .ai-size-chart-title-{{ ai_gen_id }} { font-size: 20px; } .ai-size-chart-diagram-{{ ai_gen_id }} { flex-direction: column; } .ai-size-chart-svg-{{ ai_gen_id }} svg { width: 150px; } } {% endstyle %}
{% schema %} { "name": "Size chart popup", "settings": [ { "type": "header", "content": "Trigger button" }, { "type": "text", "id": "trigger_text", "label": "Button text", "default": "Find My Size" }, { "type": "color", "id": "link_color", "label": "Button color", "default": "#121212" }, { "type": "header", "content": "Modal" }, { "type": "text", "id": "modal_title", "label": "Modal title", "default": "Find the Perfect Fit" }, { "type": "range", "id": "heading_size", "label": "Heading size", "min": 18, "max": 32, "step": 2, "unit": "px", "default": 24 }, { "type": "color", "id": "modal_bg_color", "label": "Background color", "default": "#FFFFFF" }, { "type": "color", "id": "text_color", "label": "Text color", "default": "#121212" }, { "type": "range", "id": "modal_border_radius", "label": "Border radius", "min": 0, "max": 24, "step": 4, "unit": "px", "default": 12 }, { "type": "header", "content": "Table" }, { "type": "color", "id": "table_header_bg", "label": "Header background", "default": "#F3F3F3" }, { "type": "color", "id": "table_header_text", "label": "Header text", "default": "#121212" }, { "type": "color", "id": "table_row_alt_bg", "label": "Alternate row background", "default": "#FAFAFA" }, { "type": "header", "content": "Tip section" }, { "type": "textarea", "id": "tip_text", "label": "Tip text", "default": "Tip: If your child is between sizes, we recommend sizing up for a comfortable, room-to-grow fit." }, { "type": "color", "id": "tip_bg_color", "label": "Tip background color", "default": "#FFF9E6" } ], "presets": [ { "name": "Size chart popup" } ] } {% endschema %}