In this article we will learn how to customize the buttons in your collection:

  1. Customize the layout

  2. Customize the thumbnails

  3. Customize the style

To enter the button configuration, select the menu you want to configure, select the "Design" table, and go to the "Buttons" section.

You can combine the different configurations that we will see in this article.

1. Customize the layout

Direction

You can change the button direction to horizontal or vertical in the Layout options.

Horizontal

Vertical

Position

You can also change the position of the buttons by sliding the bar.

2. Customize the thumbnails

You can customize the thumbnail settings, such as enabling or disabling thumbnails, placing the button titles inside or outside the thumbnail, and changing the shape of the thumbnail.

Enable thumbnails

To enable/disable thumbnails for the current menu, toggle thumbnails on in the thumbnails section.

Thumbnails disable

Thumbnails enable

Titles Inside

Once thumbnails are enabled, you can choose to display the button title inside or outside the thumbnail.

Title outside the thumbnail

Title inside the thumbnail

Thumbnail Shape

You can change the thumbnail's shape to a rectangle, square, or circle when thumbnails are enabled.

Rectangular thumbnail

Square thumbnail

Circular thumbnail

3. Customize the Button Style

In the "Style" section you can customize the button font and color, as well as colors for the button background and button highlight.

You can also enable/disable the background bar and round the corners of the buttons.

Font, Background, and Highlight Color

To change the color of the button font, button background, or button highlight, click on the color square next to the item you want to update, then choose a color from the color picker.

The opacity can also be modified within the color picker for the Background Color and Highlight Color.

Enable/disable the button background bar

You can choose whether you want a background bar to be displayed behind the buttons or not.

Background Bar disabled

Background Bar enabled

Rounded Corners

You can also round the corners of the buttons to give them a different look.

Did this answer your question?