Customize the Storefront Home Page Experience for Mobile Web, Native App, and Desktop Users – Onosys

Customize your storefront welcome page with Context-Aware Home Page Content. This update gives you the flexibility to tailor your home page messaging based on the platform your guest is using—whether it’s an Mobile Web, iOS App, Android App, or Desktop.

With the update, you can allow guests to have personalized, relevant experiences:

Display dynamic content based on the user's platform.
Customize the hero box, including image, messaging, and description text independently for each experience (Mobile Web, iOS App, Android App, Desktop).
Promote app-specific downloads, platform-targeted offers, or device-relevant calls-to-action.

Example Use Cases

Encourage app adoption with a Download the App banner shown only to mobile web users.
Highlight on-the-go mobile discounts:
- App (iOS/Android): “Exclusive deal: Free dessert when completing an app order.”
Showcase desktop-only offers or enticing images that are best suited for a larger screen.
- Desktop: “New! Pepperoni Twists - check out this new item in our 4 item combo” with a nice, large image enticing the guest to order the new item.
Run platform-specific promotions or advertising to drive orders where they matter most.

How to Configure

Note: Your Client Success Manager will need to assist with implementing or customizing this feature.

Log in to the Onosys Admin Portal.
Navigate to:
Settings → UI Config
Use Ctrl+F (or Cmd+F) and search for "home".
Update "displayContexts" to define display contexts for desktop, mobile, and app users
Update the settings to customize the display per context:

"home": {
    "dynamicContentAreas": [
      {
        "displayContexts": [
          "desktop"
        ],
        "elements": [
          {
            "config": {
              "titleTranslation": "HeroBox_Title",
              "descriptionTranslation": "HeroBox_Description",
              "classes": [
                "centered",
                "padding-Y-Double",
                "padding-X-Base",
                "borderRadius-Min",
                "borderColor-Black"
              ],
              "contentWrapper": {
                "classes": [
                  "maxWidth-Small",
                  "padding-Double",
                  "backgroundColor-Transparent",
                  "borderRadius-Base",
                  "textColor-Black",
                  "titleColor-Black"
                ]
              },
              "inlineStyles": {
                "max-width": "70em",
                "border-style": "solid",
                "border-width": "2px",
                "background": "url(/FileSystem/1200x300.png) no-repeat center center / cover"
              }
            },
            "name": "heroBox"
          }
        ]
      },
      {
        "displayContexts": [
          "mobile",
          "ios",
          "android"
        ],
        "elements": [
          {
            "config": {
              "titleTranslation": "HeroBox_Title_Mobile",
              "descriptionTranslation": "HeroBox_Description_Mobile",
              "classes": [
                "padding-Double",
                "borderRadius-Base",
                "backgroundColor-Transparent",
                "borderColor-Transparent"
              ],
              "inlineStyles": {
                "border-style": "solid",
                "border-width": "1px"
              },
              "contentWrapper": {
                "classes": [
                  "textColor-Black",
                  "titleColor-Black"
                ]
              }
            },
            "name": "heroBox"

Note: Your Client Success Manager will need to assist with implementing or customizing this feature. Additionally, images provided will expand to fill available space while maintaining their ratios. If it is the first time a client is uploading a hero box image, CSM's should follow this article :

If the image is intended to be a full screen banner, we recommend:

Width: 1200-1400px

Height: 200-300px