Shopify theme with “Card” block

A Shopify theme with a “Card” block lets you group a heading, some text, buttons or icons inside a frame with its own background color and rounded corners. The card sets a piece of information apart from the rest of the page: help for customers, a selling point, an offer. In FullStack, it is the Group block with the card option turned on, usable anywhere theme blocks are accepted.

Why frame information in a card

On a long page, everything quickly blends together. A card breaks the flow: the eye stops on that block and reads it as one unit. It works well for messages you want people to actually read, such as customer service hours, a guarantee or a perk.

Repeated in a grid, cards also organize content: three cards side by side read as three options or three arguments, much faster than a paragraph.

Cards also help on mobile, where sections stack into one long column. A framed block with a distinct background tells shoppers where one topic ends and the next begins, so key information like returns or support hours does not get lost while they scroll.

How the Card block works in FullStack

Add a Group block (or its Card preset) to a custom section, a banner or another group, then tick Wrap in a card (wrap_in_card). The card settings then appear:

• Color scheme (color_scheme): the card’s background and text colors.
• Border (show_card_border): shown or hidden.
• Card link (card_link): makes the whole card clickable.
• Inner padding: the theme’s default (use_global_container_padding), or custom horizontal and vertical values, separate for desktop and mobile.

Content is laid out with the group’s layout engine: flexible (direction, alignment, justification, wrapping) or a grid of 1 to 6 columns, with adjustable width and gap. The mobile settings unlock when you untick “same as desktop” (same_as_desktop). Inside the card you can place any theme block: text, button, icon with text, image.

What the card stacks with in FullStack

• Button: one primary and one secondary at the end of the card, as in the demo.
• Icon with text: several cards in a row make a trust bar (shipping, payment, returns).
• Custom section in grid mode: the theme’s most common pattern, card groups repeated in a grid.
• Card with background image: when a photo needs to carry the message. See the card with background image.

Examples by store type

Supplements: the help card

Just like the demo: a “Need help?” heading, customer service hours, then two full-width buttons to contact and FAQ. Use a color scheme slightly different from the page background.

Fashion: the trust bar

A grid of three or four cards, each with an Icon with text block: free shipping, secure payment, returns. Border on, background matching the page, for a subtle look.

Skincare: the editorial product card

One card per hero product with a heading, a one-line promise and a card link (card_link) to the product page. In that case, skip the button inside: click areas would overlap.

Best practices

• One card, one idea: if the content covers two topics, make two cards.
• In a grid, keep the same color scheme and padding on every card.
• When card_link is set, do not add buttons or links inside.
• For two equal cards in flexible mode, leave both widths at 100%: they share the space evenly.

Limits worth knowing

The card has no background image: for a photo behind the content, use the Image card block. Nesting groups is powerful, but each level should stay simple or the page gets hard to maintain. The block is included in the license described on the pricing page.

FAQ

Where is the Card block in the theme editor?

It is a Group block with “Wrap in a card” (wrap_in_card) ticked, or you can insert its Card preset directly.

Can I make the whole card clickable?

Yes, with the card_link setting. In that case, avoid buttons inside so two links do not overlap.

Can the layout differ on mobile?

Yes: untick “same as desktop” (same_as_desktop) to set direction, columns, gap and width for mobile.