Back to library
PDP content Shopify sections
Product galleries, demos and story sections that show the product before the add-to-cart.
14 copy-paste Liquid files
- PDP Angle ViewerSlider-driven multi-angle frame viewer
- PDP Detail ShotsTwo-column numbered close-up shots with hover zoom
- PDP Gallery Collage1-large + 4-small collage wall with optional corner tags
- PDP GalleryMain-image gallery with thumbnail switcher and captions
- PDP Lifestyle RailScroll-snap lifestyle photo rail with captions + arrows
- PDP Video DemoClick-to-load product video + timestamp highlights list
- PDP FAQPre-purchase FAQ accordion + contact row
- PDP Feature StoryImage + feature list split with micro-spec values
- PDP Founder NoteFounder note with design decisions + signature
- PDP How to UseStep cards with images + dosage/duration hints
- PDP IngredientsActive ingredient cards + full INCI native accordion
- PDP MaterialsMaterial breakdown: image + layered material list
- PDP Tech CutawayCenter product image flanked by numbered part callouts
- PDP Use CasesScenario grid: image + who it's for + key benefit
- PDP Angle Viewer多角度查看器：滑块驱动帧序列切换（正面/侧面/背面/细节），支持任意帧数，键盘可操作。
- PDP Detail Shots细节特写双列：编号图注 + 悬停轻缩放，用于面料、接缝、接口等做工细节的放大展示。
- PDP Gallery Collage1 大 + 4 小拼贴图墙：悬停微放大 + 可选角标标签，放在首屏下方补充细节与场景图。
- PDP GalleryPDP 主图画廊：大图舞台 + 底部缩略图行切换（键盘可用、支持图注），产品页首屏图库标准件。
- PDP Lifestyle Rail场景图横滑轨：scroll-snap 大图卡 + 图注胶囊 + 左右箭头，展示产品在真实空间中的样子。
- PDP Video Demo产品演示视频：封面点击后才注入 YouTube/Vimeo iframe，右侧时间戳亮点列表帮助跳看。
- PDP FAQ购前 FAQ：原生 details 手风琴（互斥展开）+ 底部联系客服入口行。
- PDP Feature Story图文卖点分屏：大图 + 功能点列表（每点带微参数），image_position 可切换左右。
- PDP Founder Note创始人短笺：为什么做这款产品 + 三个设计决策要点 + 签名行，品牌温度模块。
- PDP How to Use使用步骤图卡：步骤图 + 编号 + 用量/时长提示行，降低首次使用门槛。
- PDP Ingredients成分表：活性成分卡（浓度 + 作用）+ 全成分原生 details 折叠，美妆个护标配。
- PDP Materials材质解析：大图 + 分层材质列表（材质名 + 占比/产地徽章 + 说明），讲清楚贵在哪。
- PDP Tech Cutaway结构拆解：中央产品图 + 两侧编号标注线（部件名 + 说明），讲工程与用料的硬核模块。
- PDP Use Cases适用场景网格：场景图 + 适用人群 + 关键收益行，帮买家代入「这就是我」。