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.
Overview
To be able to update the CSS in the app, your account must first be activated. Please contact us via support-us@shopgate.com
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:
- 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
- In Google Chrome, open chrome://inspect/#devices
- Open the app
- Under "Remote Target" you see the web view of the app and can open it via "inspect".
- 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.
https://developer.shopgate.com/introduction/getting-started/set-up-environment
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.
https://github.com/shopgate-professional-services/ext-content-styling
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.
Deployment
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.
Example
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"
FAQ
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.
Example:
.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.