Docs

Logo Web/Mobile Overview

This guide follows the current web-mobile-logo-delete-upload flow for Web/Mobile logo management.

Video Walkthrough

Current Web/Mobile Logo Overview

The current panel shows these branding slots:

  • Header Logo
  • Mobile Logo
  • Footer Logo
  • Loader
  • Favicon

Each slot displays:

  • current image preview
  • size guideline under the slot
  • supported formats such as SVG, PNG, GIF
  • hover actions for replace and delete where an image already exists

Managed Slots (Web/Mobile)

  • Header Logo
  • Mobile Logo
  • Footer Logo
  • Loader
  • Favicon

Hover Actions on Existing Logos

Each slot supports:

  • Upload (cloud/upload icon or drag-drop)
  • Replace existing file (upload icon on hover)
  • Delete existing file (trash icon on hover, where available)

End-to-End SOP Flow

  1. Open Logo > Web/Mobile.
  2. Review the existing logo previews and slot rules.
  3. Upload a new file in the required slot.
  4. Replace or delete an existing slot image if needed.
  5. Click Save.
  6. Verify the updated branding on the frontend if needed.

Step 1: Review Slot Requirements

Before changing any logo:

  1. Open Logo > Web/Mobile.
  2. Check the slot name carefully.
  3. Review the maximum file size shown under the slot.
  4. Confirm the file type matches the allowed formats.

The current screen shows examples such as:

  • 360x120px for header, mobile, and footer logos
  • 300x300px for loader
  1. Open the target slot.
  2. Click upload icon or Browse.
  3. Select file and wait for preview.
  4. Repeat for other slots if needed.
  1. Hover on an existing slot.
  2. Click upload/replace icon.
  3. Choose replacement file.
  4. Confirm new preview appears.

Step 4: Delete a Logo from a Slot

  1. Hover on slot.
  2. Click trash icon.
  3. Confirm the slot changes back to the empty upload state.

The video shows this clearly on the Loader slot, where the image is removed and the upload placeholder returns.

Step 5: Save Changes

  1. Click top-right Save.
  2. Wait while the panel shows the saving state.
  3. Confirm the new slot previews remain visible after save.
  4. Refresh/check front-end branding if needed.

File Requirement Notes

  • Follow per-slot size hints shown below each slot.
  • Allowed formats shown in UI include SVG, PNG, GIF.
  • Favicon has a smaller size requirement than other logo slots.

Quick Troubleshooting

  • Save is disabled or no update: ensure at least one slot has a changed file.
  • Wrong logo visible: clear cache and verify correct slot was updated.
  • File rejected: check slot size/format requirement and re-upload.
  • Deleted by mistake: upload logo again and save.