Country
/
Overview
Last updated

Country

The Country component displays a country selector that allows visitors to choose their country, which updates locale settings for pricing, shipping, and content.

Usage

<fluid-country></fluid-country>

Attributes

AttributeTypeDefaultDescription
hide-widgetbooleanfalseWhether to hide the component
class-namestring—Additional CSS classes

Display Options

AttributeTypeDefaultDescription
display-typestring'dropdown'Display type: 'dropdown', 'flags', 'list'
show-flagbooleantrueShow country flag icons
show-namebooleantrueShow country names
show-codebooleanfalseShow country codes (US, CA, etc.)

Examples

<fluid-country display-type="dropdown"></fluid-country>

Flag Buttons

<fluid-country
  display-type="flags"
  show-name="false"
></fluid-country>

Full List with Codes

<fluid-country
  display-type="list"
  show-code="true"
></fluid-country>

JavaScript API

// Get current country code
const countryCode = window.FairShareSDK.getCountryCode();
console.log('Country:', countryCode); // e.g., "US"

// Update locale settings including country
await window.FairShareSDK.updateLocaleSettings({
  country_code: "CA"
});
Previous page
Next page