Selector Placement
Last updated
Last updated
The Selector Position input in the Geolocation Button app block lets you control exactly where the button will appear within your theme. By specifying a particular container's CSS class or ID, you can place the Geolocation Button precisely where you want it in your store’s layout.
In the Selector Position field, enter the class or ID of the container where you want the Geolocation Button to appear. Use the format:
For a CSS ID: #id-name (e.g., #shopify-section-footer)
For a CSS class: .class-name (e.g., .header-section)
Multiple locations If you want the Geolocation Button to appear in multiple locations (for example, in both the header and footer), you need to duplicate the app block.
By duplicating the app block and entering a unique class or ID for each position, you have the flexibility to show the selector in multiple places on your site, such as the header, footer, drawer menu or any other section.
class or ID using the Browser InspectorTo identify the exact class or ID of the container where you want to place the Geolocation Button, you can use the Inspector tool available in most browsers. Here’s how:
Open the Inspector:
Go to your store’s frontend and right-click on the area where you want to place the Geolocation Button.
Select Inspect (in Chrome) or Inspect Element (in Firefox) to open the Developer Tools.
Locate the Container’s Class or ID:
In the HTML structure that appears, hover over different elements until you find the container that matches the section you want (e.g., header, footer).
Look for the id or class attribute of that container. These attributes are usually displayed in the Inspector window.
Copy the Selector:
Once you’ve identified the right id or class, copy it.
For an ID, you’ll use #id-name (e.g., #shopify-section-footer).
For a class, you’ll use .class-name (e.g., .header-section).
Paste into the Selector Position Field:
Return to the Geolocation Button app block settings.
Paste the copied selector into the Selector Position field.
This method ensures the Geolocation Button is positioned exactly where you need it in your theme, creating a seamless customer experience.