In the fourth article of the #4weeksOfShopifyDev challenge, I'll be talking about to add product tabs without using a Shopify app
Note: I'm using the Debut theme, you may have a different Shopify theme
Create a product template
First, we need to create a custom product Shopify template and called product-tabs.liquid
Create a new Shopify section and called product-template-tabs and paste the code from the product-template section
Change the section in product-tabs.liquid to product-template-tabs
Install reviews app and configure tabs
Install Shopify product reviews app
Create a new Shipping policy page
Replace product.description in product-template-tabs.liquid with this code
https://gist.github.com/IliasHad/43a3ab86eb6755bae03a89c3042d7397
Et voila, you have product tabs without a Shopify app
Top comments (1)
Good DIY approach — tabs are one of those things that are straightforward enough in Liquid + JS that going app-free makes sense.
One related product page visual improvement that's harder to DIY though: consistent image backgrounds. When merchants source products from multiple suppliers with different photography setups, the varied backgrounds and aspect ratios look bad even with otherwise polished tab layouts. The CSS object-fit approach handles cropping, but doesn't standardize the actual background color/style.
I've been building an app called Eye Catching (apps.shopify.com/beautiful-brands) for this specifically — it standardizes image backgrounds and adds overlays/badges across the product grid. The reason it works better as an app is it batches the image processing on the backend rather than doing it client-side. Worth knowing about if you're doing product page work for clients with messy supplier photography.