Theme components

Garnet provides theme components for the marketplace. All components can be recreated using liquid code, or any other frontend framework. They can be drag-and-drop directly in your Shopify theme.

Vendor login

By default Garnet will generate a login and application page. You can also use the Vendor Login component to let vendors sign in from anywhere else in your store. It is a lightweight, self-contained sign-in form with a clean default design, so it looks good out of the box, and every part can be customized to match your theme.

Learn more about vendor login

When Use default CSS is on, three built-in layouts are available:

• Compact (default): no labels — placeholder-only inputs joined into a single group, matching Garnet's default login page.
• Vertical: each label sits above its input.
• Inline: each label sits beside its input.

Prefer full control? Turn Use default CSS off and provide your own CSS instead.

Beyond the layout, you can customize the title (text, CSS class, or hide it), the button (label, loading label, color, class), the inputs and labels (CSS classes), the "lost password" link, the error message (color — Garnet red by default — and class), and the container width. When a vendor signs in, their dashboard opens in a new tab.

Vendor application

Same as the vendor login, Garnet generates a page by default and you can use this component to build the vendor application page you want.

Learn more about vendor application

Vendor application & login

Garnet provides one component for both application and login. It is responsive and is perfect to kick-start your marketplace with a single page for vendors to both apply and login.

Vendor directory component

Add the vendor directory where you need to use Garnet's built-in components. Open your Shopify theme editor, navigate to the page you want to change, add a section and select Vendor directory.

You can customize the component with the following settings:

• Use metaobjects instead of collections: Read vendors from the Garnet Vendors metaobjects instead of vendor collections. If you started to use Garnet after May 2026, it is the best solution.
• Metaobject image field: When using metaobjects, the field key of the vendor image on the metaobject (default collection_image).
• Image source: Choose between "Collection image" (default) or "Collection metafield" to use a custom metafield as the vendor image.
• Metafield key: When using "Collection metafield" as image source, enter the metafield key from the vendor registration form (e.g. profile-picture).
• Image display: How images should fit the tile.
• Show vendors without images: hide/show vendors that did not provide any images.
• Fallback image: In case you are displaying missing images, select a fallback image.
• Images height (px): The height of the image tile. The width will be automatically computed.
• Images per row: Number of columns on a wide screen (default 4). On narrower screens the grid drops columns by itself so no tile gets smaller than the minimum width below.
• Minimum tile width (px): The smallest a tile may get before the grid removes a column (default 140).
• Rows per page: Together with the images per row, how many vendors a page shows (default 6 rows, so 24 vendors). Page links appear under the grid when there are more.
• Gap between images (px): the space between tiles (default 10).

Vendors without an image take the same square as the others, so the names stay aligned across a row.

Vendor page component

Build a vendor page without writing Liquid: add the Vendor page section to the Garnet Vendors metaobject template (see how to create it). It shows the vendor name and description with their image on the right, then the products of the vendor collection, without filters, paginated. Placed on a collection template, it renders the collection itself the same way, so it also fits legacy vendor collection pages.

By default the name comes from the metaobject Name field and the image from collection_image, falling back to the profile picture, then the shop logo.

You can customize the component with the following settings:

• Metaobject image field: The field key of the vendor image on the metaobject (default collection_image).
• Metaobject description field: The field key of the rich text shown below the vendor name (default collection_description). On a collection template, the collection description is shown instead.
• Image height (px): The image is a square of this size, the same tile as the vendor directory (default 400). A vendor without any image shows the name alone.
• Image display: How the image fits its square.
• Products per row, Minimum tile width (px), Rows per page, Gap between products (px): The product grid, same rules as the vendor directory. A page shows rows × products per row, up to 50, then paginates.
• Sold out label: The text shown under a product that is out of stock. A product with several variants shows its lowest price.
• Use default CSS: Turn off to style the section entirely from your theme's CSS. With it on, the settings are exposed as CSS variables on #garnet-vendor-page (--garnet-title-color, --garnet-columns, --garnet-gap, --garnet-image-size, …) that your CSS can override. The markup keeps stable hooks: #garnet-vendor-page, .garnet-vendor-page__header, .garnet-vendor-page__title, .garnet-vendor-page__description, .garnet-vendor-page__image, .garnet-vendor-page__products, .garnet-vendor-page__product, .garnet-vendor-page__price and #garnet-vendor-page-pagination.
• Section CSS class: An extra class on the section, to hook your own styles.
• Vendor title color, Background color, Vertical padding (px), Horizontal padding (px): Colors and spacing when the default CSS is on.

Vendor holiday component

Displays the vendor holiday message. The message will only show if the vendor is on holiday during this specific day.

The message is automatically hidden when the holiday is over. It can be displayed anywhere in your store. Usually it is right below the purchase buttons.

Follow this link to learn more about the holiday feature.

You can customize the component with the following settings:

• Product: The vendor's product to use as a reference to find the vendor's holiday settings
• Text color: The color of the vendor's holiday message. Default: Red.

Vendor profile component

Display the vendor's image and description next to the product information.

You can customize the component with the following settings:

• Product: The product to extract the vendor from,
• Image height (px): The height of the image,
• Image width (px): The width of the image,
• Image rounded corner (px): Add rounding to the image corner (0px for no rounding),
• Gap between image and text (px): Distance between the image and the text,
• Display as column: Check to display the image above the text,
• Button text: If the vendor has a vendor page, you can specify the call-to-action text,
• Button classes: Add classes to the call-to-action to match your theme's design.

Vendor links component

See the populate vendor page for more information. One setting, Link to the vendor page instead of the collection, decides where the vendor links go: the vendor collection, or the vendor page built from the Garnet Vendors metaobject.

Classic messaging component

The message button component powers classic messaging: a Contact seller button that opens a dedicated messages page. See the classic messaging setup for more information. The template allows the marketplace to edit the CSS and classes of the component.

Modern messaging widget

The Messages Widget powers modern messaging: a floating, Messenger-style chat dock that appears on every page of your store, opening conversations in place with no page reload. It is enabled as an app embed rather than dragged onto a page. See the modern messaging setup for how to enable and customize it.

Digital assets download

Display download links for digital assets on the order status page and the thank you page. Each product with a file product field will show a download button.

Learn more about selling digital assets