How can I customize the color and font elements of our switcher?

Modified on Wed, 4 Dec, 2024 at 5:00 AM

Our app does not currently have options to change colors, font sizes, etc. from our in-app settings.

In case you are good at CSS/HTML, please add the following code to make the changes.

Step 1: Go to Sales channels -> Online store -> Themes

Step 2: Choose the theme you want to edit -> Click 3 dots -> Edit code

Step 3: Add the transtore-custom.liquid file

In the left-hand sidebar under the Snippets folder, click Add a new snippet. Name the file as transtore-custom.liquid and click Done

Step 4: Render the transtore-custom.liquid file

In the theme.liquid file, decide where you want the transtore-custom.liquid content to appear (typically, this could be before the </head> tag, depending on your needs). Add the following line of code where you want to render the created file: {% render 'transtore-custom' %}

Step 5: Once the transtore-custom.liquid file is created, open it and paste your custom code (or the code provided by our app) into this file.

Note: You don't necessarily need to create a file in step 3; you can directly insert the code at the end of the theme.liquid file. However, I recommend creating a separate file for easier management.

Below is the code to adjust the color, font, and background color of the switcher. You can refer to it and modify the color codes as your desired (no need to select all). Modifying the code requires basic CSS knowledge. If you're not able to make the changes, please don't hesitate to contact us directly at support@transtore.app.

<style>
  /* 1. MAIN SWITCHER */
    /* Background color of the switcher */
    #ts-switcher{
      background: #fff !important;
    }

    /* Color and font size of the text on the switcher */
    #ts-switcher .ts-switcher-btn__name,
    #ts-switcher.ts-dropdown-btn__open .ts-switcher-btn__name{
      color: #fff !important;
      font-size: 12px !important;
    }

    /* Color of the divider icon on the switcher */
    #ts-switcher .ts-switcher-btn__divider--pipe svg{
      fill: #fff !important;
    }

    /* Color of the arrow icon on the switcher */
    #ts-switcher .ts-switcher-btn__icon-arrow svg{
      fill: #fff !important;
    }

  /* 2. DROPDOWN */

    /* Background color of the dropdown section */
    .ts-dropdown-expand > .ts-switcher-expand,
    .ts-dropdown-expand > .ts-switcher__trademark{
      background: #1dc88f !important;
    }

    /* Color and font size of the dropdown section headers */
    .ts-switcher-expand__select.ts-country label,
    .ts-switcher-expand__select.ts-language label,
    .ts-switcher-expand__select.ts-currency label{
      color: #FCF9DD !important;
      font-size: 12px !important;
    }

    /* Color and font size of the dropdown items */
    .ts-switcher-expand .ts-country__name,
    .ts-switcher-expand .ts-language__name,
    .ts-switcher-expand .ts-currency__name,
    .ts-switcher-expand__content .ts-list-item__name{
      color: #4b3ff2 !important;
      font-size: 16px !important;
    }

    /* Background color of the selected item */
    .ts-list .ts-list-item.ts-list-item__active{
      background-color: red !important;
    }

    /* Background color of the item when hovered over */
    .ts-list .ts-list-item:hover{
      background-color: green !important;
    }

    /* Arrow icon's color */
    .ts-switcher-expand .ts-country__icon-arrow svg,
    .ts-switcher-expand .ts-language__icon-arrow svg,
    .ts-switcher-expand .ts-currency__icon-arrow svg{
      fill: #000 !important;
    }

    /* Divider icon's color */
    #ts-switcher .ts-switcher-btn__divider--pipe svg{
      fill: #FCF9DD !important;
    }

    /* Apply button */
    .ts-switcher-expand__apply{
      background: black !important;
      color: white !important;
      font-size: 12px !important;
    }
</style>

Was this article helpful?