Product Description Information Layout - Prestige Theme

Shopify Discussion

Topic summary

A Shopify store owner wants to replace accordion-style product information sections with a tabbed layout in the Prestige theme. The desired design features clickable tabs (Description, Product Details, Fit & Care) displayed horizontally in one line, creating a cleaner interface.

Proposed Solution:

  • Create a tabbed layout in the product template file
  • Use HTML structure with tab navigation and content panels
  • Pull data from product description and custom metafields (product.metafields.custom.details and product.metafields.custom.care)
  • Apply CSS for styling and JavaScript for tab switching functionality

Implementation:
The code should be added to the product template file (‘templates/product.json’). The user is seeking clarification on exact placement and implementation details.

Status: The discussion remains open with the original poster confirming next steps but awaiting further guidance on proper code integration.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hi! Is there a way to add this kind of layout to the product information section on my website using Prestige theme? So rather than accordion dropdown sections, the layout looks really clean and allows you to seamlessly click between the description, product details, and fit & care details which all sit together on one line?

What I am trying to do – https://arcinaori.com.au/products/blake-set-sky?variant=45943544348836

Screenshot 2024-08-12 at 09.54.31.png
Screenshot 2024-08-12 at 09.54.31.png1014×1186 102 KB

Website URL (no password) – https://927103-16.myshopify.com/products/eden-dress-antique-pearl-silk

2

Hi,

Need to create Tabbed Layout at product template file

Example code


    

        - Description

        - Product Details

        - Fit & Care
    

    
        

            
            {{ product.description }}
        

        
            
            {{ product.metafields.custom.details }} 
        

        
            
            {{ product.metafields.custom.care }}

Use CSS for styling and javascript to handle functionality

3

Hi! Thank you for the advice and help.

So just to clarify I need to add this code to the bottom of the ‘templates/product.json’

Thanks,

Emily