Accessory Fit Matrix
Compatibility matrix of five accessories against three bags with fits, fits with a named caveat, and no states plus a legend.
Compatibility matrix of five accessories against three bags with fits, fits with a named caveat, and no states plus a legend.
The source for every Ecommerce block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Accessory Fit Matrix crosses five accessories against three bags and marks each cell fits, fits with a caveat, or does not fit. The check means fits as designed. The minus means it fits with a caveat, and the caveat prints right there in the cell, small size only, one cube not two, snug when expanded. The cross means do not force it. A legend under the table spells out all three states so nobody guesses.
Rows are one array of accessory, price, and a fits list per bag, each fit carrying an optional note. A small FitCell component renders the right icon for each state. The named caveat inside the partial cell is what saves the shopper from ordering twice.
Place on an accessory landing page or any product page where one add on serves several bags, linked from the product finder. The fit states and caveats must reflect real measurements, a wrong cell here means a return.
A natural flow around it on an Ecommerce Pro page:
Before
After
One strong use is the accessory against bag grid. Other compatibility matrices:
Tip: printing the caveat inside the minus cell is the signature move, a bare check and cross grid hides the exact reason an accessory only half fits.