Orbe – Help center
PlansPartnersUse CasesSupportChangelog
  • 👋Before starting
    • Welcome
    • How Orbe works
    • Pricing
    • FAQs
  • 🧩GENERAL
    • Install Orbe
    • Refresh Data
    • Connect Stores
      • Redirect to another store
      • Settings
    • Integrations
      • Klaviyo
      • Global-e
      • Connectif
      • Hreflang Manager
      • Announcement Bar
    • Uninstall Orbe
  • 🌐Geolocation Popup
    • Set up Geolocation
    • Translations
    • Common issues
  • 🔁Selectors
    • Overview
    • Geolocation Button
      • How it works
      • Selector Placement
      • Variables
      • Custom Code
    • Market Selector
  • ⚙️Settings
    • Notifications
    • Behavioral Preferences
    • Custom CSS
  • Developer Reference
    • CSS
    • JavaScript
    • Relocating the Market Selector
    • Integrate your selector
    • Snippets
      • Create a full-screen popup
      • Country Order Customization
      • Language Order Customization
      • Hide the popup in a country
      • Change popup fonts
      • Hide countries
Powered by GitBook
On this page

Was this helpful?

  1. Developer Reference
  2. Snippets

Create a full-screen popup

PreviousSnippetsNextCountry Order Customization

Last updated 1 year ago

Was this helpful?

Want to make a bold statement? Transform your Geolocation popup into a full-screen welcoming banner for your customers. Here's how:

CSS snippet:

.md-modal__backdrop {
    background:
        -webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(0, 0, 0, 0.6)),
            to(rgba(0, 0, 0, 0.6))
        ),
        url('[YOUR-URL-IMAGE]');
    background:
        -o-linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)
        ),
        url('[YOUR-URL-IMAGE]');
    background:
        linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)
        ),
        url('[YOUR-URL-IMAGE]');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.md-modal__content {
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
}

.md-modal__header__title {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center
}

.md-modal__bodyContent p {
    text-align: center !important;
}

Things to Note:

  • Background opacity with linear gradient: The linear-gradient inside the background CSS property applies a semi-transparent black overlay on top of your image. This can make text overlaid on the image more readable against its background. If you'd prefer the image without this darkened effect, you can remove the linear-gradient sections from the CSS snippet.

  • Solid color background: If you'd prefer a solid color as a background instead of an image, replace url('[YOUR-URL-IMAGE])' with a CSS color code (e.g., #FF5733).

  • Stay within the app: Before diving into custom CSS, check Orbe's features in the Shopify Theme Editor. There might be options to achieve what you want without custom code (e.g., removing the close button, adjusting the button position, modifying font colors).

Image background: Replace [YOUR-URL-IMAGE] with the URL of the background image you desire. To find the URL of your image, navigate to Content > Files in your Shopify admin. Need more guidance? .

Learn more about uploading files on Shopify
Before
After