Logo gallery

This component allows you to display a collection of images, which can be for example logos from brands you sell on your store, partner companies, featured products or basically whatever you want to communicate through the use of images.

It works by adding a subcomponent called Logo and you can add as many as you want. We will refer to them as blocks.

Component settings

By clicking on the component name you will find general options to customize it, which will determine how the section will look and behave. The available options for this component are the following:

Width

Allows to define the maximum width that the component will stretch to the browser window.

You can read more about how this option will affect the component on this page.

Columns on desktop

Allows to define the amount of blocks that will be displayed on desktop devices that have a width equal or greater than 768px.

This will vary depending on what you define within the Display option you choose below, as it follows:

Carousel

Device width	Amount of logos
≥ 1201px	Defined amount
≥ 992px	4 logos
≥ 768px	3 logos

Grid

Option value	Desktop (≥ 992px)	Tablets (≥ 768px)
8	8 columns	4 columns
7	7 columns	4 columns
6	6 columns	4 columns
5	5 columns	4 columns
4	4 columns	4 columns
3	3 columns	3 columns
2	2 columns	2 columns

Columns on mobile

Allows to define the amount of blocks that will be displayed on mobile devices that have a width equal or lower than 767px.

This will vary depending on what you define within the Display option you choose below, as it follows:

Carousel

Device width	Amount of logos
≤ 575px	Defined amount
≤ 418px	Always 2 logos

Grid

Option value	Mobile (≤ 767px)
3	3 columns
2	2 columns
1	1 column

Space between

This option allows you to define if there will be space between blocks.

Note: it will only be visible and available to be used if what’s defined at the Spacing option in Theme settings > Design > Theme styles is any other than None.

Display

Allows to define if the component content will be displayed within a section of type Carousel or Grid.

You can read more about the differences between these two types on this page.

Carousel options

This group of options will become visible when you choose Carousel, and they will allow you to customize its behavior.

You can find the full list of options in this page.

Image options

This group of options allows you improve how images are delivered and displayed inside the component.

Format images

Allows to automatically format and redimension the images you upload on blocks, based on the next options you’ll find below.

Dimension

Sets the dimension in which images are gonna be displayed.

Display

Crop: This creates a thumbnail version of the image, cropping it to fit the exact size defined at the Dimension option, keeping the most important part of it centered.

For example, if you defined a square dimension, this will make sure it always keeps that shape, even if your original image was rectangular.

Resize: This keeps the image’s proportions (it doesn’t crop it) and simply makes it smaller to fit the available space, because it gets adjusted automatically without cutting anything out.

In short:

• Crop makes your image fit exact dimensions.
• Resize keeps the original proportions and scales it down.

Heading options

By enabling this, a Heading section will be displayed before the component’s content. You can find the list of options in this page.

Appearance

This group contains the following options to customize the component:

• Top margin: allows to control the upper margin of the section.
• Bottom margin: allows to control the lower margin of the section.
• Content colors: allows to choose the Color Pack for the component.

Animations

The Customize options allows to adjust the animations for this specific component. You can read which ones are available in this page.

---

---

Subcomponent settings

As mentioned before, the subcomponent for the Logo Gallery is called Logo and its options are the following:

Image

Allows to upload the image or logo.

Note: ideal suggested formats are .webp, .jpg or .svg. Try to avoid using formats like .png.

Link

This option allows to add a link to the block, which will make it fully clickable.

The following options will become visible once you add one:

• Link image: Allows to display the image of the selected link (for products, categories and pages), if it has been added through the store’s admin panel.
• Link text: Text that will be displayed when the user hovers (passes the cursor) over the image.
• External link: If enabled, the link will open in a new browser tab.