1. Duplicate Theme:

    Duplicate live theme to create a backup copy since few snippets will automatically get created and added at your published theme during the installation process.


  2. Rename Theme:

    Rename your duplicate theme - This will help our experts locate your theme easily if it requires any further tweaking.

    Rename theme as [Theme Name] - Hulk

  3. Publish duplicate theme

      1. From “Shopify Admin”, select Apps
      2. Select Visit Shopify App Store
      3. Enter Product Options by HulkApps in the “Search Bar” or Click here to view app page
      4. Select Product Options
      5. Select Add app
      6. Select Install app

        Your Shopify theme has now been updated with our app’s unique code and you need to wait while all your products get completely synced with our app.

After this, users need to proceed with app installaton in store theme. User can install the app via "Automatic Installation". In any case if the automated process doesn't work, user can proceed with "Manual Installation" steps or can contact the support team for the same. Installation Support

  1. Welcome to the Product Options app Dashboard
  2. Under Help, select Installation
  3. Under Installation, click on "Start Automatic Install"
  4. From the dropdown select the theme in which you want to install the app, click on Install
  5. Once the installation procees is completed, a message will be displayed indicating that installation has been completed.
  1. Manually Create Snippets
    • From “Shopify Admin”, select Online Store and click Themes

    • Select Actions

    • Select Edit code

    1. Add liquid snippets

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

      • Under “Snippets” select Add a new snippet

      • Enter file name as hulkcode_common.liquid

      • <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; }} </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,
        is_volume_discount: null,
        product_id: null,
        page_type: null,
        po_url: "https://productoption.hulkapps.com",
        vd_url: "https://volumediscount.hulkapps.com"
        }

        {% 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["v{{item.variant_id}}"] = []
        {% for c in item.product.collections %}
        window.hulkapps.cart_collections["v{{item.variant_id}}"].push({{c.id}})
        {% endfor %}
        {% endfor %}
        {% endif %}

        {% if template contains "product" %}
        window.hulkapps.page_type = "product"
        window.hulkapps.product_id = "{{ product.id }}";
        {% 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

Including the hulkcode common file in theme.liquid
  1. Please find instructions below on how to individually include a few snippets at the following files:
    1. Theme Layout
      • Under “Layout” select theme.liquid

      • Look for this code: {% include 'hulkcode_common' %}

      • If not, then include this code {% include 'hulkcode_common' %} manually at the theme.liquid file before ending the </body>tag.

      • Select Save

Including the hulkcode common file in theme.liquid
  1. Please find instructions below on how to individually replace existing snippets with HulkApps unique snippets at the following files:

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

    1. Cart Template
      • Under “Templates” select cart.liquid

        Note:
        If your template contains sections, you will need to select the cart-template.liquid section instead.
      • 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>
                                                                    
      • 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>
                                                                 
      • 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>
                                                                 
      • Select Save

  1. Cart Template
    • Under “Templates” select cart.liquid

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

    • 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>
      <br/>
      {% else %}
      <span class="property_value" >{{ p.last }}</span><br/>
      {% 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 updated your codes to the live theme.

      Need Installation Assistance?

      To facilitate a faster response, request Installation Support

      A staff account invite may be sent to support@hulkcode.com