Themes and translations

/*
   * Change Ecwid buttons style 
   */
  button.gwt-Button, #wrapper button.gwt-Button { 
    border-radius: 13px; 
    -moz-border-radius: 13px; 
    -webkit-border-radius: 13px; 
    height: 28px; 
    background-color: #e4e4e4; 
    padding: 0 15px; 
  }  
   
  button.gwt-Button:active,
  #wrapper button.gwt-Button:active { 
    background-color: #999999; 
  }  
   
  div.ecwid-productBrowser-details-rightPanel div.ecwid-productBrowser-backgroundedPanel {
    min-width:185px; 
    width:auto; 
  }

Add custom CSS theme in Ecwid Control Panel (for a single store)

Ecwid provides a merchant with a built-in CSS customization tool in their control panel in the 'Design' section: Ecwid automatically loads the CSS code entered by user in their storefront. This allows merchants to customize their store look and feel flexibly. See also "How to change Ecwid design" article in our knowledge base.

Add custom CSS theme in an app (for multiple stores at once)

Ecwid API allows you to do the same in more convenient way: you simply specify the URL of file with your custom CSS code and Ecwid automatically loads that code in the user storefront. So you don't need to put the CSS on user site manually or ask a merchant to do that.

In more details:

1. Register your app with Ecwid that customizes storefront.
2. Contact us and provide the https URL of the .css and file you’d like to load in the user storefront.
3. When asking a user to install your app, Ecwid will request the customize_storefront permission from them. (If your app is for a specific store, make sure to add customize_storefront scope in the OAuth process.)
4. The next time merchant's storefront is loaded in any browser or website, your external CSS file will be automatically appended, loaded, and executed on that page.

📘

Permission required: customize_storefront (see Access scopes)

Q: Can I create new themes as apps?

Yes, you can! Please check out this page for more details: How to create a theme

Store-specific custom CSS

You may want to apply different CSS codes depending on the store your application is loaded.

For example, if your application provides new design themes for merchant storefront, you may need to give a merchant ability to choose the theme they want to enable and change the applied CSS code according to their choice.

In such cases, you will need to use custom JS files to dynamically detect merchant store ID and load different styles depending on the user store ID. See Custom JavaScript files for details.

Storefront interface translations

When the app adds new features to storefront that need translations, most likely the app loads its external JavaScript code too. The app can determine the current language of storefront using the JS API method: Ecwid.getStorefrontLang

To translate the app in storefront, follow these steps:

1. Determine storefront language before initializing the app
2. Set/load the required translated text labels for app interface

If the current language is not supported, use the fallback labels. For example, load English texts if user is Spanish and you don't have Spanish translations yet.