NOTE: These integration guidelines are limited to Shopify Online Store 1.0 only

Like most of the Shopify apps, we also offer automatic theme integration. This will work for almost all the themes available across the Shopify platform.

Please make sure you always perform the Theme Integration in a Duplicate/Staging theme of your store to avoid any conflicts.


Follow the steps for theme integration:

1. Open the Infinite Product Options App from your Shopify store’s App listing page and click on the Installation button from the Installation menu on the top and choose Automatic Installation.

Theme Integration

2. Select the theme to integrate with the Infinite Product Options app and inject the snippets by clicking on the Install button.

Theme Integration

After a successful Theme Integration, if the options are not visible on the Product to which the options are assigned, you must follow some necessary steps to add the snippets manually in the theme files to display the Product Options on Shopify storefront.


Follow the  steps to insert the snippets manually into your Shopify store theme.



  1. Manually Create Snippets
    • From “Shopify Admin”, select Online Store and click Themes

      Install Instructions
    • Select Actions

      Install Instructions
    • Select Edit code

      Install Instructions
  2. Add liquid snippets

    Skip this step if all required snippets are present at your published theme

    • Under “Snippets” select Add a new snippet

      Install Instructions
    • Enter file name as hulkcode_common.liquid

      Install Instructions
    • Copy the code from below and place it in the hulkcode_common.liquid file created on the above step and save the file.

                                        
                                                			  <style>
                                                            .intl-tel-input .country-list .country-name,
                                                            .intl-tel-input .country-list .dial-code,
                                                            .intl-tel-input .country-list .flag-box{
                                                                vertical-align:middle 
                                                            }
                                                            .intl-tel-input{
                                                                position:relative;
                                                                display:block 
                                                            }
                                                            .intl-tel-input *{
                                                                box-sizing:border-box;
                                                                -moz-box-sizing:border-box 
                                                            }
                                                            .intl-tel-input .hide{
                                                                display:none 
                                                            }
                                                            .intl-tel-input .v-hide{
                                                                visibility:hidden 
                                                            }
                                                            .intl-tel-input input,
                                                            .intl-tel-input input[type=tel],
                                                            .intl-tel-input input[type=text]{
                                                                position:relative;
                                                                z-index:0;
                                                                margin-top:0!important;
                                                                margin-bottom:0!important;
                                                                padding-right:36px;
                                                                margin-right:0 
                                                            }
                                                            .intl-tel-input .flag-container{
                                                                position:absolute;
                                                                top:0;
                                                                bottom:0;
                                                                right:0;
                                                                padding:1px 
                                                            }
                                                            .intl-tel-input .selected-flag{
                                                                z-index:1;
                                                                position:relative;
                                                                width:36px;
                                                                height:100%;
                                                                padding:0 0 0 8px 
                                                            }
                                                            .intl-tel-input .selected-flag .iti-flag{
                                                                position:absolute;
                                                                top:0;
                                                                bottom:0;
                                                                margin:auto 
                                                            }
                                                            .intl-tel-input .selected-flag .iti-arrow{
                                                                position:absolute;
                                                                top:50%;
                                                                margin-top:-2px;
                                                                right:6px;
                                                                width:0;
                                                                height:0;
                                                                border-left:3px solid transparent;
                                                                border-right:3px solid transparent;
                                                                border-top:4px solid #555 
                                                            }
                                                            .intl-tel-input .selected-flag .iti-arrow.up{
                                                                border-top:none;
                                                                border-bottom:4px solid #555 
                                                            }
                                                            .intl-tel-input .country-list{
                                                                position:absolute;
                                                                z-index:2;
                                                                list-style:none;
                                                                text-align:left;
                                                                padding:0;
                                                                margin:0 0 0 -1px;
                                                                box-shadow:1px 1px 4px rgba(0,0,0,.2);
                                                                background-color:#fff;
                                                                border:1px solid #CCC;
                                                                white-space:nowrap;
                                                                max-height:200px;
                                                                overflow-y:scroll 
                                                            }
                                                            .intl-tel-input .country-list .country.highlight,
                                                            .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag{
                                                                background-color:rgba(0,0,0,.05) 
                                                            }
                                                            .intl-tel-input .country-list.dropup{
                                                                bottom:100%;
                                                                margin-bottom:-1px 
                                                            }
                                                            .intl-tel-input .country-list .flag-box{
                                                                display:inline-block;
                                                                width:20px 
                                                            }
                                                            @media (max-width:500px){
                                                                .intl-tel-input .country-list{
                                                                    white-space:normal 
                                                                }
                                                            }
                                                            .intl-tel-input .country-list .divider{
                                                                padding-bottom:5px;
                                                                margin-bottom:5px;
                                                                border-bottom:1px solid #CCC 
                                                            }
                                                            .intl-tel-input .country-list .country{
                                                                padding:5px 10px 
                                                            }
                                                            .intl-tel-input .country-list .country .dial-code{
                                                                color:#999 
                                                            }
                                                            .intl-tel-input .country-list .country-name,
                                                            .intl-tel-input .country-list .flag-box{
                                                                margin-right:6px 
                                                            }
                                                            .intl-tel-input.allow-dropdown input,
                                                            .intl-tel-input.allow-dropdown input[type=tel],
                                                            .intl-tel-input.allow-dropdown input[type=text],
                                                            .intl-tel-input.separate-dial-code input,
                                                            .intl-tel-input.separate-dial-code input[type=tel],
                                                            .intl-tel-input.separate-dial-code input[type=text]{
                                                                padding-right:6px;
                                                                padding-left:52px;
                                                                margin-left:0 
                                                            }
                                                            .intl-tel-input.allow-dropdown .flag-container,
                                                            .intl-tel-input.separate-dial-code .flag-container{
                                                                right:auto;
                                                                left:0 
                                                            }
                                                            .intl-tel-input.allow-dropdown .selected-flag,
                                                            .intl-tel-input.separate-dial-code .selected-flag{
                                                                width:46px 
                                                            }
                                                            .intl-tel-input.allow-dropdown .flag-container:hover{
                                                                cursor:pointer 
                                                            }
                                                            .intl-tel-input.allow-dropdown input[disabled]+.flag-container:hover,
                                                            .intl-tel-input.allow-dropdown input[readonly]+.flag-container:hover{
                                                                cursor:default 
                                                            }
                                                            .intl-tel-input.allow-dropdown input[disabled]+.flag-container:hover .selected-flag,
                                                            .intl-tel-input.allow-dropdown input[readonly]+.flag-container:hover .selected-flag{
                                                                background-color:transparent 
                                                            }
                                                            .intl-tel-input.separate-dial-code .selected-flag{
                                                                background-color:rgba(0,0,0,.05);
                                                                display:table 
                                                            }
                                                            .intl-tel-input.separate-dial-code .selected-dial-code{
                                                                display:table-cell;
                                                                vertical-align:middle;
                                                                padding-left:28px 
                                                            }
                                                            .intl-tel-input.separate-dial-code.iti-sdc-2 input,
                                                            .intl-tel-input.separate-dial-code.iti-sdc-2 input[type=tel],
                                                            .intl-tel-input.separate-dial-code.iti-sdc-2 input[type=text]{
                                                                padding-left:66px 
                                                            }
                                                            .intl-tel-input.separate-dial-code.iti-sdc-2 .selected-flag{
                                                                width:60px 
                                                            }
                                                            .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input,
                                                            .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=tel],
                                                            .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=text]{
                                                                padding-left:76px 
                                                            }
                                                            .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 .selected-flag{
                                                                width:70px 
                                                            }
                                                            .intl-tel-input.separate-dial-code.iti-sdc-3 input,
                                                            .intl-tel-input.separate-dial-code.iti-sdc-3 input[type=tel],
                                                            .intl-tel-input.separate-dial-code.iti-sdc-3 input[type=text]{
                                                                padding-left:74px 
                                                            }
                                                            .intl-tel-input.separate-dial-code.iti-sdc-3 .selected-flag{
                                                                width:68px 
                                                            }
                                                            .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input,
                                                            .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=tel],
                                                            .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=text]{
                                                                padding-left:84px 
                                                            }
                                                            .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 .selected-flag{
                                                                width:78px 
                                                            }
                                                            .intl-tel-input.separate-dial-code.iti-sdc-4 input,
                                                            .intl-tel-input.separate-dial-code.iti-sdc-4 input[type=tel],
                                                            .intl-tel-input.separate-dial-code.iti-sdc-4 input[type=text]{
                                                                padding-left:82px 
                                                            }
                                                            .intl-tel-input.separate-dial-code.iti-sdc-4 .selected-flag{
                                                                width:76px 
                                                            }
                                                            .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input,
                                                            .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=tel],
                                                            .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=text]{
                                                                padding-left:92px 
                                                            }
                                                            .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 .selected-flag{
                                                                width:86px 
                                                            }
                                                            .intl-tel-input.separate-dial-code.iti-sdc-5 input,
                                                            .intl-tel-input.separate-dial-code.iti-sdc-5 input[type=tel],
                                                            .intl-tel-input.separate-dial-code.iti-sdc-5 input[type=text]{
                                                                padding-left:90px 
                                                            }
                                                            .intl-tel-input.separate-dial-code.iti-sdc-5 .selected-flag{
                                                                width:84px 
                                                            }
                                                            .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input,
                                                            .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=tel],
                                                            .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=text]{
                                                                padding-left:100px 
                                                            }
                                                            .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 .selected-flag{
                                                                width:94px 
                                                            }
                                                            .intl-tel-input.iti-container{
                                                                position:absolute;
                                                                top:-1000px;
                                                                left:-1000px;
                                                                z-index:1060;
                                                                padding:1px 
                                                            }
                                                            .intl-tel-input.iti-container:hover{
                                                                cursor:pointer 
                                                            }
                                                            .iti-mobile .intl-tel-input.iti-container{
                                                                top:30px;
                                                                bottom:30px;
                                                                left:30px;
                                                                right:30px;
                                                                position:fixed;
                                                                z-index: 99999;
                                                            }
                                                            .iti-mobile .intl-tel-input .country-list{
                                                                max-height:100%;
                                                                width:100% 
                                                            }
                                                            .iti-mobile .intl-tel-input .country-list .country{
                                                                padding:10px;
                                                                line-height:1.5em 
                                                            }
                                                            .iti-flag{
                                                                width:20px 
                                                            }
                                                            .iti-flag.be{
                                                                width:18px 
                                                            }
                                                            .iti-flag.ch{
                                                                width:15px 
                                                            }
                                                            .iti-flag.mc{
                                                                width:19px 
                                                            }
                                                            .iti-flag.ac{
                                                                height:10px;
                                                                background-position:0 0 
                                                            }
                                                            .iti-flag.ad{
                                                                height:14px;
                                                                background-position:-22px 0 
                                                            }
                                                            .iti-flag.ae{
                                                                height:10px;
                                                                background-position:-44px 0 
                                                            }
                                                            .iti-flag.af{
                                                                height:14px;
                                                                background-position:-66px 0 
                                                            }
                                                            .iti-flag.ag{
                                                                height:14px;
                                                                background-position:-88px 0 
                                                            }
                                                            .iti-flag.ai{
                                                                height:10px;
                                                                background-position:-110px 0 
                                                            }
                                                            .iti-flag.al{
                                                                height:15px;
                                                                background-position:-132px 0 
                                                            }
                                                            .iti-flag.am{
                                                                height:10px;
                                                                background-position:-154px 0 
                                                            }
                                                            .iti-flag.ao{
                                                                height:14px;
                                                                background-position:-176px 0 
                                                            }
                                                            .iti-flag.aq{
                                                                height:14px;
                                                                background-position:-198px 0 
                                                            }
                                                            .iti-flag.ar{
                                                                height:13px;
                                                                background-position:-220px 0 
                                                            }
                                                            .iti-flag.as{
                                                                height:10px;
                                                                background-position:-242px 0 
                                                            }
                                                            .iti-flag.at{
                                                                height:14px;
                                                                background-position:-264px 0 
                                                            }
                                                            .iti-flag.au{
                                                                height:10px;
                                                                background-position:-286px 0 
                                                            }
                                                            .iti-flag.aw{
                                                                height:14px;
                                                                background-position:-308px 0 
                                                            }
                                                            .iti-flag.ax{
                                                                height:13px;
                                                                background-position:-330px 0 
                                                            }
                                                            .iti-flag.az{
                                                                height:10px;
                                                                background-position:-352px 0 
                                                            }
                                                            .iti-flag.ba{
                                                                height:10px;
                                                                background-position:-374px 0 
                                                            }
                                                            .iti-flag.bb{
                                                                height:14px;
                                                                background-position:-396px 0 
                                                            }
                                                            .iti-flag.bd{
                                                                height:12px;
                                                                background-position:-418px 0 
                                                            }
                                                            .iti-flag.be{
                                                                height:15px;
                                                                background-position:-440px 0 
                                                            }
                                                            .iti-flag.bf{
                                                                height:14px;
                                                                background-position:-460px 0 
                                                            }
                                                            .iti-flag.bg{
                                                                height:12px;
                                                                background-position:-482px 0 
                                                            }
                                                            .iti-flag.bh{
                                                                height:12px;
                                                                background-position:-504px 0 
                                                            }
                                                            .iti-flag.bi{
                                                                height:12px;
                                                                background-position:-526px 0 
                                                            }
                                                            .iti-flag.bj{
                                                                height:14px;
                                                                background-position:-548px 0 
                                                            }
                                                            .iti-flag.bl{
                                                                height:14px;
                                                                background-position:-570px 0 
                                                            }
                                                            .iti-flag.bm{
                                                                height:10px;
                                                                background-position:-592px 0 
                                                            }
                                                            .iti-flag.bn{
                                                                height:10px;
                                                                background-position:-614px 0 
                                                            }
                                                            .iti-flag.bo{
                                                                height:14px;
                                                                background-position:-636px 0 
                                                            }
                                                            .iti-flag.bq{
                                                                height:14px;
                                                                background-position:-658px 0 
                                                            }
                                                            .iti-flag.br{
                                                                height:14px;
                                                                background-position:-680px 0 
                                                            }
                                                            .iti-flag.bs{
                                                                height:10px;
                                                                background-position:-702px 0 
                                                            }
                                                            .iti-flag.bt{
                                                                height:14px;
                                                                background-position:-724px 0 
                                                            }
                                                            .iti-flag.bv{
                                                                height:15px;
                                                                background-position:-746px 0 
                                                            }
                                                            .iti-flag.bw{
                                                                height:14px;
                                                                background-position:-768px 0 
                                                            }
                                                            .iti-flag.by{
                                                                height:10px;
                                                                background-position:-790px 0 
                                                            }
                                                            .iti-flag.bz{
                                                                height:14px;
                                                                background-position:-812px 0 
                                                            }
                                                            .iti-flag.ca{
                                                                height:10px;
                                                                background-position:-834px 0 
                                                            }
                                                            .iti-flag.cc{
                                                                height:10px;
                                                                background-position:-856px 0 
                                                            }
                                                            .iti-flag.cd{
                                                                height:15px;
                                                                background-position:-878px 0 
                                                            }
                                                            .iti-flag.cf{
                                                                height:14px;
                                                                background-position:-900px 0 
                                                            }
                                                            .iti-flag.cg{
                                                                height:14px;
                                                                background-position:-922px 0 
                                                            }
                                                            .iti-flag.ch{
                                                                height:15px;
                                                                background-position:-944px 0 
                                                            }
                                                            .iti-flag.ci{
                                                                height:14px;
                                                                background-position:-961px 0 
                                                            }
                                                            .iti-flag.ck{
                                                                height:10px;
                                                                background-position:-983px 0 
                                                            }
                                                            .iti-flag.cl{
                                                                height:14px;
                                                                background-position:-1005px 0 
                                                            }
                                                            .iti-flag.cm{
                                                                height:14px;
                                                                background-position:-1027px 0 
                                                            }
                                                            .iti-flag.cn{
                                                                height:14px;
                                                                background-position:-1049px 0 
                                                            }
                                                            .iti-flag.co{
                                                                height:14px;
                                                                background-position:-1071px 0 
                                                            }
                                                            .iti-flag.cp{
                                                                height:14px;
                                                                background-position:-1093px 0 
                                                            }
                                                            .iti-flag.cr{
                                                                height:12px;
                                                                background-position:-1115px 0 
                                                            }
                                                            .iti-flag.cu{
                                                                height:10px;
                                                                background-position:-1137px 0 
                                                            }
                                                            .iti-flag.cv{
                                                                height:12px;
                                                                background-position:-1159px 0 
                                                            }
                                                            .iti-flag.cw{
                                                                height:14px;
                                                                background-position:-1181px 0 
                                                            }
                                                            .iti-flag.cx{
                                                                height:10px;
                                                                background-position:-1203px 0 
                                                            }
                                                            .iti-flag.cy{
                                                                height:14px;
                                                                background-position:-1225px 0 
                                                            }
                                                            .iti-flag.cz{
                                                                height:14px;
                                                                background-position:-1247px 0 
                                                            }
                                                            .iti-flag.de{
                                                                height:12px;
                                                                background-position:-1269px 0 
                                                            }
                                                            .iti-flag.dg{
                                                                height:10px;
                                                                background-position:-1291px 0 
                                                            }
                                                            .iti-flag.dj{
                                                                height:14px;
                                                                background-position:-1313px 0 
                                                            }
                                                            .iti-flag.dk{
                                                                height:15px;
                                                                background-position:-1335px 0 
                                                            }
                                                            .iti-flag.dm{
                                                                height:10px;
                                                                background-position:-1357px 0 
                                                            }
                                                            .iti-flag.do{
                                                                height:14px;
                                                                background-position:-1379px 0 
                                                            }
                                                            .iti-flag.dz{
                                                                height:14px;
                                                                background-position:-1401px 0 
                                                            }
                                                            .iti-flag.ea{
                                                                height:14px;
                                                                background-position:-1423px 0 
                                                            }
                                                            .iti-flag.ec{
                                                                height:14px;
                                                                background-position:-1445px 0 
                                                            }
                                                            .iti-flag.ee{
                                                                height:13px;
                                                                background-position:-1467px 0 
                                                            }
                                                            .iti-flag.eg{
                                                                height:14px;
                                                                background-position:-1489px 0 
                                                            }
                                                            .iti-flag.eh{
                                                                height:10px;
                                                                background-position:-1511px 0 
                                                            }
                                                            .iti-flag.er{
                                                                height:10px;
                                                                background-position:-1533px 0 
                                                            }
                                                            .iti-flag.es{
                                                                height:14px;
                                                                background-position:-1555px 0 
                                                            }
                                                            .iti-flag.et{
                                                                height:10px;
                                                                background-position:-1577px 0 
                                                            }
                                                            .iti-flag.eu{
                                                                height:14px;
                                                                background-position:-1599px 0 
                                                            }
                                                            .iti-flag.fi{
                                                                height:12px;
                                                                background-position:-1621px 0 
                                                            }
                                                            .iti-flag.fj{
                                                                height:10px;
                                                                background-position:-1643px 0 
                                                            }
                                                            .iti-flag.fk{
                                                                height:10px;
                                                                background-position:-1665px 0 
                                                            }
                                                            .iti-flag.fm{
                                                                height:11px;
                                                                background-position:-1687px 0 
                                                            }
                                                            .iti-flag.fo{
                                                                height:15px;
                                                                background-position:-1709px 0 
                                                            }
                                                            .iti-flag.fr{
                                                                height:14px;
                                                                background-position:-1731px 0 
                                                            }
                                                            .iti-flag.ga{
                                                                height:15px;
                                                                background-position:-1753px 0 
                                                            }
                                                            .iti-flag.gb{
                                                                height:10px;
                                                                background-position:-1775px 0 
                                                            }
                                                            .iti-flag.gd{
                                                                height:12px;
                                                                background-position:-1797px 0 
                                                            }
                                                            .iti-flag.ge{
                                                                height:14px;
                                                                background-position:-1819px 0 
                                                            }
                                                            .iti-flag.gf{
                                                                height:14px;
                                                                background-position:-1841px 0 
                                                            }
                                                            .iti-flag.gg{
                                                                height:14px;
                                                                background-position:-1863px 0 
                                                            }
                                                            .iti-flag.gh{
                                                                height:14px;
                                                                background-position:-1885px 0 
                                                            }
                                                            .iti-flag.gi{
                                                                height:10px;
                                                                background-position:-1907px 0 
                                                            }
                                                            .iti-flag.gl{
                                                                height:14px;
                                                                background-position:-1929px 0 
                                                            }
                                                            .iti-flag.gm{
                                                                height:14px;
                                                                background-position:-1951px 0 
                                                            }
                                                            .iti-flag.gn{
                                                                height:14px;
                                                                background-position:-1973px 0 
                                                            }
                                                            .iti-flag.gp{
                                                                height:14px;
                                                                background-position:-1995px 0 
                                                            }
                                                            .iti-flag.gq{
                                                                height:14px;
                                                                background-position:-2017px 0 
                                                            }
                                                            .iti-flag.gr{
                                                                height:14px;
                                                                background-position:-2039px 0 
                                                            }
                                                            .iti-flag.gs{
                                                                height:10px;
                                                                background-position:-2061px 0 
                                                            }
                                                            .iti-flag.gt{
                                                                height:13px;
                                                                background-position:-2083px 0 
                                                            }
                                                            .iti-flag.gu{
                                                                height:11px;
                                                                background-position:-2105px 0 
                                                            }
                                                            .iti-flag.gw{
                                                                height:10px;
                                                                background-position:-2127px 0 
                                                            }
                                                            .iti-flag.gy{
                                                                height:12px;
                                                                background-position:-2149px 0 
                                                            }
                                                            .iti-flag.hk{
                                                                height:14px;
                                                                background-position:-2171px 0 
                                                            }
                                                            .iti-flag.hm{
                                                                height:10px;
                                                                background-position:-2193px 0 
                                                            }
                                                            .iti-flag.hn{
                                                                height:10px;
                                                                background-position:-2215px 0 
                                                            }
                                                            .iti-flag.hr{
                                                                height:10px;
                                                                background-position:-2237px 0 
                                                            }
                                                            .iti-flag.ht{
                                                                height:12px;
                                                                background-position:-2259px 0 
                                                            }
                                                            .iti-flag.hu{
                                                                height:10px;
                                                                background-position:-2281px 0 
                                                            }
                                                            .iti-flag.ic{
                                                                height:14px;
                                                                background-position:-2303px 0 
                                                            }
                                                            .iti-flag.id{
                                                                height:14px;
                                                                background-position:-2325px 0 
                                                            }
                                                            .iti-flag.ie{
                                                                height:10px;
                                                                background-position:-2347px 0 
                                                            }
                                                            .iti-flag.il{
                                                                height:15px;
                                                                background-position:-2369px 0 
                                                            }
                                                            .iti-flag.im{
                                                                height:10px;
                                                                background-position:-2391px 0 
                                                            }
                                                            .iti-flag.in{
                                                                height:14px;
                                                                background-position:-2413px 0 
                                                            }
                                                            .iti-flag.io{
                                                                height:10px;
                                                                background-position:-2435px 0 
                                                            }
                                                            .iti-flag.iq{
                                                                height:14px;
                                                                background-position:-2457px 0 
                                                            }
                                                            .iti-flag.ir{
                                                                height:12px;
                                                                background-position:-2479px 0 
                                                            }
                                                            .iti-flag.is{
                                                                height:15px;
                                                                background-position:-2501px 0 
                                                            }
                                                            .iti-flag.it{
                                                                height:14px;
                                                                background-position:-2523px 0 
                                                            }
                                                            .iti-flag.je{
                                                                height:12px;
                                                                background-position:-2545px 0 
                                                            }
                                                            .iti-flag.jm{
                                                                height:10px;
                                                                background-position:-2567px 0 
                                                            }
                                                            .iti-flag.jo{
                                                                height:10px;
                                                                background-position:-2589px 0 
                                                            }
                                                            .iti-flag.jp{
                                                                height:14px;
                                                                background-position:-2611px 0 
                                                            }
                                                            .iti-flag.ke{
                                                                height:14px;
                                                                background-position:-2633px 0 
                                                            }
                                                            .iti-flag.kg{
                                                                height:12px;
                                                                background-position:-2655px 0 
                                                            }
                                                            .iti-flag.kh{
                                                                height:13px;
                                                                background-position:-2677px 0 
                                                            }
                                                            .iti-flag.ki{
                                                                height:10px;
                                                                background-position:-2699px 0 
                                                            }
                                                            .iti-flag.km{
                                                                height:12px;
                                                                background-position:-2721px 0 
                                                            }
                                                            .iti-flag.kn{
                                                                height:14px;
                                                                background-position:-2743px 0 
                                                            }
                                                            .iti-flag.kp{
                                                                height:10px;
                                                                background-position:-2765px 0 
                                                            }
                                                            .iti-flag.kr{
                                                                height:14px;
                                                                background-position:-2787px 0 
                                                            }
                                                            .iti-flag.kw{
                                                                height:10px;
                                                                background-position:-2809px 0 
                                                            }
                                                            .iti-flag.ky{
                                                                height:10px;
                                                                background-position:-2831px 0 
                                                            }
                                                            .iti-flag.kz{
                                                                height:10px;
                                                                background-position:-2853px 0 
                                                            }
                                                            .iti-flag.la{
                                                                height:14px;
                                                                background-position:-2875px 0 
                                                            }
                                                            .iti-flag.lb{
                                                                height:14px;
                                                                background-position:-2897px 0 
                                                            }
                                                            .iti-flag.lc{
                                                                height:10px;
                                                                background-position:-2919px 0 
                                                            }
                                                            .iti-flag.li{
                                                                height:12px;
                                                                background-position:-2941px 0 
                                                            }
                                                            .iti-flag.lk{
                                                                height:10px;
                                                                background-position:-2963px 0 
                                                            }
                                                            .iti-flag.lr{
                                                                height:11px;
                                                                background-position:-2985px 0 
                                                            }
                                                            .iti-flag.ls{
                                                                height:14px;
                                                                background-position:-3007px 0 
                                                            }
                                                            .iti-flag.lt{
                                                                height:12px;
                                                                background-position:-3029px 0 
                                                            }
                                                            .iti-flag.lu{
                                                                height:12px;
                                                                background-position:-3051px 0 
                                                            }
                                                            .iti-flag.lv{
                                                                height:10px;
                                                                background-position:-3073px 0 
                                                            }
                                                            .iti-flag.ly{
                                                                height:10px;
                                                                background-position:-3095px 0 
                                                            }
                                                            .iti-flag.ma{
                                                                height:14px;
                                                                background-position:-3117px 0 
                                                            }
                                                            .iti-flag.mc{
                                                                height:15px;
                                                                background-position:-3139px 0 
                                                            }
                                                            .iti-flag.md{
                                                                height:10px;
                                                                background-position:-3160px 0 
                                                            }
                                                            .iti-flag.me{
                                                                height:10px;
                                                                background-position:-3182px 0 
                                                            }
                                                            .iti-flag.mf{
                                                                height:14px;
                                                                background-position:-3204px 0 
                                                            }
                                                            .iti-flag.mg{
                                                                height:14px;
                                                                background-position:-3226px 0 
                                                            }
                                                            .iti-flag.mh{
                                                                height:11px;
                                                                background-position:-3248px 0 
                                                            }
                                                            .iti-flag.mk{
                                                                height:10px;
                                                                background-position:-3270px 0 
                                                            }
                                                            .iti-flag.ml{
                                                                height:14px;
                                                                background-position:-3292px 0 
                                                            }
                                                            .iti-flag.mm{
                                                                height:14px;
                                                                background-position:-3314px 0 
                                                            }
                                                            .iti-flag.mn{
                                                                height:10px;
                                                                background-position:-3336px 0 
                                                            }
                                                            .iti-flag.mo{
                                                                height:14px;
                                                                background-position:-3358px 0 
                                                            }
                                                            .iti-flag.mp{
                                                                height:10px;
                                                                background-position:-3380px 0 
                                                            }
                                                            .iti-flag.mq{
                                                                height:14px;
                                                                background-position:-3402px 0 
                                                            }
                                                            .iti-flag.mr{
                                                                height:14px;
                                                                background-position:-3424px 0 
                                                            }
                                                            .iti-flag.ms{
                                                                height:10px;
                                                                background-position:-3446px 0 
                                                            }
                                                            .iti-flag.mt{
                                                                height:14px;
                                                                background-position:-3468px 0 
                                                            }
                                                            .iti-flag.mu{
                                                                height:14px;
                                                                background-position:-3490px 0 
                                                            }
                                                            .iti-flag.mv{
                                                                height:14px;
                                                                background-position:-3512px 0 
                                                            }
                                                            .iti-flag.mw{
                                                                height:14px;
                                                                background-position:-3534px 0 
                                                            }
                                                            .iti-flag.mx{
                                                                height:12px;
                                                                background-position:-3556px 0 
                                                            }
                                                            .iti-flag.my{
                                                                height:10px;
                                                                background-position:-3578px 0 
                                                            }
                                                            .iti-flag.mz{
                                                                height:14px;
                                                                background-position:-3600px 0 
                                                            }
                                                            .iti-flag.na{
                                                                height:14px;
                                                                background-position:-3622px 0 
                                                            }
                                                            .iti-flag.nc{
                                                                height:10px;
                                                                background-position:-3644px 0 
                                                            }
                                                            .iti-flag.ne{
                                                                width:18px;
                                                                height:15px;
                                                                background-position:-3666px 0 
                                                            }
                                                            .iti-flag.nf{
                                                                height:10px;
                                                                background-position:-3686px 0 
                                                            }
                                                            .iti-flag.ng{
                                                                height:10px;
                                                                background-position:-3708px 0 
                                                            }
                                                            .iti-flag.ni{
                                                                height:12px;
                                                                background-position:-3730px 0 
                                                            }
                                                            .iti-flag.nl{
                                                                height:14px;
                                                                background-position:-3752px 0 
                                                            }
                                                            .iti-flag.no{
                                                                height:15px;
                                                                background-position:-3774px 0 
                                                            }
                                                            .iti-flag.np{
                                                                width:13px;
                                                                height:15px;
                                                                background-position:-3796px 0 
                                                            }
                                                            .iti-flag.nr{
                                                                height:10px;
                                                                background-position:-3811px 0 
                                                            }
                                                            .iti-flag.nu{
                                                                height:10px;
                                                                background-position:-3833px 0 
                                                            }
                                                            .iti-flag.nz{
                                                                height:10px;
                                                                background-position:-3855px 0 
                                                            }
                                                            .iti-flag.om{
                                                                height:10px;
                                                                background-position:-3877px 0 
                                                            }
                                                            .iti-flag.pa{
                                                                height:14px;
                                                                background-position:-3899px 0 
                                                            }
                                                            .iti-flag.pe{
                                                                height:14px;
                                                                background-position:-3921px 0 
                                                            }
                                                            .iti-flag.pf{
                                                                height:14px;
                                                                background-position:-3943px 0 
                                                            }
                                                            .iti-flag.pg{
                                                                height:15px;
                                                                background-position:-3965px 0 
                                                            }
                                                            .iti-flag.ph{
                                                                height:10px;
                                                                background-position:-3987px 0 
                                                            }
                                                            .iti-flag.pk{
                                                                height:14px;
                                                                background-position:-4009px 0 
                                                            }
                                                            .iti-flag.pl{
                                                                height:13px;
                                                                background-position:-4031px 0 
                                                            }
                                                            .iti-flag.pm{
                                                                height:14px;
                                                                background-position:-4053px 0 
                                                            }
                                                            .iti-flag.pn{
                                                                height:10px;
                                                                background-position:-4075px 0 
                                                            }
                                                            .iti-flag.pr{
                                                                height:14px;
                                                                background-position:-4097px 0 
                                                            }
                                                            .iti-flag.ps{
                                                                height:10px;
                                                                background-position:-4119px 0 
                                                            }
                                                            .iti-flag.pt{
                                                                height:14px;
                                                                background-position:-4141px 0 
                                                            }
                                                            .iti-flag.pw{
                                                                height:13px;
                                                                background-position:-4163px 0 
                                                            }
                                                            .iti-flag.py{
                                                                height:11px;
                                                                background-position:-4185px 0 
                                                            }
                                                            .iti-flag.qa{
                                                                height:8px;
                                                                background-position:-4207px 0 
                                                            }
                                                            .iti-flag.re{
                                                                height:14px;
                                                                background-position:-4229px 0 
                                                            }
                                                            .iti-flag.ro{
                                                                height:14px;
                                                                background-position:-4251px 0 
                                                            }
                                                            .iti-flag.rs{
                                                                height:14px;
                                                                background-position:-4273px 0 
                                                            }
                                                            .iti-flag.ru{
                                                                height:14px;
                                                                background-position:-4295px 0 
                                                            }
                                                            .iti-flag.rw{
                                                                height:14px;
                                                                background-position:-4317px 0 
                                                            }
                                                            .iti-flag.sa{
                                                                height:14px;
                                                                background-position:-4339px 0 
                                                            }
                                                            .iti-flag.sb{
                                                                height:10px;
                                                                background-position:-4361px 0 
                                                            }
                                                            .iti-flag.sc{
                                                                height:10px;
                                                                background-position:-4383px 0 
                                                            }
                                                            .iti-flag.sd{
                                                                height:10px;
                                                                background-position:-4405px 0 
                                                            }
                                                            .iti-flag.se{
                                                                height:13px;
                                                                background-position:-4427px 0 
                                                            }
                                                            .iti-flag.sg{
                                                                height:14px;
                                                                background-position:-4449px 0 
                                                            }
                                                            .iti-flag.sh{
                                                                height:10px;
                                                                background-position:-4471px 0 
                                                            }
                                                            .iti-flag.si{
                                                                height:10px;
                                                                background-position:-4493px 0 
                                                            }
                                                            .iti-flag.sj{
                                                                height:15px;
                                                                background-position:-4515px 0 
                                                            }
                                                            .iti-flag.sk{
                                                                height:14px;
                                                                background-position:-4537px 0 
                                                            }
                                                            .iti-flag.sl{
                                                                height:14px;
                                                                background-position:-4559px 0 
                                                            }
                                                            .iti-flag.sm{
                                                                height:15px;
                                                                background-position:-4581px 0 
                                                            }
                                                            .iti-flag.sn{
                                                                height:14px;
                                                                background-position:-4603px 0 
                                                            }
                                                            .iti-flag.so{
                                                                height:14px;
                                                                background-position:-4625px 0 
                                                            }
                                                            .iti-flag.sr{
                                                                height:14px;
                                                                background-position:-4647px 0 
                                                            }
                                                            .iti-flag.ss{
                                                                height:10px;
                                                                background-position:-4669px 0 
                                                            }
                                                            .iti-flag.st{
                                                                height:10px;
                                                                background-position:-4691px 0 
                                                            }
                                                            .iti-flag.sv{
                                                                height:12px;
                                                                background-position:-4713px 0 
                                                            }
                                                            .iti-flag.sx{
                                                                height:14px;
                                                                background-position:-4735px 0 
                                                            }
                                                            .iti-flag.sy{
                                                                height:14px;
                                                                background-position:-4757px 0 
                                                            }
                                                            .iti-flag.sz{
                                                                height:14px;
                                                                background-position:-4779px 0 
                                                            }
                                                            .iti-flag.ta{
                                                                height:10px;
                                                                background-position:-4801px 0 
                                                            }
                                                            .iti-flag.tc{
                                                                height:10px;
                                                                background-position:-4823px 0 
                                                            }
                                                            .iti-flag.td{
                                                                height:14px;
                                                                background-position:-4845px 0 
                                                            }
                                                            .iti-flag.tf{
                                                                height:14px;
                                                                background-position:-4867px 0 
                                                            }
                                                            .iti-flag.tg{
                                                                height:13px;
                                                                background-position:-4889px 0 
                                                            }
                                                            .iti-flag.th{
                                                                height:14px;
                                                                background-position:-4911px 0 
                                                            }
                                                            .iti-flag.tj{
                                                                height:10px;
                                                                background-position:-4933px 0 
                                                            }
                                                            .iti-flag.tk{
                                                                height:10px;
                                                                background-position:-4955px 0 
                                                            }
                                                            .iti-flag.tl{
                                                                height:10px;
                                                                background-position:-4977px 0 
                                                            }
                                                            .iti-flag.tm{
                                                                height:14px;
                                                                background-position:-4999px 0 
                                                            }
                                                            .iti-flag.tn{
                                                                height:14px;
                                                                background-position:-5021px 0 
                                                            }
                                                            .iti-flag.to{
                                                                height:10px;
                                                                background-position:-5043px 0 
                                                            }
                                                            .iti-flag.tr{
                                                                height:14px;
                                                                background-position:-5065px 0 
                                                            }
                                                            .iti-flag.tt{
                                                                height:12px;
                                                                background-position:-5087px 0 
                                                            }
                                                            .iti-flag.tv{
                                                                height:10px;
                                                                background-position:-5109px 0 
                                                            }
                                                            .iti-flag.tw{
                                                                height:14px;
                                                                background-position:-5131px 0 
                                                            }
                                                            .iti-flag.tz{
                                                                height:14px;
                                                                background-position:-5153px 0 
                                                            }
                                                            .iti-flag.ua{
                                                                height:14px;
                                                                background-position:-5175px 0 
                                                            }
                                                            .iti-flag.ug{
                                                                height:14px;
                                                                background-position:-5197px 0 
                                                            }
                                                            .iti-flag.um{
                                                                height:11px;
                                                                background-position:-5219px 0 
                                                            }
                                                            .iti-flag.un{
                                                                height:14px;
                                                                background-position:-5241px 0 
                                                            }
                                                            .iti-flag.us{
                                                                height:11px;
                                                                background-position:-5263px 0 
                                                            }
                                                            .iti-flag.uy{
                                                                height:14px;
                                                                background-position:-5285px 0 
                                                            }
                                                            .iti-flag.uz{
                                                                height:10px;
                                                                background-position:-5307px 0 
                                                            }
                                                            .iti-flag.va{
                                                                width:15px;
                                                                height:15px;
                                                                background-position:-5329px 0 
                                                            }
                                                            .iti-flag.vc{
                                                                height:14px;
                                                                background-position:-5346px 0 
                                                            }
                                                            .iti-flag.ve{
                                                                height:14px;
                                                                background-position:-5368px 0 
                                                            }
                                                            .iti-flag.vg{
                                                                height:10px;
                                                                background-position:-5390px 0 
                                                            }
                                                            .iti-flag.vi{
                                                                height:14px;
                                                                background-position:-5412px 0 
                                                            }
                                                            .iti-flag.vn{
                                                                height:14px;
                                                                background-position:-5434px 0 
                                                            }
                                                            .iti-flag.vu{
                                                                height:12px;
                                                                background-position:-5456px 0 
                                                            }
                                                            .iti-flag.wf{
                                                                height:14px;
                                                                background-position:-5478px 0 
                                                            }
                                                            .iti-flag.ws{
                                                                height:10px;
                                                                background-position:-5500px 0 
                                                            }
                                                            .iti-flag.xk{
                                                                height:15px;
                                                                background-position:-5522px 0 
                                                            }
                                                            .iti-flag.ye{
                                                                height:14px;
                                                                background-position:-5544px 0 
                                                            }
                                                            .iti-flag.yt{
                                                                height:14px;
                                                                background-position:-5566px 0 
                                                            }
                                                            .iti-flag.za{
                                                                height:14px;
                                                                background-position:-5588px 0 
                                                            }
                                                            .iti-flag.zm{
                                                                height:14px;
                                                                background-position:-5610px 0 
                                                            }
                                                            .iti-flag.zw{
                                                                height:10px;
                                                                background-position:-5632px 0 
                                                            }
                                                            .iti-flag{
                                                                height:15px;
                                                                box-shadow:0 0 1px 0 #888;
                                                                background-image:url(https://productoption.hulkapps.com/images/flags.png);
                                                                background-repeat:no-repeat;
                                                                background-color:#DBDBDB;
                                                                background-position:20px 0 
                                                            }
                                                            @media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
                                                                .iti-flag{
                                                                    background-size:5652px 15px;
                                                                    background-image:url(https://productoption.hulkapps.com/images/flags@2x.png) 
                                                                }
                                                            }
                                                            .iti-flag.np{
                                                                background-color:transparent 
                                                            }
                                                            .cart-property .property_name{
                                                                font-weight:400;
                                                                padding-right:0;
                                                                min-width:auto;
                                                                width:auto 
                                                            }
                                                            .input_file+label{
                                                                cursor:pointer;
                                                                padding:3px 10px;
                                                                width:auto;
                                                                text-align:center;
                                                                margin:0;
                                                                background:#f4f8fb;
                                                                border:1px solid #dbe1e8 
                                                            }
                                                            #error-msg,.hulkapps_with_discount{
                                                                color:red 
                                                            }
                                                            .discount_error{
                                                                border-color:red 
                                                            }
                                                            .edit_form input,.edit_form select,.edit_form textarea{
                                                                min-height:44px!important 
                                                            }
                                                            .hulkapps_summary{
                                                                font-size:14px;
                                                                display:block;
                                                                color:red;
                                                            }
                                                            .hulkapps-summary-line-discount-code{
                                                                margin:10px 0;
                                                                display:block 
                                                            }
                                                            .actual_price{
                                                                text-decoration:line-through 
                                                            }
                                                            .hide{
                                                                display:none 
                                                            }
                                                            input.error{
                                                                border:1px solid #FF7C7C 
                                                            }
                                                            #valid-msg{
                                                                color:#00C900 
                                                            }
                                                            .edit_cart_option{
                                                                margin-top:10px!important;
                                                                display:none;
                                                                cursor: pointer;
                                                                border: 1px solid transparent;
                                                                border-radius: 2px;
                                                                color: #fff;
                                                                font-weight: 600;
                                                                text-transform: uppercase;
                                                                letter-spacing: 0.08em;
                                                                font-size: 14px;
                                                                padding: 8px 15px;
                                                            }
                                                            .hulkapps_discount_hide{
                                                                margin-top:10px;
                                                                display:flex!important;
                                                                align-items:center;
                                                                justify-content:flex-end 
                                                            }
                                                            .hulkapps_discount_code{
                                                                width:auto !important;
                                                                margin:0 12px 0 0 !important;
                                                            }
                                                            .discount_code_box{
                                                                display:none;
                                                                margin-bottom:10px;
                                                                text-align:right 
                                                            }
                                                            @media screen and (max-width:480px){
                                                                .hulkapps_discount_code{
                                                                    width:100% 
                                                                }
                                                                .hulkapps_option_name,.hulkapps_option_value{
                                                                    display:block!important 
                                                                }
                                                                .hulkapp_close,.hulkapp_save{
                                                                    margin-bottom:8px 
                                                                }
                                                            }
                                                            @media screen and (max-width:991px){
                                                                .hulkapps_option_name,.hulkapps_option_value{
                                                                    display:block!important;
                                                                    width:100%!important;
                                                                    max-width:100%!important 
                                                                }
                                                                .hulkapps_discount_button{
                                                                    height:40px 
                                                                }
                                                            }
                                                            body.body_fixed{
                                                                overflow:hidden;
                                                            }
                                                            select.hulkapps_dd{
                                                                padding-right:30px!important 
                                                            }
                                                            .cb_render .hulkapps_option_value label{
                                                                display:flex!important;
                                                                align-items:center 
                                                            }
                                                            .dd_multi_render select{
                                                                padding-right:5px!important;
                                                                min-height:80px!important 
                                                            }
                                                            .hulkapps-tooltip{
                                                                position:relative;
                                                                display:inline-block;
                                                                cursor:pointer;
                                                                vertical-align:middle 
                                                            }
                                                            .hulkapps-tooltip img{
                                                                display:block;
                                                            }
                                                            .hulkapps-tooltip .hulkapps-tooltip-inner{
                                                                position:absolute;
                                                                bottom:calc(100% + 5px);
                                                                background:#000;
                                                                left:-8px;
                                                                color:#fff;
                                                                box-shadow:0 6px 30px rgba(0,0,0,.08);
                                                                opacity:0;
                                                                visibility:hidden;
                                                                transition:all ease-in-out .5s;
                                                                border-radius:5px;
                                                                font-size:13px;
                                                                text-align:center;
                                                                z-index:999;
                                                                white-space:nowrap;
                                                                padding: 7px;
                                                            }
                                                            .hulkapps-tooltip:hover .hulkapps-tooltip-inner{
                                                                opacity:1;
                                                                visibility:visible 
                                                            }
                                                            .hulkapps-tooltip .hulkapps-tooltip-inner:after{
                                                                content:"";
                                                                position:absolute;
                                                                top:100%;
                                                                left:11px;
                                                                border-width:5px;
                                                                border-style:solid;
                                                                border-color:#000 transparent transparent transparent;
                                                            }
                                                            .hulkapps-tooltip.bottom .hulkapps-tooltip-inner{
                                                                bottom:auto;
                                                                top:calc(100% + 5px);
                                                                padding:0 
                                                            }
                                                            .hulkapps-tooltip.bottom .hulkapps-tooltip-inner:after{
                                                                bottom:100%;
                                                                top:auto;
                                                                border-color:transparent transparent #000 
                                                            }
                                                            .hulkapps-tooltip .hulkapps-tooltip-inner.swatch-tooltip{
                                                                left: 1px;
                                                            }
                                                            .hulkapps-tooltip .hulkapps-tooltip-inner.swatch-tooltip p{
                                                                margin:0 0 5px;
                                                                color:#fff;
                                                                white-space:normal;
                                                            }
                                                            .hulkapps-tooltip .hulkapps-tooltip-inner.swatch-tooltip img{
                                                                max-width:100% 
                                                            }
                                                            .hulkapps-tooltip .hulkapps-tooltip-inner.swatch-tooltip img.circle{
                                                                border-radius:50% 
                                                            }
                                                            .hulkapp_save,button.hulkapp_close,
                                                            .hulkapps_discount_button{
                                                                cursor: pointer;
                                                                border-radius: 2px;
                                                                font-weight: 600;
                                                                text-transform: none;
                                                                letter-spacing: 0.08em;
                                                                font-size: 14px;
                                                                padding: 8px 15px;
                                                            }
                                                            .hulkapps-cart-original-total{
                                                                display:block;
                                                            }
                                                            .discount-tag{
                                                                background: #ebebeb;
                                                                padding: 5px 10px;
                                                                border-radius: 5px;
                                                                display: inline-block;
                                                                margin-right: 30px;
                                                            }
                                                            .discount-tag .close-tag{
                                                                position: relative;
                                                                width:15px;
                                                                height:15px;
                                                                display:inline-block;
                                                                margin-left:5px;
                                                                vertical-align:middle;
                                                                cursor:pointer;
                                                            }
                                                            .discount-tag .close-tag:after, 
                                                            .discount-tag .close-tag:before{
                                                                content:'';
                                                                position:absolute;
                                                                top:50%;
                                                                left:50%;
                                                                transform:translate(-50%, -50%) rotate(45deg);
                                                                width:2px;
                                                                height:10px;
                                                                background-color:#3d3d3d;
                                                            }
                                                            .discount-tag .close-tag:before{
                                                                width:10px;
                                                                height:2px;
                                                            }
                                                            .after_discount_price{
                                                                font-weight: bold;
                                                            }
                                                            .final-total{
                                                                font-weight: normal;
                                                                margin-right: 30px;
                                                            }
                                                            @media screen and (max-width:991px){
                                                                body.body_fixed{
                                                                    position:fixed;
                                                                    top:0;
                                                                    right:0;
                                                                    left:0;
                                                                    bottom:0
                                                                }
                                                            }
                                                            @media only screen and (max-width: 749px){
                                                                .hulkapps_swatch_option{
                                                                    margin-bottom: 10px !important;
                                                                }
                                                            }
                                                            @media (max-width: 767px){
                                                                #hulkapp_popupOverlay {
                                                                    padding-top: 10px !important;
                                                                }
                                                                .hulkapps_discount_code {
                                                                    width: 100% !important;
                                                                }
                                                            }
                                                            .hulkapps-volumes{
                                                                display:block;
                                                                width:100%;
                                                            }
                                                        </style>
                                
                                                        <script>
                                                            {% assign hulkapps_page_type = "" %}
                                                            window.hulkapps = {
                                                                shop_slug: "{{shop.permanent_domain | remove: '.myshopify.com' }}",
                                                                store_id: "{{shop.permanent_domain}}",
                                                                money_format: "{{shop.money_format | replace: '"', "'"}}",
                                                                cart: null,
                                                                product: null,
                                                                product_collections: null,
                                                                product_variants: null,
                                                                is_volume_discount: null,
                                                                product_id: null,
                                                                page_type: null,
                                                                po_url: "https://productoption.hulkapps.com",
                                                                vd_url: "https://volumediscount.hulkapps.com",
                                                                customer: null
                                                            }
                                                            {% if customer %}
                                                                {% assign tags = "" %}
                                                                {% for tag in customer.tags %}
                                                                    {% if forloop.index == 1 %}
                                                                        {% assign tags = tags | append : tag %}
                                                                    {% else %}
                                                                        {% assign tags = tags | append : ","| append : tag %}
                                                                    {% endif %}
                                                                {% endfor %}                                
                                                                window.hulkapps.customer = {
                                                                    id: {{customer.id}},
                                                                    tags: "{{tags}}"
                                                                }
                                                            {% endif %}
                                                            {% if template contains "cart" %}
                                                                window.hulkapps.page_type = "cart";
                                                                window.hulkapps.cart = {{ cart | json }}
                                                                if (typeof window.hulkapps.cart.items == "object") {
                                                                    for (var i=0; i<window.hulkapps.cart.items.length; i++) {
                                                                        ["sku", "grams", "vendor", "url", "image", "handle", "requires_shipping", "product_type", "product_description"].map(function(a) {
                                                                            delete window.hulkapps.cart.items[i][a]
                                                                        })
                                                                    }
                                                                }
                                                                window.hulkapps.cart_collections = {}
                                                                {% for item in cart.items %}
                                                                    window.hulkapps.cart_collections["{{item.variant_id}}"] = []
                                                                    {% for c in item.product.collections %}
                                                                        window.hulkapps.cart_collections["{{item.variant_id}}"].push({{c.id}})
                                                                    {% endfor %}
                                                                {% endfor %}
                                                            {% endif %}
                                
                                                            {% if template contains "product" %}
                                                                window.hulkapps.page_type = "product"
                                                                window.hulkapps.product_id = "{{ product.id }}";
                                                                window.hulkapps.product = {{ product | json }} 
                                                                window.hulkapps.product_collection = []
                                                                {% for collection in product.collections %}
                                                                    window.hulkapps.product_collection.push({{collection.id}})
                                                                {% endfor %}            
                                                                window.hulkapps.product_variant = []
                                                                {% for variant in product.variants %}
                                                                    window.hulkapps.product_variant.push({{variant.id}})
                                                                {% endfor %}
                                                                window.hulkapps.product_collections = window.hulkapps.product_collection.toString();
                                                                window.hulkapps.product_variants = window.hulkapps.product_variant.toString();    
                                                            {% endif %}
                                                        </script>
                                                        
                                                        {% if template contains "cart" %}
                                                            <div class="edit_popup" style="display: none;">
                                                                <form method="post" action="/cart/add" id="edit_cart_popup" class="edit_form" enctype="multipart/form-data">
                                                                </form>
                                                            </div>
                                                        {% endif %}                    
                                                    
    • Select Save

