In this section, you can create and customize your product options, set up conditions, and create and define option sets. Provide customers access to all your options with checkboxes, radio buttons, text fields, uploaded images, color swatches, buttons, and more.OptionsHulk Product Options provides a total of four types of options categories:        - Choose Any One (Radio Buttons, Dropdown Menu, Swatch, Button)       - Choose Multiple (Checkbox, Dropdown Menu, Swatch)        - Text Input (Short text, Paragraph text, Email, Phone, Hidden Field)       - Other (File Upload, Date Field, Number Field) Option setsYou can select the options that you have created and prepare a set of options to apply to products for an easy and efficient setup.ConditionsCreate rules that will show or hide additional options based on their previous selections. E.g., For E.g., unless the customized shirt option was selected in the previous step, hide the file upload option that asks for their logo. 

In this section, you can customize two different aspects of our app customization: display settings and general settings.Title - Compliment your store brand with your preferred color combination. Adjust font size, alignment, padding, and font weight for the product options title.Update your options title nameChoose the title’s font sizeAlign your title to the left, right, or centerChoose the paddingAdd background colorChoose the border color of the title sectionChange the text colorChoose font-weightContainer Style - Customize product options container with your theme color design and padding, and allow your customers to see help text and tooltip details.Change the background color of the containerChange the border color of the containerChoose the line color that separates your optionsCustomize the  padding of the containerCustomize the gap between the two optionsEnable the tooltip for your optionsEnable help text for your optionsOption display text – Our application offers a design customization feature that offers the ability to match the look and feel of the options display text with your themeChange the width of your option nameChoose your options alignment: left, right, or centerChange the font size of the optionsChange the options color and match it with your theme      5. Choose font-weight      6. Choose option placement; it can be on the left or above the valuesOption values – Our application lets you customize options orientation, font weight, size, etc.Choose the font size option valuesChoose the text color of option valuesChoose font-weightSet your checkbox/radio buttons in a horizontal or vertical alignmentSet the character limit text to your preferred languageSwatches – customize swatch height, width, hover text position, and shape according to your preference.Change the height of swatchesChange the width of swatchesChoose whether you want to display the tooltip or notChoose where you want to show the swatch image (top or bottom)Choose whether you want to show text and an image, or only textChoose between the round and square shapes of swatchesShow the image value next to the swatch imageButton - Modify the look and feel of your button options to complement your store brand.Choose the background color of the buttonChoose the border-colorChoose the color of the button textTotal Amount Note – Modify the total amount note text to your preferred language and customize the look and feel to match it with your theme.Edit the total amount note on your preferred text or languageChange the background color of the total amount noteChange the border color of the total amount noteChange the text color of the total amount noteChange the color of the amount shownAdvanced Styling - Inject custom CSS codes and change every aspect of the options, from styling to functionality. If you are facing any difficulties with CSS and JS, our coding experts can assist you with your customization. Define the styling of our product options container by adding your own custom CSSAdd dynamic behavior to our app options by adding your own custom JS to our product optionsChange the customization text, which appears on the checkout page.

Enable or disable in-cart editing, and change the way in which customers can edit their items. And enable or disable the Shopify Discount Code box on the Cart Page.Enable Edit in Cart   This option will let customers edit the options they’ve selected from the cart page without starting over from scratch.If you want to enable Edit Options on the Cart Page, you have to go to the Cart Template Section.liquid to paste the following code into your cart page product details grid section (if your template contains sections, you must select the cart template.liquid section:{% assign property_size = item.properties | size %} {% if property_size > 0 %} {%- comment -%}{% for p in item.properties %} {% assign first_character_in_key = p.first | truncate: 1, '' %} {% unless p.last == blank or first_character_in_key == '_' %} {{ p.first }}: {% if p.last contains '/uploads/' %} <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a> {% else %} {{ p.last }} {% endif %} <br> {% endunless %} {% endfor %}{%- endcomment -%}{%- for p in item.properties -%} {%- unless p.last == blank -%} <li class="product-details__item product-details__item--property{%if property_size == 0%} hide{% endif %}" data-cart-item-property> <span class="product-details__item-label" data-cart-item-property-name>{{ p.first }}: </span> {%- comment -%} Check if there was an uploaded file associated {%- endcomment -%} <span data-cart-item-property-value> {%- if p.last contains "uploads" -%} <a href="{{ p.last }}">Uploaded File</a> {%- else -%} {{ p.last }} {%- endif -%} </span> </li> {%- endunless -%} {%- endfor -%}            <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 %}The above code will display the Edit Option in the cart page.Enable Discount code boxIf our app's product options are being used by a store, then your discount code box on the checkout page will be disabled as it is incompatible with our app.However, to resolve this issue, we can place your discount code box on the cart page. This would mean that, if our app's product options are being used, the discount code box will appear on the cart page, and if our app is not used, it will appear on the checkout page.In both scenarios, your customers will be able to apply the discount codes to your product.If we want to enable the Discount Code Box in the theme, we need to paste the following codes in the Cart Page’s liquid file:<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>Search for the cart.liquid / cart-template.liquid file in your theme coding.NOTE: If cart-template.liquid file is available, then please make the changes in the cart-template.liquid file only, as all the coding of “cart.liquid” will be included in this file.Place the copied code wherever you need the discount code box to be displayed.