Blocks overview

Overview All plans 5 min read

A block is one piece of content inside a mega menu or a tab. Blocks sit side by side in a row, and each block’s Width sets how much of the row it takes.

Links & buttons

Link listA heading and a column of links, with optional icons, images and badges. Hover image linksLinks next to a large image that changes on hover. Feature listSelling points such as free shipping, each with an icon. ButtonOne call-to-action button, such as “Shop all”.

Images & banners

ImageOne banner or promo image with a title and link. Image sliderSeveral images in a carousel.Growth · Pro Promo bannerAn image with a heading, text and button. Brand logosA grid of brand logos, each with its own link.

Products & collections

Product listOne product card, or products in a grid, list or carousel. Lookbook hotspotsA photo with clickable dots on the products in it. Collection listCollections with their images.Growth · Pro Collection spotlightCollection names next to a grid of their products.Growth · Pro

Content & promotions

Blog postsYour latest or hand-picked blog articles.Growth · Pro Contact formA form customers use to send you a message. NewsletterAn email sign-up form. CountdownA timer that counts down to a date.Growth · Pro Coupon codeA discount code shoppers copy with one click.Growth · Pro Custom HTMLAny HTML: maps, videos, embeds.Pro

Which one should I use?

Block	Best for	Tab in Select block	Plan
Link list	Categories, brands, sizes	Link list	All plans; Badge needs Pro Navigation
Hover image links	Categories previewed with a picture	Link list	All plans
Feature list	Free shipping, returns, secure payment	Link list	All plans
Button	A “Shop all” call to action	Link list	All plans
Image	A seasonal banner or promo	Add custom image	All plans
Image slider	Several campaigns in one block	Add custom image	Growth Navigation, Pro Navigation
Promo banner	A sale or new collection, with a button	Add custom image	All plans
Brand logos	“Shop by brand”	Add custom image	All plans
Product list	A best seller, new arrivals, a collection	Add product	Single product: all plans. Grid, list, carousel: Growth Navigation, Pro Navigation
Lookbook hotspots	“Shop the look”	Add product	All plans
Collection list	“Shop by category” tiles	Collection	Growth Navigation, Pro Navigation
Collection spotlight	Products from several collections	Collection	Growth Navigation, Pro Navigation
Blog posts	Guides, lookbooks, news	Blogs	Growth Navigation, Pro Navigation
Contact form	Questions without leaving the page	Contact form	All plans
Newsletter	Growing your email list	Contact form	All plans
Countdown	Flash sales and deadlines	Countdown	Growth Navigation, Pro Navigation
Coupon code	A discount code to copy	Coupon code	Growth Navigation, Pro Navigation
Custom HTML	Maps, videos, embeds	Add HTML to menu	Pro Navigation

Two more tabs add structure rather than a single block:

• Multi block adds ready-made combinations, such as 3 Link lists + 1 Image or Map + Contact + Address, in one click. The plan you need depends on the blocks inside. Group of items stacks several blocks in one column; see Masonry layout (Pro Navigation).
• Tab adds simple or nested tabs with the titles on the left, top or right. See Tabbed menu (Pro Navigation).

Add a block

1. Open the panel

   In the menu editor, click the item that has a mega menu so its panel opens. Click Add block.

   

   Click Add block in the open mega menu panel.

2. Pick a tab and a layout

   In Select block, click a tab, such as Multi block, Link list or Coupon code. Hover over a layout and click Select.

   

   (1) Choose a tab, (2) hover over a layout and click Select.

3. Set up the block

   Its settings open in Edit Item. Fill in the content and choose the Width. To edit it later, click the block in the preview.

   

   (1) Click the countdown in the preview, (2) set its Width.

4. Save and publish

   Click Save, then Publish.

Note

A layout with a Growth Navigation or Pro Navigation badge isn’t in your current plan. Its button reads Upgrade to use and takes you to Pricing.

Settings every block has

WidthDefault: Depends on the layout

How much of the row the block takes: Auto, or 8.33% to 100%. Blocks whose widths add up to more than 100% wrap to a new row. For equal columns, use 4 × 25%, 3 × 33.33% or 2 × 50%.

Hide on desktop / Hide on mobileDefault: Off

Under Visibility. Hides the block on one type of device.

Hide when logged in / Only show when logged inDefault: Off

Under Visibility. Shows the block only to guests, or only to signed-in customers.

Schedule publishingDefault: Off

Under Visibility. Shows the block only between a Start date / Start time and an End date / End time. See Schedule menus.

Extra classnameDefault: Empty

Under Advanced. Adds your own CSS class so you can style the block with Custom CSS.

Shopify data updates on its own

Product, collection and blog blocks read titles, prices, images, stock and new posts live from your store. The block only remembers which items you picked: if you delete one or change its handle (URL), pick it again. See Changes in Shopify admin don’t appear in the menu.

Related pages

• Mega menuBuild a wide submenu panel from blocks such as link lists, images, products and a contact form.
• Tabbed menuLet shoppers switch between groups of content, such as Men, Women and Kids, inside one submenu.
• Masonry layout and Special menuStack blocks of different heights neatly in columns, or show a category list with a panel for each category.
• Plans and billingCompare the Globo Mega Menu plans, start a free trial, and upgrade, downgrade or cancel your plan.

Was this helpful?

Report an issue