Product

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on product variants
3. Company XYZ documentation on product cards settings
4. Company XYZ documentation on cards settings
5. Company XYZ documentation on visibility settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this block to display a single product card wherever you want to highlight a specific item. It can inherit your theme’s product card styling or override it here when this card needs its own layout or visual treatment. For a broader overview of how blocks work in the theme editor, see Shopify documentation on sections and blocks

Product selection

Choose the product this block should display. The rest of the block settings shape how that product appears, so this block works best when the selected product already has a strong featured image and clear product text.

Standard block settings

Card settings

These settings control the card’s layout, image crop, text presentation, button treatment, and variant display. Leave them on Use theme setting when you want this block to match your other product cards, or override them when this product needs a different emphasis.

Card style is the biggest visual choice. Banner styles suit larger promotional placements, while simpler styles are usually easier to fit into tighter layouts or mixed content rows.

Desktop and mobile image ratios can be set separately. If the card looks balanced on desktop but the image crops awkwardly on smaller screens, adjust the mobile ratio instead of changing the overall card style.

Button style changes how prominent the purchase action feels. Mobile uses an icon-only treatment, so the product image and text should still make the card understandable without relying on a long button label.

Text settings let you simplify the card when space is limited. Larger placements can support both title and excerpt, while smaller placements often work better with title-only text.

Middle vertical text alignment only works with the Banner card style.

Variant selectors can make the card more useful for products with meaningful options, but only when those options are clearly set up and easy to understand from the card itself.

Note

Variant selectors require additional setup. See the product variants setup guide.

For broader shared behavior, see the product card settings reference.

Color settings

These settings override the card colors for this block only. Use them when you want a featured product to stand out or when the surrounding page background needs a different card treatment for better contrast.

Banner overlay settings apply only to the Banner card style. They are useful when product imagery is busy and you need to improve text legibility without replacing the image.

Background, border, heading, and text colors are best adjusted together. That usually gives a cleaner result than changing a single color in isolation.

Tip

Check custom colors on both desktop and mobile, especially if the card uses image overlays or reduced text space.

For shared card color behavior, see the cards settings reference.

Visibility settings

Use visibility controls to show this block everywhere or hide it on desktop or mobile. This is helpful when you want one version of a featured product card for larger screens and a simpler or differently cropped version for smaller screens.

For more on display control, see the visibility settings reference.

Editor settings

Use the editor title to label the block clearly in the sidebar. This is especially helpful when a layout includes multiple product blocks and you want to identify each one quickly while editing.

Usage notes

1. Pick a strong product. Choose a product with a clear featured image and concise supporting text so the card reads well at a glance.
   1. Use a product that still makes sense if the image is cropped more tightly on smaller screens.
   2. Keep the main product image readable if you plan to override card colors or add an overlay.
2. Match overrides to the job. Leave shared card settings in place when you want consistency, and override them only when this featured product needs a stronger visual role.
   1. Blank or default-style values usually preserve fallback styling.
   2. Explicit colors or media choices make this card feel more independent from the rest of the layout.
3. Review mobile separately. Check image cropping, text length, and button clarity on smaller screens before finalizing the block.
   1. Mobile controls can change alignment, visibility, and media behavior compared with desktop.
   2. If desktop and mobile media are different, review both views to confirm the card still reads clearly.
4. Use variants only when helpful. Show swatches or pills only when they improve product selection directly from the card.
5. Test contrast carefully. When overriding colors or overlays, make sure product text remains easy to read across different images and devices.