Chatbox into the header

Technical Q&A

Topic summary

A user wants to integrate a permanent chatbox (like Shopify Inbox) into their website header, allowing customers to communicate after ordering to provide necessary information for custom work (designs, videos, etc.). They’re using the \

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

Hey,

i want to add a chatbox into the header. Like the Shopify Inbox. So the chat should be permanent on the header and you can chat with me after ordering to give me the information i need to start working. (Designs Videos & more)

I only can edit it in wich corner i want it. But i want to use it as a chatbox so you can see the history of our chat.
Any way to do this as a css or maybe its possible with a other app.

(Im using the „refresh“ theme)

2

This is Amelia from PageFly - Landing Page Builder App

You can try with some steps below to make the chatbot in the header.

Using Shopify inbox:

  • Install Shopify Inbox: If you haven’t already, install the Shopify Inbox app from the Shopify App Store.
  • Customize Appearance: Go to your Shopify admin, navigate to Online Store > Themes > Customize, and then select Theme settings. Here, you can adjust the appearance and placement of the chat button.
  • Enable Chat History: Shopify Inbox automatically retains chat history, so you don’t need to do anything extra for this feature.

Customizing with CSS:

To make the chatbox permanent in the header, you might need to add some custom CSS. You need to check and get the class name of the inbox. Here’s a basic example:

.class-inbox {
position: fixed;
top: 0;
right: 0;
z-index: 9999;
}

Add this CSS to your theme by navigating to Online Store > Themes > Actions > Edit Code, and then adding the code to your theme.css or theme.scss.liquid file.

Hope that my solution works for you.

Best regards,

Amelia | PageFly