How To Open The Product Description By Default On Your Mobile Templates

The mobile templates in Bigcommerce are great for optimizing your store's design for smartphones and tablets. Overall the templates are reasonably optimized for smaller screens. However, there is one place on the product page that is over-optimized: the product description. It is hidden by default requiring an extra touch from your customers to display it. That might be fine if you have very long descriptions, but most customers, myself included, want to see the description right away. Here is an image that shows the default product page on the left, and the modified page on the right:

To automatically display the product description as shown in the picture you will need to follow the instructions below.

Instructions

1. Open the product.html file from the mobile_templates directory.

2. Add the following code right before the </body> tag.

   
   <script type="text/javascript">
   $(document).ready(function(){
       $('#ProductDescription > h3').trigger('click');
   });
   </script>
   
   

3. Save the changes, and upload the modified product.html file to your Bigcommerce server.

How It Works

It is just one line of code that fools the browser into thinking that the product description was clicked. Pretty simple and it should work on pretty much all templates that have the product description element.

This is one simple change that you can make to your mobile templates with a big impact to your customers.

So do it now!