Can I customize Shopify Inbox's chat box and icon?

Shopify Apps
2

hel;lo there

Yes, it is possible to customize the Shopify Inbox chat box with custom CSS code, replace the icon with another third-party or in-house icon, and replace the font. Here’s how:

  1. Custom CSS code: To adjust the CSS of the Shopify Inbox chat box, you can add custom CSS code to your theme. Navigate to Online Store > Themes > Actions > Edit Code > Assets > theme.scss.liquid, and add your custom CSS code. You can use the browser’s developer tools to inspect the chat box elements and find the appropriate CSS selectors to target.

  2. Replacing the icon: To replace the icon with another third-party or in-house icon, you can modify the code for the chat box. Navigate to Online Store > Themes > Actions > Edit Code > Sections > header.liquid, and look for the code that generates the chat box icon. You can replace the code with the appropriate HTML for your desired icon.

  3. Replacing the font: To replace the font used in the chat box, you can add custom CSS code to your theme. Navigate to Online Store > Themes > Actions > Edit Code > Assets > theme.scss.liquid, and add your custom CSS code to target the font used in the chat box.