Customer Meta - Installation manual

Table of contents




Install app

  1. Install app.



Copy assets

  1. Go to app. (Shopify admin -> Apps -> Customer Meta app)
  2. Go to to Install section.
  3. Press "Install theme assets" button
  4. Done. If you don't see wish list and compare icons, check theme files manually. You can ask theme developer for help.



Manual installation (optional)

edit theme.liquid file

a) Insert inside "head" tag following code

{% include 'cm-head' %}

Custom Shopify theme

  1. Locate "head" tag at your theme.
  2. Paste above code snippet before closing "head" tag. Or before "{{ content_for_header }}" code.
  3. Ask your theme developer for help if you are not familiar with code editing.

Free Shopify theme from https://themes.shopify.com/

CustomerMeta app tested with all free themes. And should automatically update all theme files by "Install theme assets" button.

This instructions, just example how edit file manually

  1. Open code editor. Admin -> Online store -> Themes -> Actions -> Edit code
  2. Open layout/theme.liquid file.
  3. Search for {{ content_for_header }} text. You can read code or use ctrl+F (command+F) for quick search.
  4. Paste code {% include 'cm-head' %} before line '{{ content_for_header }}'
  5. Save file.

b) Insert just before closing "body" tag following code

{% include 'cm-popups' %}

Custom Shopify theme

  1. Locate closing "body" tag at your theme.
  2. Paste above code snippet before closing "body" tag.
  3. Ask your theme developer for help if you are not familiar with code editing.

Free Shopify theme from https://themes.shopify.com/

CustomerMeta app tested with all free themes. And should automatically update all theme files by "Install theme assets" button.

This instructions, just example how edit file manually

  1. Open code editor. Admin -> Online store -> Themes -> Actions -> Edit code
  2. Open layout/theme.liquid file.
  3. Search for </body> text. You can read code or use ctrl+F (command+F) for quick search.
  4. Paste code {% include 'cm-popups' %} before line '</body>'
  5. Save file.

edit product-template.liquid file

Insert after "{% endform %}" tag following code. (after "add to cart" button)

{% include 'cm-product-buttons' %}

Custom Shopify theme

  1. Locate closing "{% endform %}" tag at your theme.
  2. Paste above code snippet after "{% endform %}" tag.
  3. Ask your theme developer for help if you are not familiar with code editing.

Free Shopify theme from https://themes.shopify.com/

CustomerMeta app tested with all free themes. And should automatically update all theme files by "Install theme assets" button.

This instructions, just example how edit file manually

  1. Open code editor. Admin -> Online store -> Themes -> Actions -> Edit code
  2. Open sections/product-template.liquid file.
  3. Search for {% endform %} text. You can read code or use ctrl+F (command+F) for quick search.
  4. Paste code {% include 'cm-product-buttons' %} before line '{% endform %}'
  5. Save file.



Uninstall app

  1. Remove theme assets
  2. Uninstall app



Add wishlist and compare icon to collection page (optional)

  1. Find snippet file for product output at collection page.
  2. Add following code at the bottom.
<div data-js-product data-product-handle="{{ product.handle }}"
         data-product-variant-id="{{ product.selected_or_first_available_variant.id }}"
         class="cm-icons">
    <a class="cm-icon btn--status js-store-lists-add-wishlist"
       {% unless product.selected_or_first_available_variant.available %}disabled="disabled"{% endunless %} >
        <span>{% include 'icon-cmheart' %}</span>
        <span data-button-content="added">{% include 'icon-cmheart-solid' %}</span>
    </a>
    <br>
    <a class="cm-icon btn--status js-store-lists-add-compare"
       {% unless product.selected_or_first_available_variant.available %}disabled="disabled"{% endunless %} >
        <span>{% include 'icon-cmcompare' %}</span>
        <span data-button-content="added">Remove</span>
    </a>
</div>



Assets

What happened when I press "Install theme assets" or "Remove theme assets" buttons?

CustomerMeta app adds or removes needed theme assets and edits two theme assets. Below is full list of files.

Edited files

  1. layout/theme.liquid
  2. sections/product-template.liquid

Check Manual installation (optional) section for more info about edits applied to these files

Added / removed files

  1. assets/cm-app-styles.css
  2. assets/cm-app.min.js
  3. snippets/cm-head.liquid
  4. snippets/cm-popups.liquid
  5. snippets/cm-product-buttons.liquid
  6. snippets/cm-product-grid-item.liquid
  7. snippets/compare.liquid
  8. snippets/compare-get-product.liquid
  9. snippets/icon-cmcompare.liquid
  10. snippets/icon-cmheart.liquid
  11. snippets/product-get-collections.liquid
  12. snippets/wishlist.liquid
  13. templates/cart.compare.liquid
  14. templates/cart.wishlist.liquid
  15. templates/collection.compare.liquid
  16. templates/collection.products_by_handle.liquid
  17. templates/collection.wishlist.liquid



Support

If you have any questions, or want to request app installation fill free to email me at mpthemes@gmail.com