Configuring product size sorting
This page explains how to change the order of size variations displayed in the product detail page of the Associate App, and how the sort order works.
Changing the Associate App size sorting
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, open a support case. 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 customer wants to see them on 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
Question 1: 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 2: 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
You can learn more about how size sorting works in the next sections.
How size sorting works in the 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
}
]
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 sort 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.
Add custom sort 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.
The size system is NOT case sensitive. Upper and lower case values are both accepted and treated as the same text.
Unexpected product sizes
What happens when we import a product size that is not in the system?
As NewStore can not guess the ordering, any unknown product sizes that are imported are stored sequentially one after the other, in the order they appear when they are imported. That means, NewStore can not guess the sort position, but it grants consistency. So every time associates go into the product details page of that product (or a sibling), the unknown sizes are always in the same position.