Ion Features to Help You Build Faster

If you’re reading this, odds are I have probably helped you with something you were working on in our platform. I’ve been working here at ion for over seven years, helping ion customers figure out how to do something specific in the platform or fix something that isn’t quite right. While not every question has a quick answer, I usually can solve most problems reasonably quickly. And if there is one thing I often hear afterwards it's, "how were you able to figure that out so quickly?"

One key advantage that I can’t deny here is my experience with the platform. With seven years under my belt, I have spent a great deal of time working in our platform, learning the in's and outs and tricks to help me solve problems and create faster.

The more time you put into building in the ion platform and going through our training videos, the more proficient you will become. We have done our best to keep all of our training videos under an hour and also broken them into segments so that it is easier to allocate time to go through them. But I get it - you’re busy, you have work to do, your time is valuable, and you only have so much time to spend learning a new platform. I can assure you that if you take the time to go through training videos, dedicate time to practice building, and ask us questions along the way, you’ll become an expert before you know it and it will save you a ton of time in the long run.

Aside from our training videos, there are plenty of tools and shortcuts available in ion to help you find what you’re looking for relatively quickly. In this article, I’ll walk you through some of the tools that can help you find what you’re looking for when working on an ion page.

Keyboard Arrows

One thing I can’t really live without at this point are the direction arrows on my keyboard. You can use the up, down, left and right arrows on your keyboard to move through the various elements in your ion page.

More often than not, when troubleshooting for an ion user, I end up moving through elements using my keyboard instead of trying to click things. You can use the up and down arrows to move up and down through the hierarchy of an element. So if you select a button and hit the up arrow on your keyboard, it will select the column housing that button. If you hit the up arrow again, it will select the row housing that column, etc.

The left and right arrows can be used to go through every element in the area. So instead of going through the hierarchy, the next element in the area will be selected.

The arrows on your keyboard are an invaluable resource to troubleshoot something on your page. Let’s say there’s some extra space around an element, but you’re not sure where it’s coming from, you can select an element inside of the area where you see the extra padding and then hit the up arrow on your keyboard until you see a micro-theme or styling applied that adds padding. You would then be able to remove that micro-theme/styling to remove the extra space.

Ink Droplet

Something that ties in with the ability to use arrows to cycle through elements is the purple ink droplet that appears in the style area of your creative studio when a custom (i.e. non-micro-theme) style is applied to an element.

So when you’re using your keyboard to cycle through elements and are looking for styling that’s applied to something, you‘ll want to look at your creative studio after selecting each element to see if there’s custom styling applied to that element (if not a micro-theme).



Another tool that is often overlooked is the search feature available while editing. I can’t tell you how many times someone has hidden something that they can’t find. Hidden elements (and plenty of others that are visible) can be found quickly using the search feature.

While editing a page, you can hit the / key on your keyboard to open a search box. You can do simple searches for text on the page in here, but you can also search for things that aren’t quite as obvious. Not sure what to search for in creative studio? With the search box open, you can type in :help for some common search queries and terms used in the search.

For example, you can type :hidden into the search box to see a list of all elements that have are set to show/hide in different viewports or based on the presence of data. So if you accidentally made something hide in every viewport, you can find it in the :hidden list and jump to the element to either make sure it shows in one of your viewports or delete it altogether if you don’t need it.



You can also label elements to give them more specific names than the ones that are assigned by default. I know that this could feel a bit tedious to rename every element, but it can be beneficial for larger pages that have a lot going on in them - especially when there are a lot of elements set to show and hide.

Whenever you have something selected, you can click the pencil icon next to the label at the top of your creative studio. Once you click the pencil, it will open a text box that you can use to enter something more specific.

If you have a bunch of containers set to show/hide in different viewports, you might want to add something to the label that specifies what viewport it is meant to be seen in, such as Container XS, Container SM, etc. 

When you try to edit the page at a later date, it will be a lot easier to find the containers that you want to edit in each viewport because they will have clear labels assigned to them. You can then search for those labels using the search feature and look for them in your creative studio’s List tab.