Icon theme dropdown selection fix

Last Updated: Mar 02, 2018 07:58PM EST

To remedy an issue with select dropdowns following IOS and Android updates in your store admin click on Themes > Customize theme > Theme options > Edit HTML / CSS

Step 1

From you Shopify admin go to Online Store > Themes > next to the theme you want to edit click Actions > Edit Code.

Step 2‚Äč

On the left sidebar you will see a list of theme folders scroll down and select Assets > theme.js.liquid. Around line 5 of the file find and delete the following code:

$("#sort-by").selecter();

Click save when done.

Step 3

On the left sidebar you will see a list of theme folders scroll down and select Assets > stylesheet.css.liquid scroll to the bottom of the page and paste in the following code snippet:

.styled-select {  border: 1px solid #d5d5d5;  border-radius: 1px;  -webkit-appearance: none;  -moz-appearance: none;  padding-left: 8px;  font-size: 13px;  height: 38px;  line-height: 36px;  background: url({{ 'select-arrow.png' | asset_url }}) no-repeat right #fff;}    .single-option-selector {  border: 1px solid #d5d5d5;  border-radius: 1px;  -webkit-appearance: none;  -moz-appearance: none;  padding-left: 8px;  font-size: 13px;  height: 38px;  line-height: 36px;  background: url({{ 'select-arrow.png' | asset_url }}) no-repeat right #fff;}

Click save when done.

Step 4

Right-click on this link and select "save target as" or "save link as" depending on the OS you are using. This will save an image to your desktop named: select-arrow.png.

Step 5

In the Assets folder click on Add a new asset upload the image you have just saved and click replace existing if prompted.

Step 6

On the left sidebar, you will see a list of theme folders scroll down and select Snippets > short-form.liquid, scroll to the bottom of the file within the last few lines delete this single line of code:

$(".single-option-selector").selecter();

Do not delete any additional code other than this. Click save when done and test your store to ensure that your select dropdowns are visible.

LOGGING YOUR CHANGES

We strongly suggest you keep track of any code changes made by you or other developers to your theme's code files. This will make upgrading to newer versions of the Icon theme in the future much easier and quicker. An easy way to keep track of these changes is by keeping a simple Google Doc with details on all code changes. Here is a great example:



Get help

Want to customize your theme?
Have questions not covered in our docs?
  • Ask a theme support question
  • Support Hours:
    9:30 - 17:30 EST
    Monday - Friday

retail@undergroundmedia.co.uk
http://assets3.desk.com/
false
undergrndmedia
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete