{"title":"▶️ Update store branding","slug":"how-to-update-store-branding","url":"https://support.storeconnect.com/articles/how-to-update-store-branding","url_markdown":"https://support.storeconnect.com/articles/how-to-update-store-branding.md","subtitle":null,"summary":"Change your store logo, product and category placeholder images, and primary and secondary brand colors using HSL values from the store record\u0026#39;s branding and global content settings.","type":"Videos_Tutorials","video_url":"https://vimeo.com/1177140107?fl=sv\u0026fe=ci","keywords":null,"last_modified":"2026-08-21T07:12:35+0000","body_markdown":"### **1\\. Access the Store Record**\n\n-   In **Salesforce**, open the **App Launcher** (top-left corner).\n\n-   Search for and open the **StoreConnect Config App**.\n\n-   In the menu, go to:\n\n    -   **Stores** → **Stores List View**. (Alternatively, use the **StoreConnect Navigation** to find)\n\n-   Select the **store** you want to update.\n\n\n---\n\n### **2\\. Update the Logo and Default Images**\n\n-   Go to the **Content Tab** → scroll to the **Branding** section.\n\n-   Here you can configure:\n\n\n**Store Logo:**\n\n-   To change it:\n\n    -   Select a new image from your **media library**.\n\n\n**Product Placeholder Image:**\n\n-   This image is displayed when a product has **no photo assigned**.\n\n-   To update:\n\n    -   Upload or select your preferred **placeholder image**.\n\n\n**Category Placeholder Image:**\n\n-   Serves as a **default category image** if none is assigned.\n\n-   After making changes, click **Save**.\n\n-   Refresh your site to see the updates reflected immediately.\n\n\n---\n\n### **3\\. Modify Brand Colors (Primary \u0026 Secondary)**\n\n-   Go to the **Global Content Tab** in your store record.\n\n-   Here you can define your store’s **Primary** and **Secondary** brand colors.\n\n\nColors are set using the **HSL (Hue, Saturation, Lightness)** model:\n\n-   **Hue**: Base color, measured in **degrees (0–360)** on the color wheel.\n\n-   **Saturation**: Intensity of the color (0% = grayscale).\n\n-   **Lightness**: Brightness of the color (0% = black, 100% = white).\n\n\n**Primary Color:**\n\n-   Example: `Hue: 212` → Blue tone used in footer.\n\n-   Adjust by editing:\n\n    -   **Hue** → changes the color type.\n\n    -   **Saturation** → lowers or intensifies the color.\n\n    -   **Lightness** → makes it brighter or darker.\n\n\n**Secondary Color:**\n\n-   Example: Often used for **buttons**.\n\n-   You can change saturation and hue to select a different accent tone.\n\n-   Click **Edit**, make adjustments, then **Save**.\n\n-   Refresh your site to see your updated brand colors in action.\n\n\n---\n\n### **4\\. Visual Results**\n\n-   Once you refresh your website:\n\n    -   **Logos** will update wherever applicable.\n\n    -   **Placeholder images** will appear in product/category listings that lack their own images.\n\n    -   **Colors** will update in the site’s **UI elements** (e.g. footers, buttons, banners)."}