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.

Please be aware that our recommended mobile solution is to install a responsive theme, which renders the Mobile Commerce feature obsolete. If you decide to continue using the feature with a legacy non-responsive theme, however, you can address this particular issue by hiding 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 theme. These will have the form:

    <script type="text/javascript>

  2. 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.)

  3. 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>

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

  5. 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. 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.

Did this answer your question?