The following instructions shows how to update your a liquid file in your Shopify Theme to show the Cooler/neutralization information on the product detail, cart, or home page.

Open the Cooler App from your Shopify Admin page.

Go to the Settings Tab.

Scroll to the logo you want to enable. Home, Product, or Cart.

Select the style (color) of the logo you want to show on your site

Note: The color can be changed at anytime.

Click "Enable" to turn on this logo.

By default, we attempt to place the logo automatically on your site by injecting a snippet into your Shopify Theme. Don't worry, you can disable the logo at any time in Settings, or it will automatically be disabled if you uninstall the Cooler app.

If you uncheck the "Automatically placed in theme" checkbox, or if you got the message "Warning: Could not automatically place logo in theme. See manual instructions below", then the logo will be enabled but you will not be able to see it on your site without manually copying and pasting the code block in the "Manual Placement Instructions" into your Shopify Theme. If this happened to you, go to the Manual Placement Instructions of this document

Check your site to verify the placement of the logo is acceptable to you

If the logo is enabled and "Automatically placed in theme" box is still checked, then automatic placement should have succeeded. All you need to do now is check that the logo looks good on your site. Go to the webpage based on which logo you added (Your landing page for the Home Page Logo, your product detail page for the Product Page Logo, and the cart for Cart Page Logo).

If the placement looks good, you're done!

If the placement is not acceptable, then you should click "Disable", uncheck "Automatically placed in theme" and then click "Enable" again. Now you will have to follow the Manual Placement Instructions to place the logo precisely where you want it on your page.

If you enabled the logo and "Automatically placed in theme" is checked, then see the Troubleshooting section to try to fix it on your own. If you're stuck or want the Cooler team to help you enable it for free, chat with us by clicking the chat button in the lower right and we can setup some time to help you troubleshoot.

Manual Placement Instructions

Ensure the logo is "enabled" for the page you want to show it on

Copy the code block from the "MANUAL PLACEMENT INSTRUCTIONS" section by clicking on the code block.

Open the code editor for your Shopify Theme.

Find the .liquid file for the page you want to add the logo to

Examples:

Home -> header.liquid

Product -> product-template.liquid

Cart -> cart-template.liquid

Click on the .liquid file you want to modify and the layout code for that page/component should appear in the section on the right

Insert the code block you copied from the Cooler Settings tab into the proper spot on in the layout code

The proper spot can be tricky to find if you're not familiar with modifying your Shopify Theme this way.

One method to do it is to "guess and check". Paste the code block into the file and then preview this page on your site. If it's not in the right spot, cut and paste it somewhere else. This method works well if you generally understand the html structure of the layout code and can use clues such as class names from the layout code to take an educated guess where to put the Cooler code block.

The more effective method is to use the Google Chrome inspector. Open your site to the page you're looking to add the logo to. Right click on an element on the page you are looking to add the logo to, and click "Inspect". In the "Elements" tab of the Chrome inspector. As you hover over the html, the components on the screen will be highlighted. When you find an element you want to place your tag under, look at the class name and find that class in the Shopify layout code. You can paste the code block below that element, then verify if it's at the desired spot on your site.

Example Placements (may not be the same for all Shopify Themes)

Home -> header.liquid

  • Below nav icons: Place the code block below
    <div class="site-header__icons-wrapper">...</div>

Product Page -> product-template.liquid

  • Below price: Place the code block below

    <div class="product__price">...</div>

  • Below Add to Cart: Place the code block below

    <button type="submit">...</button>

  • Below product description: Place the code block below

    <div class="product-single__description rte">{{ product.description }}</div>

Cart Page -> cart-template.liquid

  • Below the items in cart: Place the code block below

    <table>
    <thead>...</thead>
    <tbody data-cart-line-items>...</tbody>
    </table>

If you were able to add the logo then you're all done. If it's not working check out the Troubleshooting section, or chat with us by clicking the chat button in the lower right and the Cooler team will help you install the logo for free.

Troubleshooting

I've enabled the logo but I'm not seeing it on my site

If you only clicked "Enable", the auto-add behavior may have failed and you need to add the logo manually. Check if the "Automatically placed in theme" box is checked or unchecked. If it's unchecked that means the logo is enabled but was not automatically added to your Shopify Theme layout.

If the logo is enabled and the "Automatically placed in theme" box is checked, then do the follow to double check:

  1. Refresh the page. Sometimes enabling the logo takes a bit of time.

  2. You may be on a page other than the one where the logo is enabled. For example, if you're looking at a product but not on the product detail page.

  3. Disable and Re-Enable the logo. Something might have gone wrong on our side and if you are able to "turn it on and off again" this will ensure that the logo is properly enabled

  4. Chat with us, there could be a temporary issue on our side, or a question we haven't answered in this guide!

Did this answer your question?