{"title":"▶️ Use website builder","slug":"how-to-use-website-builder","url":"https://support.storeconnect.com/articles/how-to-use-website-builder","url_markdown":"https://support.storeconnect.com/articles/how-to-use-website-builder.md","subtitle":null,"summary":"Edit your store visually using the website builder to modify content blocks, manage global settings, update styles and scripts, and submit changes for approval before publishing.","type":"Videos_Tutorials","video_url":"https://vimeo.com/1197573334?fl=sv\u0026fe=ci","keywords":null,"last_modified":"2026-08-21T07:12:35+0000","body_markdown":"### **1\\. Access the Website Builder**\n\n1.  Open the **StoreConnect app** in Salesforce.\n\n2.  Go to your **Store record**.\n\n3.  Click the **Website Builder** button (top-right corner. If missing, add it to your page layout).\n\n4.  If you see a **permission error**, proceed to the next step to set up user access.\n\n\n---\n\n### **2\\. Set Up User Access (Store User Role)**\n\n1.  Go to:\n    **StoreConnect Navigation → Search \"Roles\" → Store Roles**.\n\n2.  Click **New** to create a Store Role:\n\n    -   Name: e.g. *Content Editor*.\n\n    -   Type: **Content Changes**.\n\n    -   Level: **Editor**, **Commenter**, or **Approver** (choose level of access).\n\n3.  Click **Save**.\n\n4.  Assign a user to this role:\n\n    -   Click **New Store User Role**.\n\n    -   Select the **Salesforce User**.\n\n    -   Assign the created role (e.g. Content Editor).\n\n    -   Choose scope: **Single store**, **Group of stores**, or **All stores**.\n\n    -   Click **Save**.\n\n\n---\n\n### **3\\. Using the Website Builder Interface**\n\n1.  Return to the **Store record** and click **Website Builder** again — you now have access.\n\n2.  The builder provides a **visual interface** to edit website content.\n\n3.  Hover over **content blocks** to highlight and select them.\n\n4.  Available actions:\n\n    -   **Edit** content block (opens a form with fields like title, image, link, alignment, etc.).\n\n    -   **Reorder** blocks.\n\n    -   **Delete** blocks.\n\n    -   **Show all fields** to access additional settings in the side menu.\n\n5.  **Preview** changes in real-time as you edit.\n\n\n---\n\n### **4\\. Global Settings**\n\n1.  Access **Global Settings** (top-right):\n\n    -   **SEO info**.\n\n    -   Assign **header/footer content blocks**.\n\n    -   Switch **menu systems**.\n\n    -   Change **default homepage**.\n\n    -   Update **logo** and **placeholder images**.\n\n\n---\n\n### **5\\. Styles and Scripts**\n\n1.  Use **Styles** menu to:\n\n    -   Edit **global CSS**.\n\n    -   Set **primary/secondary color palette**.\n\n2.  Use **Scripts** menu to:\n\n    -   Add **global JavaScript** to the site.\n\n\n---\n\n### **6\\. Navigating \u0026 Editing Pages**\n\n1.  Navigate to any page by clicking its link in the builder.\n\n2.  Edit:\n\n    -   **Page settings**.\n\n    -   **Individual content blocks**.\n\n3.  To add new content:\n\n    -   Scroll to **Add Content Block** section at the bottom of the page.\n\n    -   Select desired **content block template**.\n\n    -   Insert content (text, image, media lookup, etc.).\n\n\n---\n\n### **7\\. Submitting and Approving Changes**\n\n1.  After editing, click **Submit Changes**.\n\n2.  Changes are sent for **approval** (not immediately live. Website will revert to previous state).\n\n3.  To review changes:\n\n    -   Go to:\n        **StoreConnect Navigation → Custom Content → Content Changes → All Content Changes**.\n\n    -   Review the list of content changes (created/updated).\n\n    -   Approve changes:\n\n        -   Open each change.\n\n        -   Verify original vs. new value.\n\n        -   Set status to **Approved**.\n\n        -   Click **Save**.\n\n4.  Approved changes are:\n\n    -   **Published immediately**, or\n\n    -   **Scheduled** to go live at a future date.\n\n\n---\n\n### **8\\. Verifying Live Changes**\n\n1.  Visit your **live website**.\n\n2.  Refresh to see approved and published changes."}