Responsive tables - How to create
The standard tables in the Shopify rich text editor (Pages, Blogs, Product description) are not mobile friendly or responsive. When creating wide tables, you can use this method to allow the tables to break-down nicely for mobile devices.
Samples and learn more here:
https://shopify.github.io/slate/css-examples/#responsive-tables
In this tutorial we will cover two responsive tables. I'll include sample code for you to copy and use as a template.
Size Chart Example
Desktop:
Mobile (responsive version):
Mobile without grey background version:
Image Table Example
Mobile without grey background version:
Let's get started
When building responsive tables, the rich text editor tools will not work. You'll need to code these in HTML only. For that, we'll click on the code view icon in the editor:
When you toggle in to code view, the other toolbar icons will disappear. That's how you'll know you're in code view:
- 1
-
Create two pages and add sample table code
Create two pages in the Shopify Page Editor:
https://shopify.com/admin/pages
The first one will be the Size Chart table and the second will be the Image table.
Size Chart Table
Copy the code from this file (click the link to view the code) and paste it in your first page:
Be sure to be in Code View (HTML view) as shown above before you paste the code.
Image Table
Use this code for the second page you create:
Click to view image table code
- 2
-
Add CSS to handle responsive code
This is a one-time step. You'll need to add some CSS style code. Where you add the code depends on your version of Pipeline, I'll cover that after the code links.
Option 1 - Grey background color on mobile
Or
Option 2 - No background color on mobile
Option 1 is nice for reading text grids. Option 2 works better for the image table. Since the style will apply to all your responsive tables, choose the one you prefer for all your tables. If you need both, you can add a special class and add addition style code to handle that (not covered in this tutorial).
Where do I add the code?
Use this link to learn where exactly to add this code snippet:
Where to add your CSS style code
Once you've added the above code to your SCSS file, you can return to your page and preview it in different browser widths.
- 3
-
Review the responsive table code
In the Size Chart table code, let's cover a what the code is doing:
Here's a link to the source with a different view:
https://gist.github.com/whistlerbrad/675160750f5896bb537e682d28d24eec
(1) Observe the table class, it's using responsive-table. The rows use responsive-table-row. These are the important responsive classes which allows the CSS to handle display.
(2) This is the heading section used on the desktop view only. This row won't be shown on mobile as it's not needed the way mobile breaks down.
(3) This is where the mobile headings are found. The data-label is needed for a mobile heading:
You can use the sample code to create your own content for a responsive text based table.
The image table grid is much easier to view as it doesn't use headings. It simply breaks the table down to single images on mobile:
https://gist.github.com/whistlerbrad/fe5a7a5531382891f6968875c4c13085
You can replace the images with your own images from:
https://shopify.com/admin/settings/files
That completes this tutorial. Your customer experience on mobile will be much improved when using responsive information. This can help mobile customers read the information they need to make a purchase decision.
Refer back to the original article here for more information:
https://shopify.github.io/slate/css-examples/#responsive-tables