Follow the below steps for post-installation in Shopify tasks.
1. Open Shopify admin.
2. Go to ONLINE STORE.
3. Click Themes.
4. Search for the current theme or customize button on the right side of the page.
5. Click on the three-dots menu and click on the Edit code.
6. Open the Theme. liquid file in the Layout section of your current theme.
7. Towards the end of the file, look for the closing tag of the Body. () and add the line {% render 'xe_include' %} before </body> tag.
8. Click Save.
9. Add the following after the <head> tag.
{%- assign excludedCollections = "show-in-designer,customized" | split: ',' -%}
{%- if excludedCollections contains collection.handle -%}
<meta name="robots" content="noindex, nofollow">
{%- endif -%}
{% if template.suffix == 'imp_noindex' %}
<meta name="robots" content="noindex, nofollow">
{% endif %}10. Open product.liquid file in the Templates section of your current theme.
Note: The above file may vary depending on your current theme, so search accordingly. |
11. Find the word "AddToCart" and make sure you reach the Add To Cart button with the following code.
<button type="submit" name="add" id="AddToCart" class="btn" >
12. In some cases when you don't see the "AddToCart" button in your code then search for "addToCart" or "addtocart". This depends on the way it exists in your theme.
In some cases "AddToCart" button would be in <input type="Button" format.
After the closing Tag of AddToCart Button and before </form>, add the following line.
{% render 'customizeButton' %}
13. Add the line {% render 'xe_script' %} at the end of the file.
Click Save.
14. Open cart.liquid page in the Templates section of your current Shopify store theme.
15. Search for the code line {% for item in cart.items %} in the file (cart.liquid) and add the following block of code after that line.
16. Replace the first existence of <div class="cart__row"> with <div class="cart__row" data-line="{{ forloop.index }}">.
{% assign ref_id = "0" %}
{% for p in item.properties %}
{% assign pfirst_char = p.first | slice: 0 %}
{% if pfirst_char == "_" %}
{% if p.first == "_refid" %}
{% assign ref_id = p.last %}
{% endif %}
{% endif %}
{% endfor %}| NOTE: The line <div class="cart__row"> may appear multiple times in the file. In that case, you need to do changes where it appears for the first time. The name "cart__row" may vary in few themes. In such a case, look for closely related div and make the changes. If you are a Developer then " <div class="cart__row"> " is the div tat, which contains all items of the cart. |
17. Remove the first occurrence of "<div class="grid">" div and its corresponding closing tag. </div>
| NOTE: In some themes, the class name may appear multiple times. Here too, you need to delete the div where it first appears. |
18. Search for the following block of code.
<div class="grid__item one-third">
<a href="{{ item.url | within: collections.all }}" class="cart__image">
{% comment %}
More image size options at:
- http://docs.shopify.com/themes/filters/product-img-url
{% endcomment %}
<img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
</a>
</div>
and replace it with the code block given below
<div class="grid-item six-eighths">
{% if ref_id != "0" %}
<ul class="ref-preview-img custom_loading"style="padding-left: 5px;" data-ref-id="{{ref_id}}" data-varId="{{item.variant.id}}">
<span class="loading"> Loading product images </span>
</ul>
{% else %}
<a href="{{ item.url }}" class="cart-image">
<img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
</a>
{% endif %}
</div>
19. Remove the line {% if propertySize > 0 %} and its corresponding closing tag {% endif %}.
20. Click Save.
The post-installation tasks to run ImprintNext in your store have been done.
