react_size_chart

Smart size chart by Vestofy for apparel, include size chart and size recommender. Please note: Size charts currently can be created only on 'Size Chart Maker | Vestofy' iOS/Mac app.

Features

• Customizable 'Size guide' button
• Popup dialog size guide
• Size chart unit coversion (Metric, Imperial)
• Size recommender with automatic body size prediction by age, height and weight.
• Exact size match according to shoppers own garment dimension (Measured by Vestofy mobile app).

Installation

  npm install react_size_chart

Getting started

1. Download 'Size Chart Maker | Vestofy' app from iOS/Mac AppStore here.
2. Currently size charts creation a availible via iOS/Mac and Shopify only.
3. Follow the instruction on the app.
4. Click the '</>' button for Size chart/Product/Collection to retrieve required prop's.
5. Example code:

import {Vestofy} from 'react_size_chart';

/*Single size chart*/
<Vestofy shop={YOUR_SHOP_ID} size_chart_id={SIZE_CHART_ID}/>

/*Product size charts*/
<Vestofy shop={YOUR_SHOP_ID} product_id={PRODUCT_ID}/>

/*Collection of products size chart*/
<Vestofy shop={YOUR_SHOP_ID} collection_id={COLLECTION_ID}/>

API Reference

prop	Type	Default value
shop (Required)	string	Parameter from app
size_chart_id	string	Size chart identifier (mutually exclusive: product_id, collection_id)
product_id	string	Product identifier (mutually exclusive: size_chart_id, collection_id)
collection_id	string	Collection identifier (mutually exclusive: size_chart_id, product_id)
ButtonText	string	'Fitting Room'
ButtonTextSize	number	15
ButtonTextColor	string	'#000000'
ButtonBackgroundColor	string	'#FF000000'
DialogTitle	string	'Size Guide'
ButtonImgSrc	string	meter_icon
locale	string	en (default), ar, es, he, pt, ru, zh
btnAlign	enum	eAlignLeft
border	object	No border
dev	boolean	false

Keywords

size chart guide recommender fitting vestofy maker

License

MIT

Feedback

If you have any feedback, please reach out to us at [e-mail]

Supported by

Vestofy