Installation Guidelines for "Custom Product Options" application.


Let's begin:

  • On your “Shopify” store click on “Apps” option on the left bar of your Dashboard. Then Click on “Visit Shopify App Store”.



  • Then search for the “Custom Product Options by HulkApps” and click on “Get




  • As soon as a user clicks on “Get” button it will redirect to the installation page. Over there click on “Install App” button it will redirect to “Custom Product Options” App page of your Store.  




  • Now user needs to setup the installed app with the “Theme” they have on their store. In order to make app successfully working with theme, user needs to navigate to “Edit Code” by clicking on “Online Store” button on left bar of their Dashboard and from the “Action” dropdown menu select “Edit Code” options.



  • By clicking on “Edit Code” option, user will be redirected to the coding page of the particular “Theme” installed on their Store.


  • Now from the sidebar click on “Snippets” folder and click on “Add a new Snippet” button to add new Snippet.


                                          

NOTE: Please make sure that if a snippet naming “hulkcode_options.liquid” is already added then just cross-check the coding from here, and also look for snippet naming "hulkcode_common.liquid" if its already present there then just cross-check the coding from here and if it’s same then you can ignore these steps. 

 

  • In the newly added Snippet add the code from here. And then save it.
  • Now, look for the “Assets” folder in the same side bar and create a new Asset file naming “hulkcode.js” and then add copy the code from here and paste into it and Save the Asset file.




  • NOTE: If an asset file naming “hulkcode.js” is already present in the folder then kindly cross-check the coding from here and if it’s the same then you can ignore this step.


  • Now, look for the “Product.liquid” file under “Templates” folder.


      

OR

  • Look for the “product-template.liquid” file under “Sections” folder.


 

  • And add the code “{% include 'hulkcode_options' %} anywhere in between the tags <form> code </form>. See the example below.




  • Now navigate to “Layout” folder and in there look for the “theme.liquid” file. And then in file look for the code “{% include 'hulkcode_common' %}” and if it’s not present then add it before </body> tag. (Basically, can be found at the end of page)



 

 


 

  • Now, navigate to “Cart.liquid” under “Templates” folder Or  ”cart-template.liquid” file under  “Sections” folder.


                              - Now in here, search for “{{ item.price | money }}” in “Cart.liquid”  file and replace that code with the code below: 


                                   <span class="hulkapps-cart-item-price" data-key="{{item.key}}">

                                                          {{ item.price | money }}

                                                       </span>

 

                               - Secondly, search for ”{{ item.line_price | money }}” in “Cart.liquid”  file and replace that code with the code below:


                                   <span class="hulkapps-cart-item-line-price" data-key="{{item.key}}">

                                                         {{ item.line_price | money }}

                                                       </span>

 

                               - Then, search for “{{ cart.total_price | money }}” in “Cart.liquid”  file and replace that code with the code below.

                                  <span class="hulkapps-cart-original-total">

                                                        {{ cart.total_price | money }}

                                                      </span>

 

  • Now, In the ”Cart.liquid” in “Templates” folder OR  “Cart-template.liquid” file in “Sections” folderpress CTRL + F  to find “properties” code. Then copy the below code and replace the code, usually placed after the product title.


NOTE: A user only needs to replace these codes if they aren’t already present in the respective files as mentioned above.


<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: Arial,Helvetica,sans-serif;">{%- assign property_size = item.properties | size -%}
{% if property_size > 0 %}
<div class="cart__meta-text">
  {% for p in item.properties %}
  {% unless p.last == blank %}
  <div class="cart-property">
    <span class="hulkapps_option_name">{{ p.first }}:
    </span>
    {% comment %}
    Check if there was an uploaded file associated
    {% if p.last contains '/uploads/' %}
    <a href="{{ p.last }}">{{ p.last | split: '/' | last }}
    </a> 
    <br/>
    {% else %}
    {{ p.last }} 
    <br/>
    {% endif %}
    {% endcomment %}
    {% if p.last contains '/uploads/' or p.last contains '.jpg' or p.last contains '.png' or p.last contains '.jpeg' or p.last contains '.svg' %}
    {% if p.last contains '_|_' %}
    {% assign propertyVal = p.last | split: '_|_' %}
    {% assign swatchVal = propertyVal | first | remove: 'http://' | replace: '&amp;amp;amp;', '&amp;amp;' | replace: '&amp;amp;lt;', '<' | replace: '&amp;amp;gt;', '>'  %}
      {% assign swatchImage = propertyVal | last %}
      <span class="hulkapps_option_value " style="cursor: pointer;" >
        <div style="width:35px;height:35px;background-image:url({{swatchImage}});background-size:cover;background-position: center center;" title="" data-placement="top" data-original-title="<div style='padding:5px 0px; text-align:center;width:170px;'><div class='swatch_tooltip_title'>{{ swatchVal }}</div><div class='swatch_tooltip_data' style='width:100%;height:150px;background-image:url({{swatchImage}});background-size:cover;background-position: center center;'></div></div>" data-html="true" data-toggle="tooltip">
        </div>
      </span>
      <br/>
      {% else %}
      <span class="hulkapps_option_value" >
        <a class="lightbox" href="{{ p.last }}">Uploaded File
        </a>
      </span>
      <br/>
      {% endif %}
      {% else %}
      <span class="hulkapps_option_value" >{{ p.last | replace: '&amp;amp;amp;', '&amp;amp;' | replace: '&amp;amp;lt;', '<' | replace: '&amp;amp;gt;', '>'  }}
          </span>
        <br/>
        {% endif %}
        </div>
      {% endunless %}
      {% endfor %}
      </div>
    {% endif %}</span></span>


NOTE: The changes reflect on your live theme only. In case the theme is changed in the future, then all the above steps need to be followed again. 


Want to view a video of how to install the app?    Watch Video here


Need help? Raise a ticket now!


GET INSTALLATION HELP: Contact us on support@hulkcode.com with Staff Account invite.

>  Create Staff User Access