Easily customize the appearance of your location block by adding your own CSS styles. Use the text area to apply custom styles to predefined classes, enabling you to modify the look and behavior of the block to match your store’s design.
Use this setting to apply custom CSS styles to the location block, allowing you to modify its appearance and behavior to align with your store’s branding. Simply add your CSS in the provided text box to customize the design elements and ensure a cohesive look across your storefront.
List of Predefined Classes and Id’s
| Class | Definations |
|---|---|
| .location-AvailableHeading | Applied to the heading div displaying “Availablity”. |
| #locationNamesContainer | ID applied to the container for the list of locations. |
| .location-container | Container for individuals location cards. |
| .location-radio-and-label | Container for radio buttons and their labels. |
| .location-address | Class for the paragraph elements that display the location address. |
| .location-phone | Class for the paragraph elements that displays the location phone number. |
| .location-distance | Class for elements displaying the distance to the location. |
| .location-direction | Class for element providing a link or details to navigate to the location. |
| .location-footer-note | Class applied to the footer note for additional messaging or instruction. |
Advanced CSS Styling for Location Blocks