BSS: Banner & Pop-up
  • About us
  • How to create a Banner?
    • πŸ“’ How to create a Single Announcement Banner?
    • πŸƒ How do you create a Running/Scrolling/Marquee Banner?
    • πŸ”„ How to create a Rotating/Carousel Banner?
    • ⏳ How to create a Countdown Timer Banner?
    • 🚚 How to use the Free shipping banner?
    • πŸ’° How to use the Discount banner?
    • πŸ“© How to use the Email Signup banner?
    • 🌍 How to Create a Multilingual Banner?
  • How to create a Window Popup?
  • How to create a Sale Pop-up?
  • FAQs?
    • How to Design Window Popups for Desktop and Mobile (Best Practices)
    • What’s the difference between Countdown Timer and Schedule Time?
    • How to Upload and Optimize Background Banner Images
    • How to Setup Conditions for a Banner?
    • How to Setup Conditions for a Sales Pop-up?
    • How to use a Custom position for a Banner?
    • How to Translate Banner Content?
      • Manual Translation
      • Automatic Translation with LangShop
    • How to Add Languages to Your Shopify Store?
    • How to provide the store's collaborator code?
    • How to approve our support request?
  • Contact us
Powered by GitBook
On this page
  • 1. Recommended Image Type
  • 2. How Your Image Will Appear
  • 3. Tips for Optimizing Larger Images
  • 4. Why Use Pattern Images?
  • FAQs

Was this helpful?

  1. FAQs?

How to Upload and Optimize Background Banner Images

PreviousWhat’s the difference between Countdown Timer and Schedule Time?NextHow to Setup Conditions for a Banner?

Last updated 2 months ago

Was this helpful?

When customizing your app’s background banner, it’s important to choose the right image to ensure it looks great on all devices. Below is a step-by-step guide with visuals to help you understand how to upload and optimize your images effectively.


1. Recommended Image Type

We recommend using a small square pattern image (e.g., 100x100 pixels) with repeatable patterns. This ensures consistent display across different screen sizes and keeps the file size under 4MB, which is the upload limit.

Accepted file formats: Only .jpg, .jpeg, .png, or .gif files are supported.


2. How Your Image Will Appear

Depending on the size of your uploaded image, the system will handle it differently:

  • If the image is smaller than the banner: It will automatically repeat (tile) to fill the space.

  • If the image is larger than the banner: The system will crop it starting from the top-left corner. The visible portion may vary depending on the user’s device screen size.


3. Tips for Optimizing Larger Images

If you prefer to use a larger image, follow these tips:

  • Resize beforehand: Ensure the height is approximately 58px for optimal fit.

  • Crop important content: Center key elements before uploading to prevent unwanted cropping.


4. Why Use Pattern Images?

Pattern images are ideal because they:

  • Ensure a uniform appearance across devices.

  • Reduce file size, improving app performance.


FAQs

Here are answers to common questions about background banner uploads:

  • What happens if my image is smaller or larger than the banner? Smaller images will repeat (tile), while larger images will be cropped from the top-left corner.

  • Why should I use a pattern image? Pattern images ensure a consistent look across devices and reduce file size for better performance.

  • What if my uploaded image doesn’t look right? Adjust the dimensions, crop the image before re-uploading. Refer to the examples above for guidance.


By following these guidelines and referring to the visual examples, you can create a visually appealing and professional-looking background banner that works seamlessly on all devices!

If you have any related questions, please contact us via Live chat or for further assistance.

support-sbc-ta@bsscommerce.com
A small square pattern image that repeats seamlessly.
Smaller images will repeat to fill the banner area.
Larger images will be cropped from the top-left.
Cropping out important content prevents cropping issues
Pattern images maintain consistency on all screen sizes.