How to Build Shopify Product Pages in Framer (Frameship Tutorial)
Автор: Insert Frame
Загружено: 2025-11-17
Просмотров: 204
Learn how to build fully dynamic Shopify product pages directly inside Framer using Frameship, including price, inventory, variant images, galleries, and add-to-cart buttons that sync live with your Shopify store.
For Framer builders who want full creative control over their product pages without losing Shopify power.
⏱️ Timestamps:
0:12 Opening the Frameship Plugin
0:18 Creating a New CMS Detail Page
0:24 Pulling in Synced Shopify Product Data
1:16 Components Available for Product Pages
1:26 Adding the Add-to-Cart Button
1:32 Styling, Hover States, and Component Options
1:43 Connecting Components to Shopify Fields
2:00 Connecting Shopify Variables for Dynamic Syncing
2:12 Adding the Price Component
2:17 Auto-Fetching Price from Shopify
2:27 Adding the Inventory Label
2:40 Adding the Product Gallery Component
2:47 Connecting Shopify Data + Variant Image Mapping
2:58 Setting Images and Loading the Gallery
3:07 Displaying Product Titles from CMS
3:14 Connecting Titles, Images, and Fields
3:35 Everything Updates Automatically
🔗 Important Links:
Open Frameship Plugin 👉https://www.framer.com/marketplace/pl...
Get the Free Template 👉 https://frameship.io
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке:
