Snippets
Customize Your Storefront with CSS Snippets
Elevate the design of your popup by incorporating custom CSS styles. Simply follow these easy steps:
- 1.Select and Copy: Choose any of the CSS snippets provided below.
- 2.Paste: Go to Orbe's Advanced Settings and find the "Custom CSS" section. Paste your chosen snippet there.
Want to make a bold statement? Transform your Geolocation popup into a full-screen welcoming banner for your customers. Here's how:

Before

After
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:
- Image background: Replace
[YOUR-URL-IMAGE]
with the URL of the background image you desire. To find the URL of your image, navigate toContent > Files
in your Shopify admin. Need more guidance? Learn more about uploading files on Shopify. - Background opacity with linear gradient: The
linear-gradient
inside thebackground
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 thelinear-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).
Last modified 2mo ago