{"id":2803,"date":"2020-08-12T10:01:53","date_gmt":"2020-08-12T10:01:53","guid":{"rendered":"https:\/\/shopthemedetector.com\/blog\/?p=2803"},"modified":"2026-03-25T08:54:20","modified_gmt":"2026-03-25T08:54:20","slug":"how-to-add-tabs-to-shopify-store","status":"publish","type":"post","link":"https:\/\/shopthemedetector.com\/blog\/how-to-add-tabs-to-shopify-store\/","title":{"rendered":"How To Add Tabs To Shopify Store"},"content":{"rendered":"

Adding tabs to your Shopify store is an easy option for most people. Some themes will automatically have the option available for you and there are some apps that allow you to add tabs to your site. You can find a list of those apps here.<\/p>\n

However, if you\u2019re looking to add tabs to your products page using code, then you need to follow the steps below. Please note that all themes are different. Therefore, this is a general guide and some aspects of the step-by-step instruction will be different for the particular theme you\u2019re using. If you\u2019re in doubt, you can speak to the theme developer to find out what file or other element you should be using on your website.
\n

Key Takeaways<\/div>
1<\/div>
Login to Shopify admin to start adding tabs to your store\u2019s theme.<\/div><\/div>
2<\/div>
Edit the product-template.liquid file to include custom tabbed sections for product info, shipping, and returns.<\/div><\/div>
3<\/div>
Add jQuery script in assets\/theme.js for tab functionality and content display control.<\/div><\/div><\/div><\/p>\n

Step 1 - Login to Shopify Admin<\/h2>\n

The first thing you should do is to login to your Shopify admin page.<\/p>\n

Step 2 - Themes<\/h2>\n

Now check your \u2018Online Store\u2019 and then the \u2018Themes\u2019 option. Find the theme that you\u2019re currently using, if you have more than one installed, and then click on that \u2018Actions\u2019 and then \u2018Edit code\u2019 option on the corresponding theme.<\/p>\n

Step 3 - Theme.liquid File<\/h2>\n

Find the theme.liquid file within the list of files that shows up. Within this file find the term \u2018jQuery\u2019. If it is not in the file, then you will need to add jQuery into your theme. Otherwise you can just continue.<\/p>\n

Step 4 - Product Template<\/h2>\n

Next go to the product-template.liquid template that is within your theme files and open that up in the code editor. You need to locate the product description area, it should look like:<\/p>\n

{{ product.description }}<\/pre>\n
You now need to replace it with this following code.<\/p>\n
\n
\u00a0<\/p>\n