LayoutHub
  • What is LayoutHub?
  • User guides
    • Support
    • Installation
    • Uninstallation
    • Upgrade/Downgrade
    • FAQs
      • How to remove instagram section from Layouthub
      • What is "Pages limit"?
      • When can I "Edit code"?
      • What about "Save section"?
      • What is " Auto save draft"?
      • What is "Integration Services"?
      • How to set the same font between Shopify and LayoutHub?
      • How to custom font and color on LayoutHub?
      • How to set "Page handle or human url"?
      • Connective Button
      • How to save page without publish it
      • How to change the meta SEO for LayoutHub's page
    • Common Issues
    • Layout Management
      • Create Layouts
      • Design Blocks
      • Export & Import
      • Edit Section Code
      • Edit a Layout
      • Assign a Layout
      • Duplicate a Layout
      • Delete a Layout
    • Section builder
    • LayoutHub pages/templates
      • Home Page
        • Create additional Home Page
        • Make an existing page as home page
        • Restore to default Home Page
        • Customize Shopify Home Page
      • Sub-page
        • Contact Form
      • Product Template
        • Product Detail
        • Related Product
      • Collection Template
      • Blog Templates
      • Article Templates
      • Insert section
    • Pricing Plans
    • Settings
      • General
      • Theme Settings
      • Quickview Settings
      • Swatch color settings
      • Third party Apps
        • Product Review
        • Product Wishlist
    • Trash
    • Sale Tools
    • Referrals
    • Integration
      • Add/Edit Profile
      • Add New Contact
      • Export Contact
      • Mailchimp
      • Hubspot
      • ActiveCampaign
      • GetResponse
      • SendGrid
      • Gmail SMTP
      • Google Sheets
      • Omnisend
      • Klaviyo
      • ConvertKit
    • Tracking & Analytics
    • Layouthub & Shopify
    • Translate Apps
    • Recommend apps
      • Avada SEO Optimization
      • Ali Reviews ‑ Product Reviews
      • Ryviu: Product Reviews App UGC
      • Quick View by Secomapp
      • LAI AliExpress Reviews
      • Judge.me Product Reviews
      • Growave - Loyalty, Wishlist, Reviews UGC
      • Opinew Product Reviews
    • Refund Policy
    • Instagram token
  • Development
    • Getting started
    • Tools
      • LayoutHub Kit (for LayoutHub developers only)
      • LayoutHub Kit Extension for Visual Studio Code
    • Layout Structure
    • Reference
      • Engine syntax
        • Deprecated: March 2020
        • Chuẩn template mới - LayoutHub Editor V4
      • Create a section
      • Components
      • Liquid in section
      • Javascript in section
      • Register vendors
      • Settings.js
        • Call-to-action
        • Text
        • Textarea
        • Text Editor
        • Dropdown
        • Checkbox list
        • Checkbox radio
        • Toggle
        • Number slider
        • Number
        • Single image
        • Image library
        • Color picker
        • Icon picker
        • Font picker
        • Background
        • Picker
        • Group fields
Powered by GitBook
On this page
  • How to install
  • How to use

Was this helpful?

  1. Development
  2. Tools

LayoutHub Kit Extension for Visual Studio Code

This extension for developer only

PreviousLayoutHub Kit (for LayoutHub developers only)NextLayout Structure

Last updated 3 years ago

Was this helpful?

How to install

  1. Download the LayoutHub Kit Extension

  2. Click on Extension tab on left sidebar

  3. Click on three dots on top right bar

  4. Select Install from VSIX.

  5. Select the file you downloaded at step 1

How to use

To use the extension you must have LayoutHub teamwork account. To get your account, please contact your leader.

1. Login to LayoutHub kit

  1. Press Command + SHIFT + p for Mac os or Ctrl + SHIFT + p for Window or Linux

  2. Select Startup LayoutHub kit

  3. Select Login

  4. Enter your teamwork username (email) and press Enter

  5. Enter Teamwork password and press Enter. If success It will show the selection like the screenshot blow

2. Download your page from LayoutHub teamwork to local

  1. Press Command + SHIFT + p for Mac OS or Ctrl + SHIFT+ p for Window, Linux

  2. Select Startup LayoutHub Kit

  3. Select Download pages

  4. Tick on pages you want to download and press Enter

3. Watch your changes and sync your code to Teamwork

  1. Press Command + SHIFT + p for Mac OS or Ctrl + SHIFT+ p for Window, Linux

  2. Select Startup LayoutHub Kit

  3. Select Watch your changes and start coding.

All your changes will show on tab Output.

Video guide

LayoutHub Kit on Visual Studio code v1.0.0

https://drive.google.com/file/d/1k0NdITB5UwXerl1BGaLR4l5NOEvmN2RQ/view?usp=sharing

If you are facing any problem when using the extension, please contact via email: daniel@layouthub.com