Multi-Country Banner

outline the refundid multi country banner offers an interactive module that helps to split up your returns policy based on the country the customer is returning from by pasting the below code into a shopify page, customers will be able to select which country they're returning from, and based on the selection, various returns options and instructions will be displayed based on what is offered within your store steps open your shopify dashboard and locate the 'pages' tab locate your returns page (i e the page where you will be adding the refundid accordion) click the <> button in the top right corner of the content editor locate in the code where you would like the accordion to appear the accordion will be where you walk your customers through how to make a return look for the location where your how to return title sits paste the below html code in the part of the code where you would like the accordion to appear australia new zealand other country instant refund enter details below to get started start return exchange exchange html goes here store credit store credit html goes here standard refund standard refund html goes here standard refund standard refund for nz html goes here please note that the above code already has three options available in the dropdown australia, new zealand & other scroll further down to understand how to edit the code to match your returns policy ensure in the html you replace \[shopify store name] with the myshopify com domain of your store this can be found on your shopify dashboard please make sure there's no https //www at the beginning or anything after the com at the end an example would be teststore myshopify com click 'save' locate the portal on your site and ensure it looks identical to the image below (fonts and colours within the portal will match those used throughout your website) if you have any trouble, contact your account manager adding in and removing countries & return options adding additional countries to the dropdown at the top of the html, there is a class titled "refundid country select" here is where country options from the dropdown can be added & removed please see below to note what this section looks like australia new zealand other country by adding additional \<option> tags as seen on line 4, more countries can be added the order it is added in will be the order it is displayed to the customer when they click on the dropdown module below is an example of what the code would look like if the us was added australia new zealand us other country as seen above, the us was added in as another option on line 6 the customer would now have the option to select the us when choosing where they were returning from this however won't reveal any options until you've edited the id of a return option to be visible when us is selected please view the section below titled setting the country of a return option to see how this is done adding/removing a return option the below code is used to add another return option standard refund standard refund for nz html goes here when additional return options are added, the order doesn't matter, it is the id that defines when it appears and which country will make it visible you can add in as many return options as you'd like when building out this module this module can be customised completely to match your policy altering the content of a return option when a new return option is added in, it is important that the content is updated to ensure it matches any information you'd like to convey the return option extract has been pasted below for reference standard refund standard refund for nz html goes here as visible in the return option extract, the \<span> tags on line 5 display the name of the return option this can be changed to whatever best fits your policy examples include exchange (for exchanges) store credit (for store credits) standard refund, exchange & store credit (when the return instructions for all three options are the same) in store (when there are particular return instructions for in store returns) as visible on line 9, this is where the instructions/content is pasted all content needs to be pasted within the refundid accordion class to ensure it is visible when the accordion is expanded the text that is pasted within the div tag can either be plain text or html below is an example of an exchange return option with customised content exchange to lodge an exchange, please contact our customer service team at help\@teststore com with your order number, the item you'd like to exchange and the reason for exchange setting the country of a return option within the above module, each return option is identified by its id this id is used to identify the return type & the country it fits in it's vital that this id is worded correctly as it is used to identify what is displayed when a particular country is chosen within the module, it is important that the id is structured in the below format id=" \[return type] \[country] " \[country] should be the name of the country worded exactly the same as in the dropdown all in lowercase in the instance that a country is two or more words (i e new zealand), the words need to be new zealand it's important that if you have abbreviated a country (i e us), you'll need to write it exactly the same within the id to ensure it's recognised standard refund standard refund for nz html goes here the banner is no longer opening, what do i do? sometimes, certain code editors will minnify the javascript code causing it to no longer work the way it is meant to this will often result in the accordion not opening in the way it should if this occurs, follow the below steps to get it working again open your returns page and click the html button in the top right hand corner of the text editor copy the below code, scroll to the bottom of the code editor, and paste it in as the last thing on the page \<script> const returnoptions = document getelementsbyclassname( "refundid accordion item" ); const country = document getelementsbyclassname("refundid country select")\[0] queryselector("select"); const splitbycountry = () => { const currentcountry = country value tolowercase() replaceall(" ", " "); const activereturnoptions = \[ returnoptions] filter((returnoption) => returnoption id includes(currentcountry) ); const inactivereturnoptions = \[ returnoptions] filter( (returnoption) => !returnoption id includes(currentcountry) ); return \[activereturnoptions, inactivereturnoptions]; }; const initcountry = () => { const \[activereturnoptions, inactivereturnoptions] = splitbycountry(); activereturnoptions foreach((x) => (x style display = "block")); inactivereturnoptions foreach((x) => (x style display = "none")); const radiobutton = activereturnoptions\[0] queryselector("input"); radiobutton checked = true; activereturnoptions\[0] queryselector(" refundid accordion") classlist add("refundid activated"); }; window\ onload = () => { initcountry(); }; country addeventlistener("change", () => { initcountry(); }); \[ returnoptions] foreach((returnoption, i) => { returnoption queryselector("input") addeventlistener("click", () => { \[ returnoptions] foreach((a, j) => { if (i !== j) { a queryselector(" refundid accordion") classlist remove( "refundid activated" ); } }); returnoption queryselector(" refundid accordion") classlist toggle("refundid activated"); }); }); \</script> click the html button again and save the right hand this should then fix this!