Loopedin stanndalone header

Welcome to the HulkApps Product Options App Knowledge base

Search Icon

Theme Integration

Please refer to the following articles for manually placing the app snippets in your theme files. (Coding expertise required)

Theme Integration

Shopify Online Store 1.0 Theme

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 InstallationFrom 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-lineitemNext, 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. 
Bhavya

Theme Integration

Shopify Online Store 2.0 Theme

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 InstallationFrom 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.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-lineitemNext, 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}}">EditOptions</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.
Bhavya