Customize Switcher Colors on the Homepage with CSS

Modified on Wed, 21 Jan at 10:19 PM

As shown in our previous guide, you can customize the Transtore switcher’s colors and font styles by adding custom CSS to your theme. Please check it out here: How can I customize the color and font elements of our switcher?

In some cases, you may want the Transtore switcher to use different styles only on specific pages, such as the homepage, while keeping the default design on product or collection pages. This can be done by scoping your CSS to the homepage.

If you already have custom CSS for the Transtore switcher, you do not need to rewrite it. Simply prefix your existing selectors with a homepage-only class. The most reliable option is using Shopify’s homepage template class, for example template-index, which is present on the homepage but not on product or collection pages.

Below is an example showing how to apply your existing CSS to the homepage only.

<style>
  @media only screen and (min-width: 989px) {
    /* Background color for the expanded dropdown and trademark section */
    .template-index .ts-dropdown-expand > .ts-switcher-expand,
    .template-index .ts-dropdown-expand > .ts-switcher__trademark {
      background: #9f9f9f !important;
    }

    /* Labels in country, language, and currency sections */
    .template-index .ts-switcher-expand__select.ts-country label,
    .template-index .ts-switcher-expand__select.ts-language label,
    .template-index .ts-switcher-expand__select.ts-currency label {
      color: #fff !important;
      font-size: 12px !important;
    }

    /* Text styles for country, language, currency options and list items */
    .template-index .ts-switcher-expand .ts-country__name,
    .template-index .ts-switcher-expand .ts-language__name,
    .template-index .ts-switcher-expand .ts-currency__name,
    .template-index .ts-switcher-expand__content .ts-list-item__name {
      color: #777 !important;
      font-size: 16px !important;
    }

    /* Background color for the selected item */
    .template-index .ts-list .ts-list-item.ts-list-item__active {
      background-color: #e59e9e !important;
    }

    /* Background color on hover for list items */
    .template-index .ts-list .ts-list-item:hover {
      background-color: #b3e495 !important;
    }

    /* Arrow icon color inside the country/language/currency options */
    .template-index .ts-switcher-expand .ts-country__icon-arrow svg,
    .template-index .ts-switcher-expand .ts-language__icon-arrow svg,
    .template-index .ts-switcher-expand .ts-currency__icon-arrow svg {
      fill: #006fbb !important;
    }

    /* Apply button inside the dropdown */
    .template-index .ts-switcher-expand__apply {
      background: #9d9352 !important;
      color: #ffffff !important;
      font-size: 12px !important;
    }
  }
</style>

If you’re not sure how to customize Transtore switcher or want us to double-check your code, feel free to contact our support team via email at support@transtore.app or submit a ticket here. We'd be happy to help.