Overview:
In some cases, you may need to limit the number of accessories that show on the product page regardless of how the accessories are currently assigned to a product. Whether it be by Specific Product, Collection, or Default Accessories, the following code will only show the amount of accessories which are set within the "maxAcc" variable in the code below.
Code:
Place this just before the closing </body> tag inside of your theme.liquid file. Once the accessories are loaded it will call this callback function.
Set the maxAcc to the maximum number of accessories you want to display on the page
<script type="text/javascript">
function accessoriesDoneLoadingCallback() {
var maxAcc = 10;
var accCount = 1;
$( ".accessories-item" ).each(function( index, element ) {
if (accCount <= maxAcc){
accCount += 1;
}else{
$(element).remove();
}
});
}
</script>