Styling the inventory list

Since every store has its 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 the 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 of course.

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 threshold values and in/out of stock can be viewed earlier on in this article.

If you require technical assistance, we recommend reaching out to some of the Shopify Experts.