How to style the number of columns of your sliders and/or search page - and other design changes

Changing the number of columns or the button background color has never been so easy!

So you installed on your website!

3 of our 4 products are visual elements (recommendation sliders, search results, email contents) showing products, like in the screenshot below.

Our built-in Recommendation slider template produces a row of recommendations with 5 columns. The Search page template produces automatically 4 rows of products and the Email template prints contents of 1 column only per row. But that doesn't matter: the design of all our contents can be customised 100%. 

So, if you wish to change the number of columns of a certain element (which is the same thing of changing the number of products shown in a row of one of our contents) you must follow this path: --> your-store --> Designs

First, you need to open a specific design template - for instance, the one called "Responsive Product Slider" - by clicking on "Edit Design".

Now depending on the fact that you are using the code editor you are prompted with several black boxes: the one that we need to use to achieve our design changes is called "CSS". As you can see, it contains several CSS classes that rules the design of our contents.

If you are using the Design Editor instead you will have to go in the Overview and in the list select Product. you will find the same CSS box.

Here is a brief cheat sheet for everyday design changes:


The class responsible for the number of products in a row is called .clerk-product. The attribute of such class that is called


and its value

calc(20% - 10px)

both rule how wide each product is going to be in the slider/content. So, since the whole slider is wide 100%, setting the attribute as

width: calc(20% - 10px)

will show

100 / 20 = 5 products per row.

So, if you wish to show 4 products per row, you must replace the default value of

width: calc(20% - 10px)


width: calc(25% - 10px)

Again, if you wish to show 3 products per row, you must replace the default value of

width: calc(20% - 10px)


width: calc(32% - 10px)

In the same line of code, you can adjust also the margin playing with the default number of pixels (which is 10px) by making it bigger or smaller. 

All changes are immediately displayed in the contents of your website that use such template, so if you have doubts about the change, save the template and check your website.



The class / instruction related to the "Buy Now" button can change according to the platform that you are using.

An easy way to easily identify the class / instruction that in your template is responsible for the button background color is to check the line of code that wraps the "Buy Now" text.

In the default recommendation slider template for Magento 1, for instance, the "Buy Now" code line in the "PRODUCT HTML" box looks as follows:

<div class="clerk-cta-button action primary">Buy Now</div>

where clerk-cta-button, action and primary are the css classes (the instructions) that rule the design of the "Buy Now" button. That means that one of those 3 classes is responsible for the design of your "Buy Now" button.

Now that we know that, move from the "PRODUCT HTML" box to the "CSS" box of your template page and search for the class called


which, as you can see, comes with certain attributes and values

.clerk-cta-button {
    margin: 10px 10px 5px 10px;
    padding: 10px 20px;
    border-radius: 3px;
    background-color: #16cc53;
    color: white;

    line-height: 1em;

among them, we find one called


that comes with the value of


Such value is the color code of the background color of your Call To Action (CTA) button or "Buy Now" button. You must replace this value with the color code that you wish to use for your "Buy Now" button and then save. And that's all!



Just like any other element of our contents, the color and the size of a discounted price of a certain product can be easily 100% customized. 

Maybe you want to color the discounted price of your products with a specific, different color in order to highlight the discount that eventually applies on products.

As for the other design changes of our contents, we must first edit your content template and, in the CSS box of our template, we need to search for the line of code below

<span class="clerk-new-price">Price </span>

which, as you can see, comes with the css class called


As you know, you can find such class in the CSS box hosted in the same page. You will find that clerk-new-price comes with the following attributes and values

    color: #26b555;

where the value called


is the discounted price text color. Replace #26b555 with any other color code and save, then refresh your website page and you'll see the text color of the discounted prices change according with your new color code!



In all's contents, each product comes with a number of visual elements. The product image is one of those that can be customized. Maybe you want to make such image smaller (or bigger?) or manipulate it in some other ways. 

If you want to do that, you need to edit our usual template, then scroll the page down to the "CSS" box and, then, find in the box the code below:

.clerk-product img {
    max-width: 100%;
    max-height: 180px;

This is the code that styles the product image shown in our content. 

By manipulating the max-width attribute, you can change the image size. For instance if you set the value of max-width to 50%, the image will be only 50% of the whole product container width. 

The same principle applies with the max-height attribute - which comes handy in cases of very narrow and high pictures. In this scenario, you can reduce the number of pixels that rules the max-height of the product image and make it "shorter".

Keep in mind that this procedure is about resizing the size of an existing picture. Making the picture smaller via CSS manipulations like this will not reduce the loading time of your website page.

WARNING: before resizing manually the image size, try resizing the product container size as described above in the paragraph called "CHANGING THE NUMBER OF COLUMNS/PRODUCTS SHOWN PER ROW".