Shopify Online Store 1.0 Shopify Online Store 2.0NOTE: These integration guidelines are limited to Shopify Online Store 1.0 onlyLike 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.2. Select the theme to integrate with the Infinite Product Options app and inject the snippets by clicking on the Install button.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.Verify or Create New SnippetsManually Create SnippetsFrom “Shopify Admin”, select Online Store and click ThemesSelect ActionsSelect Edit codeAdd liquid snippetsSkip this step if all required snippets are present at your published themeUnder “Snippets” select Add a new snippetEnter file name as hulkcode_common.liquidCopy the code from below and place it in the hulkcode_common.liquid file created on the above step and save the file.copy code <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 SaveIncluding hulkcode_common snippet in theme.liquid templatePlease find instructions below on how to individually include a few snippets at the following files:Theme LayoutUnder “Layout” select theme.liquidLook 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 %} If you don't find the code then, paste 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 SaveView Example Including Options snippet in Product Page liquid fileThis 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 TemplateUnder “Template” select product.liquidPlace the following code in in the product-form: <div id= hulkapps_custom_options_{{ product.id }} > </div> Select SaveReplace Existing SnippetsPlease 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 themeUnder “Templates” select cart.liquid templateNote:If your template contains sections, you will need to select the cart-template.liquid section instead.Item Price CodeReplace {{ item.price | money }} with the below code:copy code <span class= hulkapps-cart-item-price data-key= {{item.key}} > {{ item.price | money }} </span> Item Line Price CodeReplace {{ item.line_price | money }} with the below code:copy code <span class= hulkapps-cart-item-line-price data-key= {{item.key}} > {{ item.line_price | money }} </span> Cart Total Price CodeReplace {{ cart.total_price | money }} with the below code:copy code <span class= hulkapps-cart-original-total data-key= {{item.key}} > {{ cart.total_price | money }} </span> Select SaveUpdate Cart PropertiesUnder 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 codeReplace the entire highlighted code with the below code:Note:This is usually placed below the product title.copy code {% 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 SaveCongratulations!You have successfully installed app and placed the snippets into your Shopify theme.Need Installation Assistance?To facilitate a faster response, request Installation SupportA staff account invite may be sent to help@hulk-support.comShopify 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.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.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.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.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.6. Select the theme to which the Infinite Product Options apps' snippet is to be injected by clicking on the Install button.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.(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.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 SupportA staff account invite may be sent to help@hulk-support.com