Motive, Shop Search plugin

When connecting your shop to Motive Commerce Search, your search seamlessly and automatically matches the style of your shop. And while it’s always been possible to adapt a number of aspects of your results page like font, colours, product cards, etc, we want to give you the ability to customise even more.

At Motive, we pride ourselves on offering shoppers and shop owners alike the best eCommerce experience they can have, which includes offering versatility so you can make your own changes to reflect your branding.

With this in mind, we’ve introduced the ability to change the CSS of your shop’s search manually to make the changes you want to make.

Getting started with custom CSS in Motive Commerce Search

If you plan on using this feature, you’ll probably need to have some CSS knowledge, or know someone who does, but if you’re curious and want to give it a shot, you’ll find some ideas below on how you can take advantage of custom CSS capabilities with some easy configurations.

This feature is incredibly useful if you’re using Motive Commerce Search through a partner, as they’ll be happy to help you implement these changes and are well aware of the possibilities they offer.

You can find the custom CSS box in the Search Layer’s Visual Customisation section of your Motive Playboard, under the Advanced Settings.

Changing the size of the price

One of the easiest customisations you can make is to change the size of the price of products. In order to match the style of your shop when shoppers navigate, you may want to make the price bigger or smaller.

You can inspect your shop’s search results to see how the font size of the price has been set and change it in the Custom CSS section using something like:

#motive-x .x-mot-result-price {
    font-size: 22px;
    font-size: 22px;
}

You can change the font-size to whatever suits you and see how it looks in real time once you save the changes.

Changing the add-to-cart colour

You can also change the colour of the add-to-cart button by adding custom CSS - in case you want something other than the default colour. To do so, you can include something like:

#motive-x .x-mot-result-cta__action{
    background-color: #fabada;
    background-color: #fabada;
}

Make sure to change the colour to the colour you like by specifying its HEX code.

Hiding popular products

While popular products can be incredibly powerful, you may still want to hide them from your search. You cannot do this automatically in the Playboard, but you can by using the Custom CSS feature.

To do so, introduce the following CSS sample:

#motive-x .x-mot-recommendations {
    display: none;
}

Making your logo bigger

Another use for custom CSS is changing the size of your logo if you want to give it less or more importance. You can change the size of your logo by changing its width and height. Use something like:

#motive-x .x-mot-brand-logo {
    height: 70px;
    width: 70px;
    max-width: 100%;
}

Make sure to see how your changes affect the search results page as you save them and refresh your shop to see how they look. Bear in mind that deleting a change is as easy as removing it from the Custom CSS box.

Understand your CSS to know more

If you have enough knowledge of CSS, you can really get as creative as you want in modifying certain aspects of the look and feel of your shop’s search results page by applying changes that can make it more appealing to you and your shoppers.

On top of that, there are many other aspects you can easily configure from your search results like your branding, product cards or images in the simple settings that allow you to do so in a very intuitive way.

If you’re still not a Motive Commerce Search user and want to see how it blends magically with your shop, give it a try for free!

Quick and easy tips for customising your CSS