Please refer to the following guidelines to manually place the app snippets in the theme files:

Enabling the Hulk Product Options App and performing Automatic Installation

  • From Shopify Admin proceed to Themes and choose your preferred theme. Click on Customize button.


  • On the Theme Customization page, click on the App Embeds button in the left menu and enable the Hulk Product Options app, and Save the settings.

  • Next, navigate to the Apps page of your Shopify store and open the Hulk Product Options app.


  • Go to the Our App Dashboard and choose the Theme Integration option from the Support dropdown menu.


  • Choose your preferred theme from the dropdown menu and click on the Install button.
  • After following the above steps, users should be able to view the Options on the product page for which they have created and assigned the options.
    Theme Integration


Our Hulk Product Options app is now successfully integrated with your Shopify Online Store 2.0 theme.  

Follow the steps listed below in case of a price mismatch issue on the cart page of your store.
 

(OPTIONAL) Adding hulkapps' data attributes to the pricing snippets in the cart template.

  • Navigate to the Themes section in the Online Store menu, and click on the Edit Code button in the Action dropdown menu.

  • Under Templates, select the cart.liquid template. (If your template contains sections, you will need to select the cart-template.liquid section instead.)
  • Search for the line-item snippet/span code in the cart template and add the following data attribute to its parent class, and SAVE the template.

data-hulkapps-lineitem


  • Next, search for the item.price snippet/span code in the cart template and add the following data attribute to its parent class, and SAVE the template.

data-hulkapps-ci-price

         

  • Now, search for the cart.total_price snippet/span code in the cart template and add the following data attribute to its parent class, and SAVE the template.

data-hulkapps-cart-total

       

(OPTIONAL) Adding line_item properties and Edit Options button snippets in the cart template.

  • In the cart template, search for the properties code and replace it with the following code below:

{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
<div data-hulkapps-line-properties>
{% for p in item.properties %}
{% unless p.last == blank %}
<div class="cart-property">
<span class="property_name">{{ p.first }}:
</span>
{% if p.last contains '/uploads/' %}
<span class="property_value">
<a href="{{ p.last }}">Uploaded File</a>
</span>
<br />
{% else %}
<span class="property_value">{{ p.last }}</span><br />
{% endif %}
</div>
{% endunless %}
{% endfor %}
</div>
<button type="button" class="edit_cart_option btn btn--primary button" data-product_id="{{item.product_id}}"
data-key="{{item.key}}" data-variant_id="{{item.variant_id}}" data-quantity="{{item.quantity}}">Edit
Options</button>
{% endif %}


(OPTIONAL) Placing discount_code snippet in the cart template above the checkout button.

  • Search for the checkout button snippet/span code in the cart template and add the following code just above it, and SAVE the template.

<div class="discount_code_box">
<div class='hulkapps_discount_hide'>
<input placeholder="Discount code" class="hulkapps_discount_code" autocomplete="off" aria-required="true" size="30" type="text" name="checkout_discount">
<button type="button" class="hulkapps_discount_button btn btn--primary button">Apply</button>
</div>
</div>


Congratulations! You have successfully integrated our Hulk Product Options app with your Shopify store theme. Please reach out to us at help@hulk-support.com if you have any questions or concerns.