Size Chart Components

Posted on by Lavender Vu

Size chart components can be added to the layout structure to enhance the presentation and usability of the size chart, including Tab; Accordion; Image; Table; Text; Divider

 

A. Tab

  1. New Item: Click to add new tabs
  2. Available tabs: Display the created tabs
  3. Title: Enter the title of the tab
  4. Tab Components: Design components appearing on the tabs
  5. Layout: Select layout row(s) built in the size chart tab
  6. Margin: You can customize the space around the tab by adjusting the margin

 

 

B. Accordion

  1. Multiple Tabs: When enabled, this feature allows multiple sections in the accordion to remain open at the same time when you click on different sections. If disabled, only the clicked section will open, while the other sections will automatically close.
  2. Default First Tab: When you enable this option, the first section in the accordion always remains open, if you disable it, all sections will stay closed.
  3. New Item: Click to add new sections in the accordion.
  4. Available items in Accordion: Display the created sections in the accordion.
  5. Title: Name of the section.
  6. Accordion Components: Design components appearing on the accordion.
  7. Layout: Select layout row(s) built in the size chart accordion.
  8. Margin: You can customize the space around the accordion by adjusting the margin.

 

C. Image

  1. Image Preview: This shows a preview of the image you upload for the size chart
  2. Image URL: Enter the URL where the image is hosted
  3. Image ALT: This field is for the alternative text (alt text) of the image
  4. Width: Set the width of the image in pixels, allowing you to control how wide the image appears in the size chart
  5. Height: Set the height of the image in pixels, determining how tall the image appears in the size chart
  6. Padding: Adjust the padding around the image, which adds space between the image and other elements of the size chart, measured in pixels
  7. Margin: Set the margin around the image, which creates space between the image and the border of the size chart container or adjacent content
  8. Object Fit: This controls how the image fits within its container. You can choose options like ‘cover’, ‘contain’, ‘fill’, or ‘upset’, which determines whether the image will stretch, resize, or crop to fit
  9. Border Style: Choose the style of the border around the image. Options may include solid, dotted, dashed, dashed, double, groove, ridge, inset, outset
  10. Border Width (px): Set the width of the image border in pixels. The thicker the width, the more prominent the border will appear
  11. Border Color: Select the color of the image border to match the design of your size chart or product page styling

D. Table

  1. Select Template Color: Choose the overall color scheme for your size chart table
  2. Add Columns: Add additional columns to your table
  3. Add Row: Add extra rows to input size details
  4. Header Table: Select where the header of the table should be located. You can choose to place the header in the top row, in the first column, or both
  5. Header Background: Set the background color for the header row
  6. Text Header: Define the color of the text in the header row
  7. Header Text Bold: Enable or disable bold formatting for the header text
  8. Header Text Size: Customize the font size for the text in the header
  9. Column Style: This option allows you to choose how to highlight your odd and even table in rows or columns
  10. Even Background: Set a background color for even-numbered rows
  11. Even Text: Customize the text color for even-numbered rows
  12. Odd Background: Set a background color for odd-numbered rows
  13. Odd Text: Customize the text color for odd-numbered rows
  14. Border Color: Choose the color for the table’s borders
  15. Cell Text Size: Adjust the font size for the text inside table cells
  16. Horizontal Border Width: Set the thickness of the borders between rows
  17. Horizontal Border Style: Choose the style for the horizontal borders, it can be: solid, dotted, dashed, dashed, double, groove, ridge, inset, outset
  18. Vertical Border Width: Set the thickness of the borders between columns
  19. Vertical Border Style: Choose the style for the vertical borders, it can be: solid, dotted, dashed, dashed, double, groove, ridge, inset, outset
  20. Border Radius: Define how rounded the corners of the table cells should be
  21. Margin: Set the space around the table to create a clean layout on the page
  22. Max Height (px): Limit the maximum height of the table in pixels to control the table’s display size
  23. Import CSV, Export CSV, Sample: Import data into the table from a CSV file, export your table data as a CSV file for backup or editing, and download a sample CSV file to see the required format

E. Text

Text Component provides a versatile way to customize the textual content within your size charts. It supports a range of formatting and editing options:

  1. Text Formatting: Offers basic formatting options like bold, italic, bullet points, numbering, and other text styles
  2. Text Alignment: Allows you to align the text (left, center, or right) to control how the text appears
  3. Add Links: Provides the ability to insert hyperlinks within the text
  4. Add Media: Lets you insert images, videos, or other media directly into the size chart text section to enhance the content
  5. Visual: Allowing you to edit and format the text visually without needing to write HTML code
  6. Text Mode: Switch to editing the text in HTML for more advanced formatting and customization options
  7. Text Margin: Adjusts the space around the text, allowing you to set margins to create a comfortable visual spacing around the text

F. Divider

 

  1. Text (Optional): You can add texts to the divider if you want.
  2. Select Divider Color: Choose color for the divider
  3. Weight: The weight setting controls the thickness of the divider
  4. Margin: You can customize the space around the divider by adjusting the margin.