Please find instructions below on how to individually include a few snippets at the following files:

Theme Layout

  • Under “Layout” select theme.liquid

    Install Instructions
  • Look for this code: {% include 'hulkcode_common' %}{% if template contains 'product' or template contains 'cart' %}<script src='https://ha-product-option.nyc3.digitaloceanspaces.com/assets/api/v2/hulkcode.js' defer='defer'></script>{% endif %}

    Install Instructions
  • If not, then include this code {% include 'hulkcode_common' %}{% if template contains 'product' or template contains 'cart' %}<script src='https://ha-product-option.nyc3.digitaloceanspaces.com/assets/api/v2/hulkcode.js' defer='defer'></script>{% endif %} manually at the theme.liquid file before the </head> tag.

  • Select Save

This snippet is placed for displaying the options on the Product Page of your Shopify store.

Please find instructions below on how to add a div code in your product.liquid or product-template.liquid or product-form.liquid:

In Theme Template

  • Under “Template” select product.liquid

    Install Instructions
  • Search for </form> and place the following code above this:
    <div id="hulkapps_custom_options_{{ product.id }}"> </div>

    Install Instructions
  • Select Save

Please find instructions below on how to individually replace existing snippets with HulkApps unique snippets cart template.

Skip this step if all required snippets are present at your published theme

  • Under “Templates” select cart.liquid template

    Note:
    If your template contains sections, you will need to select the cart-template.liquid section instead.
    Install Instructions
  • Item Price Code

    Replace {{ item.price | money }} with the below code:

                                          
                                  <span class="hulkapps-cart-item-price" data-key="{{item.key}}">
                                            {{ item.price | money }}
                                  </span>
                            
    Install Instructions Install Instructions
  • Item Line Price Code

    Replace {{ item.line_price | money }} with the below code:

                                          
                                  <span class="hulkapps-cart-item-line-price" data-key="{{item.key}}">
                                        {{ item.line_price | money }}
                                  </span>
                            
    Install Instructions Install Instructions
  • Cart Total Price Code

    Replace {{ cart.total_price | money }} with the below code:

                                              
                                    <span class="hulkapps-cart-original-total" data-key="{{item.key}}">
                                          {{ cart.total_price | money }}
                                    </span>
                            
    Install Instructions Install Instructions
  • Select Save

  • Under the Templates folder select cart.liquid template.

    Note:
    If your template contains sections, you will need to select the cart-template.liquid section instead.
  • Find the properties code

    Install Instructions
  • Replace the entire highlighted code with the below code:

    Note:
    This is usually placed below the product title.
                                      {% 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>
                                                                  {% else %}
                                                                      <span class="property_value" >{{p.last}}</span>
                                                                  {% endif %}
                                                              </div>
                                                          {% 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>
                                                          
  • Select Save

  • Congratulations!

    You have successfully installed app and placed the snippets into your Shopify theme.

  • Need Installation Assistance?

    To facilitate a faster response, request Installation Support

    A staff account invite may be sent to help@hulk-support.com

    Shopify Online Store 2.0 theme doesn’t require any code placement. The Options can easily be enabled right from the theme customization in the Shopify Dawn theme.

    Check out the steps below to understand how Shopify Online Store 2.0 theme works with the app :

    1. Navigate to the Online Store section of your Shopify store and under the Themes page look for your preferred Shopify 2.0 theme that is compatible and click on the Customize button.

    Theme Integration

    2.On the Theme Customization page, click on the Theme Settings on the bottom left corner. This enables you to customize the new Shopify Dawn theme.

    Theme Integration

    3. Click on the App embeds tab on the right side of the page under Theme settings block and enable the Add Custom Options option and Save the settings.

    Theme Integration

    4. After following the above step, user should be able to view the Options on the product page for which they have created and assigned the options.

    Theme Integration

    5. Navigate to the Apps section of your Shopify store and open the Infinite Product Options app. Select the Installation option from the Installation dropdown menu on the top and then click on the Start Now button in the Automatic Installation block.

    Theme Integration

    6. Select the theme to which the Infinite Product Options apps' snippet is to be injected by clicking on the Install button.

    Theme Integration
    Note:
    Step mentioned above is necessary for installing pricing snippets in cart page that sums up the additional charges assigned to Options created from Infinite Product Options app.

    (Optional) 7.A. Navigate back to the Theme Customization of your Online Store 2.0 theme and select the Cart option from the dropdown option available on the top.

    Theme Integration

    (Optional) 7.B. Click on the Add block option available in the Subtotal menu and select the Show Discount on Cart option. And click on the Save button on the top right corner.

    Theme Integration
    Note:
    This step mentioned above is for enabling the Discount Code box in the cart page of your Shopify store.

  • Congratulations!

    You have successfully installed app and placed the snippets into your Shopify Online Store 2.0 theme.

  • Need Installation Assistance?

    To facilitate a faster response, request Installation Support

    A staff account invite may be sent to help@hulk-support.com