{"title":"▶️ Create content blocks","slug":"how-to-create-content-blocks","url":"https://support.storeconnect.com/articles/how-to-create-content-blocks","url_markdown":"https://support.storeconnect.com/articles/how-to-create-content-blocks.md","subtitle":null,"summary":"Build page sections using content blocks with templates like banners, images, and featured products. Use container blocks for layout control and reuse blocks across multiple pages.","type":"Videos_Tutorials","video_url":"https://vimeo.com/1197535680?fl=sv\u0026fe=ci","keywords":null,"last_modified":"2026-08-21T07:12:35+0000","body_markdown":"### **1\\. What Are Content Blocks?**\n\n-   **Content blocks** are the building blocks used to visually assemble pages on your StoreConnect website.\n\n-   Each **page** is made up of one or more content blocks (e.g. banners, images, featured products, forms).\n\n-   Blocks can be:\n\n    -   **Standalone** (e.g. a banner or a form).\n\n    -   **Containers** that **hold child content blocks** (used for layout control).\n\n\n---\n\n### **2\\. View Existing Content Blocks on a Page**\n\n-   In **Salesforce**, open the **StoreConnect app**.\n\n-   Go to:\n\n    -   **StoreConnect Navigation** → **Custom Content** → **Pages List View**.\n\n-   Open a **page record** (e.g. *Homepage*).\n\n-   On the left: you'll see **basic page info**.\n\n-   On the right under **Related**, you’ll see the **list of content blocks** for that page.\n\n    -   Example: “Banner” (Position 10), “Homepage Container” (Position 20).\n\n-   Lower **Position numbers** appear **higher** on the page.\n\n\n---\n\n### **3\\. How a Content Block Is Structured**\n\nOpen any content block (e.g. *Homepage Banner*) to configure:\n\n-   **Content Template**: Defines the layout and visual style (e.g. *Image with Text Overlay*, *Featured Products*).\n\n-   **Settings Tab**:\n\n    -   Control things like **text alignment**, **link labels**, and **button links**.\n\n-   **Media Tab**:\n\n    -   Select an **image** from your media library.\n\n-   **Content Tab**:\n\n    -   Add a **Title**, **Subtitle**, and any **text content**.\n\n\n**Reusable Blocks**: You can assign a content block to **multiple pages** by linking it in their respective page records.\n\n---\n\n### **4\\. Using Containers and Child Blocks**\n\n-   A **Container** content block:\n\n    -   Adds **structure, padding, and spacing**.\n\n    -   Holds **Child Content Blocks**.\n\n-   Example: *Homepage Container* holds a child block for *Featured Products*.\n\n-   Open the container block:\n\n    -   Its **template** is “Container”.\n\n    -   Inside its **Related tab**, you'll see **child blocks** (e.g. product sections, images, etc.).\n\n\n---\n\n### **5\\. Create a New Content Block Section on a Page**\n\n-   Go to your target page (e.g. *About Us*).\n\n-   Under **Related → Content Blocks**, click **New**.\n\n-   You can either:\n\n    -   **Reuse an existing block**, or\n\n    -   Click **New Content Block** to create a fresh one.\n\n-   For layout consistency, begin by adding a **Container Block**:\n\n    -   Give it a **unique name**.\n\n    -   Set a **higher position number** to place it **below existing blocks**.\n\n    -   Click **Save**.\n\n\n---\n\n### **6\\. Add a Child Content Block Inside the Container**\n\n-   Open your new **Container Block**.\n\n-   Under **Related**, click **New Content Block**.\n\n-   In the creation form:\n\n    -   Ensure **Parent** is your container block.\n\n    -   Choose a **Content Template** (e.g. *Single Image*).\n\n    -   Set **Name**, add an **Image** in Media, and fill in other optional fields.\n\n-   Click **Save**.\n\n\nNow you’ve created a new section on your page containing a new image (e.g. a **Brand Logos Banner**).\n\n---\n\n### **7\\. Visual Styling and Themes**\n\n-   The **appearance and behavior** of content blocks is affected by the **Store Theme**.\n\n-   Themes define margins, fonts, layout spacing, and responsive behavior.\n\n-   You can:\n\n    -   Use default themes.\n\n    -   Create **custom themes** (covered in the **Theme Developer Course**).\n\n\n---\n\n### **8\\. When to Use Containers**\n\n-   Use **containers** to:\n\n    -   Add **padding/margins** around grouped content.\n\n    -   Maintain **visual consistency** across sections.\n\n-   Content blocks **outside containers** will **stretch full-width** to the page edge (e.g. hero banners).\n\n-   Blocks **inside containers** stay **nicely centered** with spacing applied."}