Showcase

A Showcase is a split-layout section designed to present products in a more refined and editorial way. Instead of displaying products in a traditional grid, it divides the screen into two distinct areas: one side dedicated to the content (Media) — such as a title, subtitle, description and image or media — and the other to a curated selection of products that users can browse through a carousel.

Another key feature of this component is that you can choose the position for both columns available in it, simply by dragging and dropping them, which allows you to create compelling compositions if for example you opt to add several components one after the other.

This layout is ideal for highlighting a specific collection, a seasonal campaign, or a group of featured products that deserve more visual presence. The combination of imagery, text and product browsing creates a more immersive experience, encouraging customers to engage with what you’re showcasing rather than simply scanning through a list.

It works very similarly to the Product collection component, as both share several options and settings. The key difference lies in how the content is structured and presented: rather than stacking everything vertically, the Showcase places your messaging and your products side by side, giving each the space and attention they deserve.

---

Component settings

By clicking on the component name you will find the exact set of general options as in the Product collection component:

• Collection
• Limit
• Width
• Display
• Carousel settings
• Heading options
• Appearance
• Animations

Apart from the options within the list above, this component includes two additional ones, which are explained next:

Left and right space

Allows to add or remove the left and right space between the section and the browser’s edges.

Rounded corners

Allows to define if the corners of the section will be rounded and the size of them.

This option will be visible and available only if the Rounded corners option is enabled at the Theme settings panel of the Visual Editor.

---

Media column

The Media block is one of the subcomponents used to display the content of the collection — such as the title, description, link/button —, as well as the media type you want to use, which will behave as a decorative background for the column.

Type

Here you can choose which type of media element you want to use as the background of the media column. Depending on which one you select, options will become visible for you to customize them.

Image

You will find two options to upload images for desktop and mobile devices.

If you only upload the first one and don’t use the one for mobile devices, it will be used for all devices.

When using this option, others will also become visible for you to customize it further:

• Crop automatically: allows to automatically adapt the images you upload to ideal dimensions defined in the theme’s code.
• Transition: allows to define a transition that will be applied to the background image when users hover inside the area of the column.

Embed video

Here you can copy and paste the embed code that platforms like YouTube and Vimeo provide for sharing, which is commonly known as an iframe.

Video URL

This option allows you to copy and paste URLs from platforms like the ones mentioned above, as well as videos hosted on external sources such as a website or CDN.

When choosing this option, the following ones will become available to customize how the video will behave:

• Controls: whether video controls should be displayed.
• Autoplay: whether the video should start playing automatically.
• Muted: whether the video should start with no audio.
• Loop: whether the video should loop.

Display

This option allows to define how the media element will adapt to the available space within the column, and it’s only available for Image and Video URL.

When choosing Cover it will fill the entire area with the majority of the media element. It’s very likely that some sides of the media element won’t be visible if for example:

• The media element has a horizontal dimension and the Ratio is square, therefore, the left and right sides won’t be visible.
• The media element has a vertical dimension and the Ratio is horizontal, therefore, the top and bottom sides won’t be visible.

When using this option you will find desktop and mobile options to choose the vertical and horizontal position of the media element, giving you more control over how it displays within the space.

For the case of Contain, the media element will adapt both vertically and horizontally and will be visible in its entirety.

Ratio

You will find two options for defining the dimension of the Media column on desktop and mobile devices. The height of this column will affect the height of the entire component, therefore, it will define the height of the column where the products are displayed.

If the height of the Media column is less than the one where products are, that column will take precedence and define the height of the entire component.

Content options

This group of options allows you to customize the look of the content blocks, such as title, subtitle, text and so on.

Overlay

Allows to define the opacity or transparency of this element, which positions itself between the media element (e.g. image) and the content (e.g. title), to create contrast and improve the readability of these last ones.

Content colors

Allows to choose the Color pack for the Media column, which will affect all elements inside of it.

Alignment & Position

You will find options for desktop and mobile devices to control the horizontal alignment of the content, as well as the vertical position, always accordingly to the width and height of the column.

---

Media blocks

We will refer to blocks as the subcomponents that can be added inside the Media column.

You can find details on what they are, how they work and what you can achieve with them in this article.

---

Products

The Products subcomponent is straightforward in its settings, offering just one option to define the Color pack for the column in which products will be displayed.

Regardless of that, there are some considerations for the Showcase component that you need to be aware of when using it:

• Products will always be displayed within a Carousel and the options to control its behavior can be found inside the Component settings.
• It will always show one product at a time, mainly to preserve the design given the available space within the column. This also means that the carousel will be centered both vertically and horizontally inside of it.