By default, the Shopily Guide chat icon appears at the bottom-right corner of the screen. If you use multiple chat tools, such as Shopify Inbox, you can adjust their positions for a cleaner, more organized look using the theme editor:

• Move the Shopify Inbox chat icon to the bottom-left corner.
• Or adjust the position of the Shopily Guide chat icon within the theme editor.

This ensures a seamless and clutter-free chat experience for your customers.

Shopily Guide uses the following information from your store:

• Products: Includes product title, description, images, prices, etc.
• Order Information: Customers need to be logged in or provide their email and order ID to receive answers to order-related questions.
• Home Page: Content from your store's home page.
• Policies: Includes refund and shipping policies.
• Pages and Blogs: Content from your online store's visible pages and blog posts.

Store owners often mention that having too many floating icons on their websites can be overwhelming. We understand your concerns! That's why we've introduced a new feature.

In the Theme Editor, under the 'Icon' settings, you can now select the Hide floating icon and use deep link to open chat option. This allows you to hide the floating icon while still enabling the chat window to open via a deep link.

You can easily open the chat window by using a deep link without modifying your theme's code. In the Shopify Theme Editor, simply add the hashtag #shopily-ai-chatbot to any button, icon, or text element. When customers click on these elements, the chat window will automatically open.

For a live example of how deep links work, visit the "Don't like floating icons" section of our demo store at shopilydemo.myshopify.com.

In the previous section, we discussed how to use the hashtag (deep link) #shopily-ai-chatbot to trigger the chat window by adding it to any button, icon, or text directly from the Theme Editor, without editing your theme's code.

However, if you'd like to have full flexibility to add the deep link anywhere on your store (e.g., creating a new icon in the header), you will need to edit the template code. Below are simple HTML code examples you can use to create new icons in your Theme template:

• The code below adds a chat icon

  <a href="#shopily-ai-chatbot"
     style="display:inline-flex;align-items:center;margin-right:13px">
      <svg viewBox="64 64 896 896" style="height:28px;width:28px;fill:orange">
          <path
              d="M868.2 377.4c-18.9-45.1-46.3-85.6-81.2-120.6a377.26 377.26 0 00-120.5-81.2A375.65 375.65 0 00519 145.8c-41.9 0-82.9 6.7-121.9 20C306 123.3 200.8 120 170.6 120c-2.2 0-7.4 0-9.4.2-11.9.4-22.8 6.5-29.2 16.4-6.5 9.9-7.7 22.4-3.4 33.5l64.3 161.6a378.59 378.59 0 00-52.8 193.2c0 51.4 10 101 29.8 147.6 18.9 45 46.2 85.6 81.2 120.5 34.7 34.8 75.4 62.1 120.5 81.2C418.3 894 467.9 904 519 904c51.3 0 100.9-10.1 147.7-29.8 44.9-18.9 85.5-46.3 120.4-81.2 34.7-34.8 62.1-75.4 81.2-120.6a376.5 376.5 0 0029.8-147.6c-.2-51.2-10.1-100.8-29.9-147.4zm-66.4 266.5a307.08 307.08 0 01-65.9 98c-28.4 28.5-61.3 50.7-97.7 65.9h-.1c-38 16-78.3 24.2-119.9 24.2a306.51 306.51 0 01-217.5-90.2c-28.4-28.5-50.6-61.4-65.8-97.8v-.1c-16-37.8-24.1-78.2-24.1-119.9 0-55.4 14.8-109.7 42.8-157l13.2-22.1-9.5-23.9L206 192c14.9.6 35.9 2.1 59.7 5.6 43.8 6.5 82.5 17.5 114.9 32.6l19 8.9 19.9-6.8c31.5-10.8 64.8-16.2 98.9-16.2a306.51 306.51 0 01217.5 90.2c28.4 28.5 50.6 61.4 65.8 97.8l.1.1.1.1c16 37.6 24.1 78 24.2 119.8-.1 41.7-8.3 82-24.3 119.8zM681.1 364.2c-20.4 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.6 37.1 37.1 37.1s37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1zm-175.2 0c-20.5 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.7 37.1 37.1 37.1 20.5 0 37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1z" />
      </svg>
  </a>

• The code below adds an AI star

  <a href="#shopily-ai-chatbot" style="display:inline-flex;align-items:center">
          <img style="height:28px;width:28px" src="https://shopily-production-assets.s3.us-west-2.amazonaws.com/AIStar.svg" alt="Shopily Chatbot"  />
        </a>

• Besides using hashtags, you can also put the function call `openShopilyAIChatBot()` to the `onclick` attribute of any button / icon, so that customers will see the chat window when they click the button / icon.

        <button onclick="openShopilyAIChatBot()" style="border-radius:20px;margin:10px;cursor:pointer;background:black"><span style="font-size:13px;color:white;margin:5px">
          Click to Chat</span>
        </button>

You can use any of the examples above and inject the code next to the search icon in the `sections/header.liquid` file, to add the chat deep link to your store's header.

For inspiration, check out the top icons on our demo store at shopilydemo.myshopify.com to see how deep links can seamlessly open the chat window.

If you're not entirely comfortable editing the code in your Theme template, don't worry! Feel free to book a meeting with us, and we'll gladly help you set up the perfect icon in the ideal spot to match your store's unique vibe.