Skip to content

CMS Management for Apps

Your native app is fully integrated with our Drupal CMS. You do not need to learn a new system to maintain app content. However, since mobile apps behave differently than web browsers, there is a dedicated content type for the app start page.

The App Storefront

While the app shares product data with the web shop, the Start Page (Home) is managed separately to allow for app-optimized campaigns.

  • Location and Path: In Drupal, look for the page “Storefront App”.
  • Content Type: The App Storefront uses the content type “App Storefront Content”.
  • Setup: Our CMS team prepares this page for you during the onboarding phase. You can simply add your content thereafter.

Supported Paragraphs

The app renders content natively (not as a webview) for maximum performance. Therefore, only specific Drupal paragraphs that have a native counterpart are available in the App Storefront.

Currently supported components include:

  • Slider: Swipeable hero banners or campaigns.
  • Group: Group elements together or create rows.
  • Headline: Section titles.
  • Image: Single banners or promotional visuals.
  • Category Teaser: Visual links to specific product categories (e.g., “New Arrivals”, “Sale”).
  • Recommendation: Automated product recommendation sliders (e.g., “You might also like”).

Best Practices for Mobile Content

To ensure your content looks great on smartphones and the app remains fast, please follow these guidelines.

1. Typography & Fonts

The app usually ships with two standard font weights derived from your CI (e.g., Standard/Medium and Emphasized/Bold).

  • Display Fonts: If your campaign requires a special “decorative” font (e.g., for seasonal campaigns) that is not part of the standard set, this needs to be integrated by the development team first. Please align with the CMS team early.

2. Spacing & Layout

  • Use REM values: For margins and paddings, stick to rem units. This ensures spacing scales correctly with the user’s device settings (Accessibility).
  • Positive Margins Only: Avoid negative margins, as they can cause layout glitches in the native rendering engine.

3. Performance & “Content Hygiene”

Mobile devices have varying processing power and data connections. A bloated start page leads to slow loading times and app crashes.

  • Clean up old Content: Paragraphs that are time-controlled (scheduled) and have expired are often still loaded in the background logic. Please delete expired paragraphs regularly.
  • Limit Image Sizes: Even though we optimize images, uploading massive print-ready files slows down the app.
  • Keep the DOM light: Avoid nesting too many heavy elements (like 10 sliders in a row).

4. Accessibility (Sliders)

  • Avoid Auto-Start: We strongly recommend disabling auto-start for sliders. Moving content is difficult for users with visual impairments to read and can be distracting. Let the user swipe at their own pace.

Technical Limitations

Because the Storefront is rendered natively, it works differently than a browser.

No External Scripts (JavaScript)

You cannot inject custom JavaScript or third-party scripts directly into the App Storefront.

  • Why? The app is not a website; it is compiled code. There is no “Header” to paste a script tag into.
  • Solution: If you need interactive content that requires JavaScript (e.g., a Sweepstake/Gewinnspiel, a complex Survey, or a Size Advisor), create a Landing Page in the web shop. Link to this page from the app. The app will open it in a Webview (an in-app browser), where all scripts will run normally.

Native vs. Webview Strategy

We technically have the capability to switch specific views (like the Storefront) from Native to Webview on a per-customer basis.

Previewing Content (Revisions)

One of the most powerful features of the App CMS is the ability to test new campaigns on your device before they go live to customers.

  1. Create a Revision: Make your changes in Drupal (e.g., switch the Hero Banner for “Black Friday”). Do not publish yet. Instead, save it as a Draft/Revision.

  2. Get the Revision ID: In Drupal, generate a preview link or look at the URL of your revision. Note down the Revision ID number.

  3. Open the Nightly App: Open the test version of your app (Nightly Build) on your smartphone.

  4. Enter Test Menu: Long press the brand icon in the top navigation bar of the storefront to open the Test Menu. (Note: If you don’t see this menu, check our Test Versions Guide).

  5. Activate Revision: Find the field “Revision ID”, enter your number, and tap Save.

  6. Refresh: Go back to the Home screen. You will now see your draft content live in the app.