Disabling JavaScript and Inline Styles for Mobile Storefront Product Descriptions

If you've customized your product descriptions using JavaScript and Inline CSS, your customers may have trouble viewing them in certain mobile browsers that are are unable to handle JavaScript and inline CSS.

As a result, products containing the code may appear garbled, or not may not display at all.

To remedy this, you need to hide the JavaScript and inline CSS from mobile browsers by putting comment tags before and after the code. Other browsers, such as those used on laptops, PCs, and other devices will still be able to process the JavaScript and CSS, but to mobile browsers, they will appear as comments and will be ignored.

To hide code from mobile browsers:

  1. In your product descriptions, look for any blocks of JavaScript in your template. These will have the form:

<script type="text/javascript>
...javascript...
</script>

  1. To hide the code, insert <!-- between <script type="text/javascript> and the first line of code, and //--> between the last line of code and </script>.(If these comment tags are already in the code, you don't need to add them again.)
  2. Now search for any inline CSS. This means HTML tags into which the depreciated "style" attribute has been inserted. They may look like this:

<p style="color: #FF0000; font-face: Arial;">Text impacted by style</p>

Or even:

<p><style="color: #FF0000; font-face: Arial;">Text impacted by style</style></p>

  1. You should either remove the "style" attribute or replace it with a "class" attribute as described in the next step.

  2. If you want to use inline CSS in your product descriptions, use "class" to pull it from the mobile CSS file. For example:

<p class="redface">Text impacted by style</p>

 (Where .redface is a style in the mobile CSS file)

You can create global styling rules for specific classes by editing your mobile_interface.css file.

To access this file, go to Design > File Editor in your Admin Area and click mobile_interface.css from the Shortcuts list on the right. Show Add styling changes as desired, making sure to click Save when finished.

We do not recommend editing your mobile CSS file unless you are an advanced user with coding knowledge.