Shopify Online Store 1.0 Shopify Online Store 2.0 NOTE: These integration guidelines are limited to Shopify Online Store 1.0 onlyLike most of the Shopify apps, we also offer automatic theme integration. It works for almost all the themes available in Shopify.Please ensure to integrate the theme with your store's duplicate/staging theme to avoid conflicts.Follow the steps for theme integration:1. Open the VolumeBoost App from your Shopify app store 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 VolumeBoost app and inject the snippets by clicking on the Install button.After a successful Theme Integration, if the Discount Table is not visible on the Cart page then a user need to follow some necessary steps to add the snippets manually in the theme files for displaying the Discount Table on their Shopify storefront.Follow the steps to inject the snippets manually into the Shopify store 1.0 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 below and place it in the hulkcode_common.liquid file created during the above step and save it.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 templateCheck how to individually include a few snippets in 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-volume-discount.nyc3.digitaloceanspaces.com/assets/api/v2/hulkcode.js' defer='defer'></script>{% endif %} If not, then include this code {% include 'hulkcode_common' %}{% if template contains 'product' or template contains 'cart' %}<script src='https://ha-volume-discount.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 Discount Table snippet in Product Page liquid fileThis snippet is placed for displaying the discount table 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.liquid OR product-template.liquidSearch for </form> and place this following code below it: <div class= hulkapps-volumes ></div>Select SaveReplace Existing SnippetsFind instructions below on how to individually replace existing snippets with HulkApps unique snippets cart template.Skip this step if all required snippets are present in the 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 SaveNeed 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.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 Volume Discount option and Save the settings.4. After following the above step, you should be able to view the Discount Table on the product page for which they have created and assigned the offer.5. Navigate to the Apps section of your Shopify store and open the VolumeBoost 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 the VolumeBoost apps' snippets is to be injected and, click 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 VolumeBoost 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