Styling adjustments (CSS)

Overview

You can make many styling adjustments to your app without deep code changes. For most components of our apps, we provide unique classes that you can access via CSS, so you can customize the styling of your app as much as CSS allows.

You will then see the new "Deployment" option in your Shopgate admin:

This takes you to the extension and deployment configuration area. This is where extensions and their settings are managed.

In the extension list, select the extension @shopgate-project/content-styling

Here you can save your styling.

To see the CSS classes you need, you can either inspect your live app with the Google Chrome or Safari dev tools or, if available, use a developer sandbox app.

Option 1: Live app

To inspect your live app, follow these steps depending on your device:

Android app:

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

iOS app:

1. First, you need to allow your desktop Safari to read web information from your iOS device. To do this, go to Settings > Safari > Advanced and turn on "Web Inspector".
2. Connect the device to your macOS device with a cable, open Safari and click "Develop" in the top navigation bar. Your connected device should appear here.
   
3. Open your app on your iOS device. It should now appear as a debugging option.
   
4. You can now navigate through the elements of the app in Safari
   

Option 2: Sandbox app

The advantage of the sandbox app is that you can also inspect the iOS app and test changes very quickly. This option requires developer skills.

Creating a sandbox app

With the sandbox app, you can open the app in your browser, view the existing components in the browser's inspector and take the corresponding CSS classes from there.

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

https://developer.shopgate.com/introduction/getting-started/set-up-environment

 
Setting up the extension

A specific extension is required to apply styling to the app. Please clone the following extension via Git into the "extension" folder of your sandbox app.

https://github.com/shopgate-professional-services/ext-content-styling

In the extension, you will find a file called "extension-config.json". It is used to include the new styling in the app. To do this, change the "default" in the "configuration" section of the extension config.

 
Configuring the styling extension

To make your custom styling available in your live app, you first need to save it in the extension configuration. Use the following schema:

{
  "styles": {   
     "<cssSelector>": "<glamorStyleObject>" 
  }
}

The <cssSelector> can be any valid CSS selector and <glamorStyleObject> any valid Glamor style object.

Deployment

To apply the changes to your app, you need to deploy them.

The deployment takes about 5–10 minutes. After that, you will see your changes right away.

Example

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

The selector then needs to be converted into a "Glamor object" and saved in the "extension-config.json" of the "content-styling" extension.

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 save it in the "extension-config.json".

In the extension config, it looks like this

{
  "styles": {
    ".ui-shared__card": {
      "color": "#fff",
      "background": "#121212"
    }
  }
}

Before:                                                                                                After:

Examples of classes:

• Rating stars: ".rating-stars-filled"

• Discount badge: ".ui-shared__discount-badge > span"

• Price: ".price.ui-shared__price"
• Strikethrough price: ".price-striked.ui-shared__price-striked"

FAQ

What if a class is missing?

If there is no unique class for a component, you can start from the parent component and build the selector from there to reach the component you want. 

Example:

.parent > div

Important: If Shopgate makes structural changes to the app, we cannot guarantee that these chained selectors will keep working. Only use them in exceptional cases and contact us so that we can add a unique class.

Can I also use classes that are not unique?

Automatically generated classes such as "css-v9kuon" or test classes such as "data-test-id="Navigator"" should not be used, as they can change without notice! If no classes are available for certain elements, please contact us so that we can add them for you.