Skip to content
GloboGlobo Docs
Install app
English

Product list

Show products in the menu as a single card, grid, list or carousel.

Reference All plans 3 min read

Product cards with image, vendor, name and price, right inside the mega menu. Use Single product (all plans) to spotlight one best seller, or a grid, list or carousel (Growth Navigation, Pro Navigation) for new arrivals, best sellers or a whole collection.

Add the block

  1. Pick a layout

    In the mega menu panel of the preview, click Add block. Click Add product, hover over a layout and click Select.

    (1) Click Add product, (2) pick a layout.

  2. Choose the products

    For Single product, click Select products under Add product and pick one. For the other layouts, choose a Source; for Collection pick a collection, for Manual pick the products.

    The Product list block in the preview, with its settings in Edit Item.

  3. Save and publish

    Adjust the settings below, then click Save and Publish.

Layouts

The Add product tab lists Lookbook hotspots first (see Lookbook hotspots), then these layouts:

Single product
One product card. The tab has two: one with the image above, one with the image left.
Product grid image aboveGrowth · Pro
Products in a grid, image on top.
Product carouselGrowth · Pro
Products in a slider with arrows.
Product listGrowth · Pro
Products one under another, small image on the left.
Product grid image leftGrowth · Pro
Products in a grid, small image on the left.

Settings

Single product

WidthDefault: 25%
How much of the mega menu row the block takes: Auto or 8.33% to 100%.
LayoutDefault: The layout you picked
Image above or Image left.
Add productDefault: None
The product to show.
VisibilityDefault: Off
Hide on desktop, Hide on mobile, Hide when logged in, Only show when logged in, Schedule publishing. See Settings every block has.
Title / LinkDefault: New products
Heading above the products, and where it links, for example the full collection.
WidthDefault: 75% grids · 25% list, carousel
How much of the mega menu row the block takes.
List viewDefault: The layout you picked
Carousel, List or Grid.
Number of productsDefault: 6 grids · 4 list, carousel
How many products to show.
Item(s) per rowDefault: 3 grids · 1 carousel
Grid and Carousel only: 1, 2, 3, 4 or 6 products per row.
Item viewDefault: The layout you picked
Grid and Carousel only: Image above or Image left.
Image ratioDefault: Auto
Auto, 1:1, 4:3, 3:4, 16:9 or 9:16. Makes all product images the same shape.
SourceDefault: Newest products
Newest products (most recently added), Best selling, Collection (products from one collection you pick) or Manual (only the products you pick).
VisibilityDefault: Off
Same options as Single product.

What shoppers see

Each product shows its image, vendor, name and price. Products with several variants show From before the lowest price, a compare-at price shows crossed out with a Sale label, and unavailable products show Sold out.

Tips

  • To add an Add to cart button under every product in the menu, turn on Settings > Advanced > Show add to cart button.
  • Carousel autoplay and looping are in Settings > Carousel.
  • Product data updates on its own, and a Collection source always shows the collection’s current products. If you delete a product or collection or change its handle (URL), pick it again.

Was this helpful?

Report an issue