Tuesday, September 6, 2016

How to Add HTML to the Shopify Head Tags

From time to time, you may need to ecommerce plugins to Shopify. Some examples include ecommerce customer communication tools like free live chat plugins as one example. This requires integrating code that plugin's HTML code onto your ecommerce website code. In many cases, widgets need to be added between your website's two <head> </head> tags. This post demonstrates how to find these head tags.

  1. Click the left column navigation bar for the 'Themes'

  2. Click the three dots button in the top right corner of the screen for options

  3. Select 'Edit HTML'

  4. Under the 'Layout' section, click the 'theme.liquid' link. The HTML code within your Shopify store should appear
  5. --
    --
  6. Look through the code for the </head> tag. Notice that this tag has a backslash unlike its earlier sister tag. Do not confuse one for the other. Even for the experts, this feels like looking for a needle in a haystack. However, you can more easily find the tag by placing your cursor anywhere inside the code window and then doing an automatic search by simultaneously clicking the keys 'Ctrl' and 'F' for Windows and 'Command' and 'F' for Apple.

  7. Paste the code immediately before the </head> tag 

  8. Click the 'Preview' button. A pop up window should appear with how your store front will look with the chat installed. Look for the app in the bottom right corner of your screen.

RELATED CONTENT

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.