Introducing UI Customisation

Motive Commerce Search wants your search to be a natural part of your shop, and for that, it needs to look like your shop. This page provides a detailed introduction to how to customise your shop visually.

Customising the Search Layer

There are several fields you can configure in your search layer:

• Logo: Upload your logo by pasting the URL where your logo is hosted in the box. 

     Logo limitations

     The logo must be a valid URL with a valid image format (.jpg, .png or .gif) 

• Brand Colours: Specify your primary and secondary colour using their Hex code.
• Font: By default, Motive Commerce Search uses the same font that is configured for the body in your site. By turning the toggle off, you can specify a different font by entering the font-family as it appears in your shop's CSS, for instance "Times New Roman", Times, serif in the following example:

  font-family: "Times New Roman", Times, serif;

Please remember the Logo, Brand Colours and Font fields cannot be empty.

• Margin: Select the width of the search layer as it appears on the desktop version of your shop.
• Grid column size: Choose the number of columns you want to be displayed in the results page,  according to the device type.
• Elements: Use the toggles to enable or disable the Add to Cart button of your shop, as well as the divider lines that separate the price and the product name.

     Add to Cart

     If the Show the Add to Cart button toggle is disabled, you can choose the price's alignment

     in the Content alignment dropdown.

Finally, you can also configure some aspects of your product cards:

• Text styles: These fields allow you to configure the styles of the different text pieces that appear in your product cards, allowing you to modify their colour and other aspects, for the Product title and the Price, both the regular one and the discounts.

As well as the image and the Z-index:

• Image: You can configure the product's image size. You can also choose how the image fits the space: using margins or filling the space.
• Layer: Configure the weight given to the Motive Commerce Search layer in your shop's Z-index.

Once you have finished configuring the UI, click Save to update the changes in your shop.

Learn More

Go back to understanding how Analytics work by accessing these pages:

• Introducing Analytics: Understand how to start using Motive Commerce Search Analytics.
• Introducing Synonyms: Know everything about how to get started using Synonyms.