AB Ideas Marketing Technology

Increase the size of UI elements

Increasing the size of important UI elements on your website can help draw attention to them. This is useful for call-to-actions and other important visual cues. Experimenting with visual hierarchy is a great idea for an A/B test. SplitWit makes it easy to quickly apply these kind of changes to your ecommerce website. Below explains a few of your options:

Font size

Increasing the font-size of your headlines is just a few clicks away with SplitWit. Select the text that you want to emphasize, scroll down to the font-size property, input a higher pixel value, and hit save.

Width and height

Adjusting the width and height of buttons or images can help them stand out. Click on the user interface element in visual editor to reveal a list of style properties. You can update the item’s size using pixels, percentages, or any other valid CSS measurement unit.

Edit the size of a button using the visual editor


Adding padding to an element generates space around its content within its border. This a good option for buttons, text widgets, and other self-contained UI items. You can find the padding property in the list of style properties displayed when using the visual editor

AB Ideas Marketing Technology

How to change the color of a button

A great idea for an A/B test is to experiment with the color of your call-to-action buttons. The right colors can generate positive emotions from your visitors and push them to take action.

SplitWit lets you change the color of buttons on your website and Shopify store. Start by clicking “Make changes” from your experiment dashboard

Shopify experiment dashboard

Next, click on the button that you want to edit in the visual editor panel. You’ll see a list of properties for the element you selected. Scroll down to “background”. Here you can type the name of a color or enter an HTML hexadecimal color code (eg. #f3f3f3).

Visual editor properties list for a selected element

If you click “view options” you’ll see a list of possible color values that you can choose from. Once you decide on a color, be sure to save and preview your changes.

How to choose the right color

When choosing a button color for your experiment, start with a hypothesis about why the change might increase conversions.

Often times a powerful red can evoke a response of urgency, and stimulate users to click by grabbing their attention.

Green or blue communicates feelings of security that may give visitors confidence in your call-to-action.

Generally, when experimenting with color, try to follow basic color theory principles. Colors on opposite sides of a spectrum tend to be visually pleasing. Following a color scheme can give you ideas about what options are best.


Best ideas for split test experiments

Are you looking to increase sales on your website? Trying to get more people to sign up? Experimenting with parts of your website can help you learn what works best. Below is a list of the best things you can try.

1. Button color

Colors can have profound psychological effects. Try changing the background-color of important buttons on your website to see if that leads to an increase in conversion rate.

Change the text of your buttons
SplitWit makes changing the color of a button easy.

2. Size of call-to-action

Bigger CTAs can be more eye-catching and will command a user’s attention. You can increase the size of a button by increasing its padding.

Increase the size of a CTA by using CSS
Add custom CSS to experiment with your website.

3. Headline text

A strong headline can push visitors to take immediate action. Telling users to act now, and using active language are effective marketing techniques. Consider the following:

Meal Plan Packages

– versus –

Signup for weekly meal plans now!

4. Button text

Buttons are an important user interface element. They call users to take important actions, like signing up or making a purchase. The words you use have a considerable impact. By experimenting with word choice, you can learn what work best for your website and user-base. SplitWit makes it easy to do this.

Experiment with button text.

5. Imagery

Pictures, icons, and other visual cues help customers have an emotional connection to your brand or product. Use SplitWit to easily add images to an experimental variation of your website.

Insert an image using SplitWit
Add images or other elements using the visual editor.

SplitWit can help you make these experimental changes, and measure how well they perform. By continually running A/B tests on your website, you’ll keep learning and improving how to make your business grow better.


Explainer Video

Watch the SplitWit explainer video, and subscribe to our YouTube page.