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 Theme Settings button in the bottom left corner.
- Click on the App embeds tab on the right side of the page under the Theme settings block, enable the Hulk Product Options app, and Save the settings.
- 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.
- In the Automatic Installation block, click on the Start Now button.
- Choose your preferred theme from the dropdown menu and click on the Install button.
- Navigate back to the Themes section in the Online Store menu. And click on the Edit Code button in the Action dropdown menu.
Placing Hulk Product Options App's option div/snippet in the product page template.
- In the product.liquid 'or' product-template.liquid 'or' product-form.liquid file add the following div code and save the template.
<div id="hulkapps_custom_options_{{ product.id }}"></div>
While placing the app snippet in the product template please make sure to check that the app snippet is placed inside the form.
Adding hulkapps' data attributes to the pricing snippets in the cart template.
- 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
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 %}
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.
