Advanced styling guide with Custom CSS

Access the Custom Styles #

Custom CSS can be specified in the Custom Styles box within the Styles settings of the app. You can access it by going to Apps > Multi-location Inventory Info > Product Page Widget > Styles. Once you’re in Styles, scroll down to the bottom of the page to see “Custom Styles.”

The screenshot below shows a custom CSS override that specifies the font size for the location info text.

List of Available Key CSS Classes #

ClassDefinition
.iia-containerThis is the class applied to the div container for the widget
.iia-headerHeader part (Including the Store Icon and Header Text)
.iia-details-containerClass applied to the div container which is the container for all locations and footer
.iia-listClass applied to container div for the locations
.iia-list-itemClass applied to individual location div
.iia-footer
.iia-address
.iia-phone
.iia-info
Class applied to the div which shows the message configured for a product and a location
.iia-qtyClass applied to the container span which shows Qty
.iia-locationClass applied to the container span which shows the Location name
Table 1. CSS classes and their definitions
What are your feelings