# CSS {% hint style="info" %} **Developers only:** This documentation is intended for developers with technical knowledge and experience in Shopify Theme Development. {% endhint %} ## User Location To customize your theme files, you can use CSS variables to add your styles. Orbe adds a custom class to the body element of the theme, which can be used to apply customizations throughout the entire theme. The CSS class is named `orbe-country-code--COUNTRYCODE`, where `COUNTRYCODE` is the ISO two-letter code (alpha-2) of the country where the customer is located. For example, if the customer is in the United Kingdom, the following class will be added to the body element: ```html ``` You can find the global list of country ISO two-letter codes at [https://countrycode.org/](https://countrycode.org). {% hint style="success" %} You can add your custom CSS in the Advanced CSS section inside Orbe: [Custom code](/settings/custom-code.md). This ensures the CSS is always available in any theme where the Orbe app is enabled. {% endhint %} ## Country Flags If you want to customize your Shopify store and display the flag of any country, Orbe provides a set of auxiliary classes that can be used. These classes enable you to incorporate country flags into your design in various ways. The country selectors mentioned here are just one example of how you can utilize these classes. #### Usage Example: To display the flag of Australia, you can use the following HTML: ```html
``` This will render the flag of Australia as the background image of the `
` element. You can replace "au" in the class name with the appropriate two-letter country code to display the flag of any desired country. You can even use liquid code to show the country flag of the current experience dynamically. For example: ```html
``` This will dynamically render the flag of the current country experience by retrieving the appropriate country code from the `localization` object. Please note that the provided classes are not limited to selectors and can be used in any way you see fit for your customization needs. ## Popup State Orbe provides a way to customize your store’s behaviour when the popup is open. A specific class, `orbe--opened`, is added to the `body` element of the theme whenever the Orbe popup is visible. This class is automatically removed when the popup is closed. The **most common use case** for this class is to **ensure that other popups are displayed only after** the **Orbe popup has been closed**, avoiding overlapping or distracting user experiences. ### Example To hide another popup while the Orbe popup is open: ```css .orbe--opened .your-popup-class { display: none !important; } ``` Replace .your-popup-class with the `class` or `ID` of the popup you want to hide. For example, to hide Shopify’s default cookie banner: ```css .orbe--opened #shopify-pc__banner { display: none !important; } ``` This ensures **other popups appear only after the Orbe popup is closed**, creating a smooth user experience. Add this CSS to the [Custom code](/settings/custom-code.md) section inside Orbe. It will be available in any theme with Orbe enabled. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.orbe.app/developer-reference/css.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.