How to use Inline Translation

Inline Translate in Magento is a user friendly way to update / amend text on the frontend of the site. 


To enable Inline Translate on a particular Storeview


  1. Navigate to System > Configuration > Developer.
  2. In the top left of this screen, select the relevant Storeview that you would like to enable Inline Translations for from the Current Configuration Scope dropdown. 
  3. The sections within the Developer that we are interested for the purposes of enabling Inline Translate are the Developer Client Restrictions tab, as well as the Translate Inline tab (so please expand both so as to view the fields contained within each).
  4. Within the Developer Client Restrictions tab, enter your IP address (you can find this out by googling 'what is my ip address') so that only those at your IP address can view / access the Inline Translate feature on the frontend.
  5. Once your IP has been entered, within the Translate Inline tab, set the Enabled for Frontend field to Yes and click Save Config.


To use Inline Translation on the frontend of the website to edit translation text

  1. In Firefox (inline translate does not work 100% as expected in Chrome), open the frontend of the website that you would like to amend the translation text (storeview which you enabled this for).
  2. Do a full page refresh by clicking CTRL+F5, to ensure you're viewing most up to date frontend. At this stage, you should see red boxes around all the elements that are now available to be inline translated. 
  3. Find the elements you would like to translate, and hover over the red box encasing until you see a little book icon. Click on the book icon.
  4. You should now see a popup (as per the one below) where your new text can be entered in the Custom field. Ensure that Store View Specific is also ticked, and once you are happy with your update click Submit.


5. After clicking Submit, and doing another full page refresh on the frontend (CTRL+F5), you should now see your updated text appear. 

6. Once you are happy that you have finished all the required inline translating, navigate back to System > Developer and ensure Translate Inline is then disabled.

Note: If you are not seeing the red boxes or your translation updating on the frontend, even after a full refresh (CTRL+F5) navigate to System > Configuration and clear Translation cache. You can also disable this before beginning the process of inline translating to ensure you're not seeing a cached version (outdated) of the page on the frontend.


Have more questions? Submit a request


Please sign in to leave a comment.