Since every store has their own look and feel, and everyone has their own wishes for styling, we've decided to leave any styling up to you. Here are a few things you can do.

Remove dots from location list
If you want to remove the dots from the location list, add this snippet to your theme.scss.liquid file (somewhere at the bottom):

ul#tomit_inventory_list {
list-style-type: none;
padding: 0;
margin: 0;
}
#tomit_inventory_list li {
margin: 0;
padding: 0;
}


Color inventory Threshold
If you use the 3 inventory threshold values (out of stock, low stock, high stock) you can use this css snippet to give the text some color:

.tomItInventoryLocationHighStock, .tomitInStock{
color:#00b268;
}
.tomItInventoryLocationLowStock{
color:#f29500;
}
.tomItInventoryLocationNoStock, .tomitOutOfStock{
color:#bc1f00;
}


We added more styling options to the app so you can style some of the options without css. Adding css to your theme css will still be an option ofcourse.
Additionally you can add your custom styling to the 'Custom css' within the 'Style Settings' tab. This way you can keep all your custom styling, even when changing themes.

If you want to add css to the location names you can use the class '.location'
For example:

.location{
color:#ff0000;
}


This will make the location names red.
To add styling to the stock count you can use '.stockCount'

The class names for the treshold values and in/out of stock can be viewed earlier on in this article.
Was this article helpful?
Cancel
Thank you!