Shopify theme with “Card with background image” block

A Shopify theme with a “Card with background image” block lets you place a heading and a button right on top of a photo, inside a card with rounded corners. It is a mini banner you can drop into a grid, a mega menu or a custom section: ideal for showing collections, needs or worlds as a mosaic, with the image doing the work of drawing the click.

Why images get the click

A list of text links makes shoppers read before they understand. A photo card is understood at a glance: you see the product, the use or the mood, and the heading confirms it. To guide people toward collections or needs, it often says more than a menu.

A mosaic adds hierarchy: one large card for the main entry point, smaller ones around it. Shoppers can tell right away where to start.

How the image card works in FullStack

The Image card block (image-card) is a public block. You place it anywhere theme blocks are accepted, then add the blocks you want on top of the image, typically a text and a button. Its settings:

• Background image (image).
• Overlay: opacity (image_filter_opacity, 25% by default, up to 80%) and color (image_filter_color) of a layer over the image that keeps the text readable.
• Color scheme (color_scheme) for the content on top of the image.
• Card height (card_height): auto, very small, small, medium or large, with a separate value for mobile (card_height_mobile).
• Justify and align (layout_justify, layout_align_items) for the content inside the card.
• Card link (card_link) to make the whole card clickable, plus global or custom inner padding.

What the image card stacks with in FullStack

• Ready-made mosaics: the image card is the building block of the custom section’s card presets, so you can set up a mosaic without starting from scratch.
• Group in grid mode: several cards in a grid group make a row of even tiles.
• Mega menu: the card is accepted inside mega menus, to feature a collection with an image right in the navigation. See the mega menu.
• Empty cart: it is also accepted in the cart drawer’s empty state, to get shoppers browsing again.

Examples by store type

Supplements: shop by need

Just like the demo: one card per need (sleep, skin, recovery), a large one on the left and four smaller ones, a heading and a “See” button at the bottom of each card, with layout_align_items set to end.

Fashion: collection worlds

Three cards of the same height (card_height set to medium) for Women, Men and Accessories. Overlay around 20%, white text, and card_link to each collection with no button inside.

Home and decor: the room in a photo

One card per room (living room, bedroom, kitchen) with a lifestyle shot. On mobile, set card_height_mobile to small so the page does not scroll forever.

Best practices

• Set the overlay and color scheme once, then repeat them on every card in the same grid.
• In a grid, use one fixed height for all cards: keep auto for standalone cards.
• For an image with nothing on top, set the overlay to 0 or use the Image block instead.
• When card_link is set, avoid a button inside: click areas would overlap.

Limits worth knowing

The overlay darkens the image by default: adjust it to your photos. For a card with a plain color background and no image, use the Group block with the card option instead. The image card does not replace a full-width banner at the top of the page, which has its own section. The block is included in the license described on the pricing page.

FAQ

How do I keep text readable on a light photo?

Raise the overlay opacity (image_filter_opacity) and pick a color scheme with light text. Somewhere between 15 and 30% is often enough.

Can I use a different height on mobile?

Yes, with the card_height_mobile setting, which is independent from the desktop height.

How is it different from the Card block?

The Card block is a group with a color background. The image card places content on a photo, with an adjustable overlay.