🎨 → 🛍️ FIG2SHOP

Connect your store, paste a Figma link, ship it live.

A HeadlineHQ product

← Back to home

1

Connect your Shopify store

One click — log in to your store and approve. No tokens, no code.
How to connect? Quick help

✓ Connected to

2

Paste your Figma design

Connect your Figma, then pick the page to convert.
One click — log in to Figma & approve. We read only your files, with your own quota.

✓ Figma connected

🔑 Connect your Figma — paste your token (30 sec)

Connect with your own Figma token — takes 30 seconds, works right away (uses your own quota & private files):

  1. Open figma.com/settings → Security tab.
  2. Under Personal access tokens → Generate new token.
  3. Set File content → Read access → Generate → copy the token (starts with figd_).
  4. Paste it below → Save token. Done — your Figma is connected. ✅

Need help? Chat with us on WhatsApp — +91 83768 50847

3

Convert

AI rebuilds your design into a responsive Shopify OS 2.0 section.
🔄 Updating an existing section? (keep your saved content)

Figma changed and you just want to refresh this section? Paste your current sections/f2s-….liquid below. We'll reuse its field ids so everything you already filled in Shopify stays intact.

4

Deploy to your store

🛡️ Safe & non-destructive. Your live pages aren't changed — we add a separate template you switch on per product. How updates & safety work →

Preview generated Liquid 

        

      

    


    
    

      

        ×
        
How to connect your Shopify store

        
One-time setup, then it's one-click forever.

        
    
          
  1. In your Shopify admin → Settings → Apps and sales channels → Develop apps → Create an app (name it "FIG2SHOP").
    2. 
          
  2. Configuration → Admin API scopes → enable write_themes + read_themes → Save.
    3. 
          
  3. If your app shows URL fields, add:
    
            App URL: https://fig2shop.headlinehq.in
    
            Redirect URL: https://fig2shop.headlinehq.in/api/shopify/callback → Save.
    4. 
          
  4. Click Install app.
    5. 
          
  5. Open API credentials → copy your Client ID, and reveal + copy your Client Secret.
    6. 
          
  6. Come back here → enter Store domain + Client ID + Secret → Connect store → pick your theme. ✅
    7. 
        

        📹 Watch the demo video
      

    


    
    

      

        ×
        
      

    


    
    

      

        ×
        
Updates & safety — how it works

        
No surprises. Here's exactly what happens to your store.

        
    
          
  1. Your live store never changes by itself. We add a separate template (e.g. product.<name>.json), not your default page. Your current product/collection pages stay exactly as they are.
    2. 
          
  2. You choose where it shows. In Shopify: Products → (a product) → Theme template → pick your new template. Only that product uses the new design.
    3. 
          
  3. Preview before going live (totally safe): open yourstore.com/products/<handle>?view=<name> — see the design on a real product without assigning it.
    4. 
          
  4. Design changed in Figma later? Only that one section updates. Re-convert the same frame and re-add the .liquid — the section refreshes everywhere it's used. Nothing else is touched.
    5. 
          
  5. The content you typed in Shopify stays safe. Your edits (text, images) live on the page, not in the code. When updating, use the “Updating an existing section?” box in step 3 (paste your current .liquid) so the field ids match and your content carries over.
    6. 
          
  6. Don't rename the section when pasting an update — keep the same f2s-… name so Shopify recognises it as the same section.
    7.