This page explains how to change the order of size variations displayed in the product detail page of Associate App, and how the sort order works.
Changing size sorting in Associate App
In the product detail page (PDP) we display different variations of a product, including its size variations. Example: XS, S, M, L, XL or 40, 41, 42, 43, 44. In the following image there is an example of unsorted product size variations:
By default, NewStore defines a limited sorting option. To change the sorting, ask your point of contact at NewStore to open a support ticket, or create one yourself here. In the ticket, provide the information of how sizes should be ordered, in the following format:
[
{
"name":"my_sort_order_name",
"sizes":[
{"value":"my_value_0","position":0},
{"value":"my_value_1","position":1},
{"value":"my_value_2","position":2},
...
],
"gender":"",
"position":0
}
]Make sure that the order of the values in the above snippet reflects the order in which the retailer wants to have them displayed in the UI. Replace the following fields:
my_sort_order_name, which is the name of the sort order system. The default name isUS.my_value_0,my_value_1,my_value_2, etc: values to be shown in the list of sizes.
There can be multiple size systems defined, each one with a different name. For more info see size sort system name and gender.
NOTE
If you have already specified custom sorting before, let NewStore know if the new JSON for your size and sorting configuration should replace the existing sorting order or the new configuration should be with a new name.
FAQ
Question: What happens if there are products in the system that have other sizes than the ones in the list?
Any size value that is not in the list but is available in the retailer will show up in a random order after the values that are in the list you provided. See more details in Unexpected product sizes.
Question: What happens if after customizing the order, a product with new/unknown size is getting imported?
The new size will be added to the end of the list in a sequential order. See more details in Unexpected Product Sizes.
Learn more about how size sorting works in the next sections.
How size sorting works in Associate App
How the size sorting system works is that for every possible size, we assign a sort weight to it. So, when the UI displays a product, sizes appear ordered by this weight.
Default product size sorting
The default sort system for each retailer provides the most common sizes:
[
{
"name":"US",
"sizes":[
{"value":"O/S","position":0},
{"value":"ONE SIZE","position":1},
{"value":"0","position":2},
{"value":"0.5","position":3},
{"value":"1","position":4},
{"value":"1.5","position":5},
{"value":"2","position":6},
{"value":"2.5","position":7},
{"value":"3","position":8},
{"value":"3.5","position":9},
{"value":"4","position":10},
{"value":"4.5","position":11},
{"value":"5","position":12},
{"value":"5.5","position":13},
{"value":"6","position":14},
{"value":"6.5","position":15},
{"value":"7","position":16},
{"value":"7.5","position":17},
{"value":"8","position":18},
{"value":"8.5","position":19},
{"value":"9","position":20},
{"value":"9.5","position":21},
{"value":"10","position":22},
{"value":"10.5","position":23},
{"value":"11","position":24},
{"value":"11.5","position":25},
{"value":"12","position":26},
{"value":"12.5","position":27},
{"value":"13","position":28},
{"value":"13.5","position":29},
{"value":"14","position":30},
{"value":"14.5","position":31},
{"value":"15","position":32},
{"value":"15.5","position":33},
{"value":"16","position":34},
{"value":"16.5","position":35},
{"value":"17","position":36},
{"value":"17.5","position":37},
{"value":"18","position":38},
{"value":"18.5","position":39},
{"value":"19","position":40},
{"value":"19.5","position":41},
{"value":"20","position":42},
{"value":"20.5","position":43},
{"value":"21","position":44},
{"value":"21.5","position":45},
{"value":"22","position":46},
{"value":"22.5","position":47},
{"value":"23","position":48},
{"value":"23.5","position":49},
{"value":"24","position":50},
{"value":"24.5","position":51},
{"value":"25","position":52},
{"value":"25.5","position":53},
{"value":"26","position":54},
{"value":"26.5","position":55},
{"value":"27","position":56},
{"value":"27.5","position":57},
{"value":"28","position":58},
{"value":"28.5","position":59},
{"value":"29","position":60},
{"value":"29.5","position":61},
{"value":"30","position":62},
{"value":"30.5","position":63},
{"value":"31","position":64},
{"value":"31.5","position":65},
{"value":"32","position":66},
{"value":"32.5","position":67},
{"value":"33","position":68},
{"value":"33.5","position":69},
{"value":"34","position":70},
{"value":"34.5","position":71},
{"value":"35","position":72},
{"value":"35.5","position":73},
{"value":"36","position":74},
{"value":"36.5","position":75},
{"value":"37","position":76},
{"value":"37.5","position":77},
{"value":"38","position":78},
{"value":"38.5","position":79},
{"value":"39","position":80},
{"value":"39.5","position":81},
{"value":"40","position":82},
{"value":"40.5","position":83},
{"value":"41","position":84},
{"value":"41.5","position":85},
{"value":"42","position":86},
{"value":"42.5","position":87},
{"value":"43","position":88},
{"value":"43.5","position":89},
{"value":"44","position":90},
{"value":"44.5","position":91},
{"value":"45","position":92},
{"value":"45.5","position":93},
{"value":"46","position":94},
{"value":"46.5","position":95},
{"value":"47","position":96},
{"value":"47.5","position":97},
{"value":"48","position":98},
{"value":"48.5","position":99},
{"value":"49","position":100},
{"value":"49.5","position":101},
{"value":"50","position":102},
{"value":"50.5","position":103},
{"value":"51","position":104},
{"value":"51.5","position":105},
{"value":"XXXS","position":106},
{"value":"XXS","position":107},
{"value":"XS","position":108},
{"value":"S","position":109},
{"value":"M","position":110},
{"value":"L","position":111},
{"value":"XL","position":112},
{"value":"XXL","position":113},
{"value":"XXXL","position":114}
],
"gender":"",
"position":0
}
]Important
This is just a default, the size sort system can be changed or even removed completely. There is no need to keep it as it is.
Size sorting system name and gender
The code gives name and gender to each system, and it stores it as an array, so there can be several sort systems at the same time. When importing a product and defining the size, we can set the property variation_size_system and variation_size_gender to match the size system that we want. If variation_size_system attribute is not provided, "US" name will be used as default. If variation_size_gender attribute is not provided, "" gender will be used as default.
Adding a custom sorting system
In addition to add or change the size system, a support case is required, containing the retailer to update and a size system. At the moment, there is no way to do it through NOM or API, so the only way to do that is through Support Cases. But eventually, all this size configuration will become a self-service functionality.
Custom size system example:
[
{"name":"US","sizes":[{"value":"1x","position":0},{"value":"2x","position":1},...]},
{"name":"UK","sizes":[{"value":"3xl","position":334},{"value":"4xl","position":335},...]},
...
]This action would update/override/extend the default size sort system.
Important
The size system is NOT case sensitive. Upper and lower case values are both accepted and treated as the same text.
Unexpected product sizes
If you import a product size that is not defined in the platform, NewStore cannot guess the product size sorting order. Any unknown product sizes that are imported are then stored sequentially one after the other, in the order they appear when they are imported.
NewStore cannot guess the sort position, but provides consistency to the sorting order. So every time associates go into the product details page of that product or a related product (sibling), the unknown sizes are always in displayed in the same position and order.