Storefront Attributes
The Global‑e integration relies internally on CSS selectors to locate various data points on your web store. This means that we may rely on a combination of:
The HTML structure of the page
Classes
Attributes (and their values)
Elements with specific IDs
To ensure a robust and seamless workflow, we highly recommend implementing the storefront attributes outlined in this document. By doing so, our team can configure our internal CSS Selectors to target these specific attributes. This empowers you to make future updates to your web store without needing assistance from Global-e to adjust the selectors.
Storefront attributes not only streamline our integration process but also significantly enhance the stability and efficiency of your integration.
Country Switcher Flag
Country Switcher Flag - [data-ge-shippingswitcher-flag]
Place a new element with this attribute where you want us to place the Country Switcher Flag. Do not worry about styling our flag, that is something we will take care of to match your theme.
Example
<nav class="header"> <img src="logo.png"> <a href="/home”>Home</a> <a href="/collections/all">Shop</a> <span data-ge-shippingswitcher-flag /> <span>My Cart</span> </nav>
General Price
Price - [data-ge-price]
Place this on any price element on the product details page and product list pages (search results, categories, and more). This does not need to be applied if another price attribute is also applied.
Do not apply this attribute to Basket or Mini Basket prices. See the Basket / Mini Basket section for the attributes to apply to these prices.
Example
<div data-ge-price>$19.95</div>
Custom Price Calculation
These attributes are meant to be combined in order to accurately calculate more complex prices outside of the cart, for example, when advertising prices in a Product’s description.
Base Price - [data-bp="{BasePrice}"]
This attribute specifies the {BasePrice} (or price-per-unit) to be used when doing price calculations.
Quantity - [data-quantity="{Quantity}"]
This attribute specified the {Quantity} (or number of units) to be used when doing price calculations. If no quantity is specified (or the attribute is omitted), then the default value of 1 will be assumed.
Example
<div> Normally <span data-ge-price>$10</span>, Buy 10 at <span data-bp="5">$5</span> each, Totaling <span data-bp="5" data-quantity="10">$50</span> </div>
Basket / Mini Basket
Here are the most common basket selectors. We have many more, but these are the most common. Let us know if any price in the basket is not covered, including discounts, subtotals, product savings… anything at all… and we will look up the appropriate attribute for you.
Product CartItemId - [data-ge-basket-cartitemid="{CartItemId}"]
Place this on the product "row" in the Basket/Mini Basket. The {CartItemId} should be the SKU of the product.
Product SalePrice - [data-ge-basket-productsaleprice]
The discounted sale price of the product.
Product ListPrice - [data-ge-basket-productlistprice]
The original list price of the product.
Product Total - [data-ge-basket-producttotalprice]
The total sale price of the product (Sale Price * Quantity)
Product SubTotal - [data-ge-basket-productsubtotalprice]
The total list price of the product (List Price * Quantity)
Product Total Discount - [data-ge-basket-productdiscountsprice]
The total discount for this product (Total List Price - Total Sale Price)
Basket Total - [data-ge-basket-totals]
Total Sale Price for the Basket/Mini Basket.
Basket SubTotal - [data-ge-basket-subtotals]
Total List Price for the Basket/Mini Basket.
Basket Total Discount - [data-ge-basket-discounts]
Total Discounts for the Basket/Mini Baskets (Basket SubTotal - Basket Total)
Example
<table> <tbody> <tr data-ge-basket-cartitemid="SHOE_2024"> <td>Future Shoe</td> <td>x5</td> <td data-ge-basket-productsaleprice> $10 </td> </tr> <tr data-ge-basket-cartitemid="LKYHAT843"> <td>Lucky Sports Hat</td> <td>x1</td> <td data-ge-basket-productsaleprice> $50 </td> </tr> </tbody> <tfoot> <tr><td> <span>Total: </span> <span data-ge-basket-totals>$100</span> </td></tr> </tfoot> </table>
Checkout
Checkout Button - [data-ge-checkout-button]
Place this attribute on any button that takes you to checkout. This can be applied to any clickable element (a, input, div, span, etc…), not just buttons.
Checkout Container - [data-ge-checkout]
Place an element with this attribute where you would like our checkout to be injected on the /pages/international-checkout page.
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>