Styling adjustments (CSS)

In this article, we'll explain how to style your app however you want with CSS. For this purpose, we provide clear classes for the main components of our apps, which you can access via CSS and thus customize the styling of the app.

The changes are made at your own risk and should only be carried out by persons with technical knowledge and after an introduction by Shopgate. We ask for your understanding that we cannot support any changes and any resulting problems.


To be able to update the CSS in the app, your account must first be activated. Please contact us via

You will then receive a new option in your Shopgate merchant area:

This takes you to the admin for configuring and deploying extensions. Extensions and their settings are managed here.

From the dropdown on the right, select the  @shopgate-project/content-styling extension.

Here you can add your CSS updates.

In order to be able to view the necessary CSS classes, you can either examine your live app using the Google Chrome dev tools or - if available - use a developer sandbox app.

Option 1: Live App

Please note that this option is only available for the Android app. However, we can also provide you with the iOS theme on Android if required. To do this, carry out the following steps:

  1. Connect your Android device to your computer and allow USB debugging. Depending on the device, you will be asked when connecting or you have to activate the option in the device settings
  2. In Google Chrome,  open  chrome://inspect/#devices
  3. Open the app
  4. Under "Remote Target" you see the web view of the app and can open it via "inspect".
  5. Here you can now select the individual elements of the app and look for the necessary CSS selectors

Option 2: Sandbox app

The sandbox app offers the advantage that you can also view the iOS app and test changes quickly. Developer knowledge is required for this option.

Creating a sandbox app

With the help of the sandbox app, you can call up the app in the browser and thus view the existing components via the browser's inspector and extract the corresponding CSS classes.

To set up a sandbox app, follow the steps in the documentation.

Set up extensions

An extension is required to include the styling in the app. Please clone the following extension via GitHub into the "extension" folder of your sandbox app.

In the extension, you will find a file called "extension-config.json". This is used to add the new styling in the app. To do this, the "default" must be adjusted in the "configuration" section of the Extension Config.

Configuration of the styling extension

In order to make your customized styling available for your live app, it must first be stored in the extension configuration. To do this, use the following scheme:


 "styles": {   

    "<cssSelector>": "<glamorStyleObject>"



The <cssSelector> can be any valid CC selector and <glamorStyleObject> must be a valid  Glamor  Style Object.


In order to apply the changes to your app, they must be deployed. You can do this in the new developer option in your merchant admin:

Important: Do not change any settings here! Changes here can have a direct impact on your live app. Just press "DEPLOY"

Deployment takes about 10 minutes. After that, you will see your changes immediately.


Start the front end of the sandbox app with the "ext-content-styling" extension and call it in your browser. You can view the elements there using the browser's inspector in the DOM (Document Object Model). In this example, the class of the product card is shown in the "ui-shared__card" slider. Always use the uniquely named classes for your selector.

Changing the color of the product card in the slider

To change the color of the product card in the product slider, we create a CSS selector, convert it into a Glamor object and store it in "extension-config.json".

In the Extension Config, it looks like this


 "styles": {

   ".ui-shared__card": {

     "color": "#fff",

     "background": "#121212"





Before, afterward:


Examples of classes:

  • Rating stars: ".rating-stars-filled"
  • Discount badge: ".ui-shared__discount-badge > span"
  • Price: ".price.ui-shared__price"
  • Strike price: ".price-striked.ui-shared__price-striked"
  • iOS Theme - Active Tab in Navigation: ".tab-active"
  • iOS Theme - Cart indicator in bottom navigation: ".theme__tab-bar__cart-item-badge"
  • iOS Theme - Favorites indicator in bottom navigation: ".theme__tab-bar__favorites-icon-badge"
  • iOS Theme - Cart indicator on product pages: ".theme__app-bar__cart-button-badge"


What if a class is missing?

If a unique class isn't available for a component, you can start with the parent component and build the selector from there to get to the desired component. 


.parent > div

Can I use non-unique classes?

Automatically generated classes like " css-v9kuon " or test classes like " data-test-id="Navigator" " should  not be used because they can change without warning! If there are no classes available for a certain element, please contact us so that we can add them promptly.