Skip to main content

Documentation Portal

Element Visibility

These attributes will hide & show elements when the customer is in a Global-e operated country.

The two attributes can be used together to show one piece of information for domestic customers and a different piece of information for international customers.

It is best to keep “Global‑e operated” in mind when thinking about if something should be hidden or shown.

Hide - [data-ge-hide]

This attribute sets the property display: none !important; (via CSS) when the customer is in a Global-e-operated country and does nothing when in a non-operated country.

This has the effect of hiding the element for international customers while keeping that element visible for non-operated customers.

Show - [data-ge-show]

This attribute sets the property display: block !important; (via CSS) when the customer is in a Global-e-operated country, and sets it to display: none; when in a non-operated country.

This has the effect of showing the element for international customers while keeping that element hidden for non-operated customers.

This is only to be applied to elements you wish to be shown exclusively to international customers but remain hidden for domestic customers.

Example

This example shows how one message can be shown for domestic customers, while a different message is shown for international customers.

<div data-ge-hide>
Free Shipping!
</div>
<div data-ge-show>
Shipping is calculated at checkout.
</div>