Styling adjustments (CSS)

In this article, we'll explain how you can customize your app using CSS.

Overview

You can make many styling adjustments to your app without having to make deep code adjustments. To that end, we provide unique classes for most of our app components that you can access via CSS, allowing you to customize the styling of your app as much as possible within the capabilities of CSS.  

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

This will take you to the Extension and Deployment Configuration area. This is where extensions and their settings are managed.

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

Here you can save your styling.

To view the necessary CSS classes, you can either examine your live app using the Google Chrome or Safari dev tools, or - if available - use a developer sandbox app.

Option 1: Live App

To view your Live app, follow these steps, depending on your device:

Android App

1. Connect your Android device to your computer and enable USB debugging. Depending on your device, you may be prompted to do so when connecting, or you may need to enable the option in your device settings.
2. Open chrome://inspect/#devices in Google Chrome
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 for the CSS selectors you need.

iOS App:

1. First, you need to allow web information to be read from your desktop Safari on your iOS device. To do this, go to your Settings > Safari > Advanced and activate "Web Inspector".
2. Connect the device to your MacOS device via 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 view the iOS app and test changes very quickly. This option requires developer skills.

Creating a sandbox app

With the sandbox app, you can launch the app in the browser and use the browser inspector to view the existing components and extract the corresponding CSS classes.

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

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

Set up extensions

A specific extension is required to enable styling in 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

Inside the extension you will find a file called "extension-config.json". This is used to incorporate the new styling into the app. To do this, you will need to change the "default" in the "configuration" section of the extension config.

Configuration of the styling extension

To ensure that your customized styling is applied to your live app, you need to first save it within the extension configuration. Follow the structure outlined below to properly set this up:

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

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

Deployment

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

Deployment takes approx. 10 minutes. You will see your changes immediately afterwards.

Example

Start the frontend of the sandbox app with the “ext-content-styling” extension and call it up in your browser.  You can view the elements there via 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.

The selector must then be converted into a “glamor object” and stored 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 to a Glamor object and store it in "extension-config.json".

In the configuration file for the extension, it should be formatted as follows:

{
  "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"
• 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"

FAQ

What if a class is missing?

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

Example:

.parent > div

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 these can change without warning! If no classes are available for certain elements, please contact us so that we can add them for you.