You can adjust colors, map style, address list position, and section padding directly within the Shopify theme editor, seeing changes in real-time before saving.
Map Style and Address List Position
Map Style: Choose between Standard, Light, Dark, or Satellite. Each style offers a different aesthetic, letting you align the map’s appearance with your store’s branding.
Address List Position: Decide if the list of store locations appears on the Left or Right side of the map. This positioning can improve readability and overall layout.
Marker Icon Options
Select Marker Icon: Pick an icon from the built-in options (e.g., Map Marker, Home, Store, etc.). Each icon will be displayed on the map for each store location.
Color Customization
You can fine-tune various color settings to ensure a consistent brand experience:
Accent Color:
Highlights interactive elements like buttons or certain map overlays.Marker Circle Color:
Changes the color of the circular background behind the pin number or icon.Marker Number Color:
Adjusts the text color on the marker circle.Text Color:
Defines the color for text elements, such as store names or details.Card Color:
Sets the background for any card-like elements (e.g., store detail pop-ups).Background Color:
Determines the overall background behind the store listings and map container.Search Background Color:
Controls the backdrop for the search input field.Search Placeholder Color:
Alters the color of the placeholder text within the search bar.Border Color:
Sets the outline color around various elements (e.g., the search field or store cards).Search Text Color:
Specifies the color of typed text in the search bar.
How to Change Colors:
Click the color swatch or hex value beside the label (e.g., Accent Color).
Use the color picker or type a hex code (e.g., #FFFFFF) to select your desired shade.
View the live preview in the theme editor to confirm your selection.
Click Save once satisfied.
Section Padding
Top Padding & Bottom Padding:
Control the spacing above and below the Store Locator section. Adjust the sliders or input box (measured in pixels) to create a layout that complements your overall site design.