A complete reference for every block you can add to product cards and product pages in the Boardwalk theme — from media and titles to variant pickers, buy buttons, inventory levels, store pickup, and image overlays.
Product blocks are the individual building pieces that make up a product card or product page in the Boardwalk theme. Think of them like Lego bricks — each block handles one specific job (showing an image, displaying a price, presenting variant options, etc.), and you snap them together in any order to create the exact layout you want.
Boardwalk organizes product blocks into two main contexts. Product card blocks appear inside collection grids, featured collections, carousels, and anywhere products are shown as browsable cards. Product page blocks appear on the dedicated product page and inside the Featured Product section, where customers can choose variants, add items to their cart, and see detailed information. Many blocks — like Product Title, Rating, and Discount Information — work in both contexts.
Follow these steps to customize which blocks appear on your product cards or product pages.
In your Shopify admin, go to
Online Store → Themes, find
Boardwalk, and click Customize.
Use the page selector dropdown at the top of the
editor to navigate to the page you want to edit
(e.g., a collection page, your homepage, or a
product page).
In the sidebar, find the section that contains your products — for example, a Featured Collection, Collection Grid, or Featured Product section. Click on it to expand its block tree.
Click Add block inside the product card or product content group. Choose from the available block types (Product Title, Rating, Variant Picker, Buy Buttons, etc.). To remove a block you don't need, click on it and select Remove.
Drag and drop blocks in the sidebar to change their order. The order you set in the sidebar matches the visual order on the page — top to bottom.
Click any block to open its settings panel. Adjust typography, colors, spacing, and display options as needed. Each block type has its own set of options, described in detail below.
Click Save in the Theme Editor. Preview your store to verify that the product cards and product pages display as expected on both desktop and mobile.
The Product Card block is the main container for displaying a product inside collection grids, carousels, and featured collections. It wraps the product image, title, price, and any other child blocks you add into a single clickable card.
Rounds the corners of the product card. Range: 0px to 24px.
Controls the horizontal text alignment for all
child blocks inside the card. Options:
Left, Center, or
Right.
Select a color scheme for the card background and text. When it differs from the parent section's scheme, the card will visually stand out.
The Product Card accepts the following child blocks: Product Media, Price, Product Title, Swatches, Bundle Variant Picker, Discount Information, Rating, Text, Divider, Spacer, and App blocks.
The Product Media block displays the product's primary image. It also supports a hover effect that reveals the second image in the product's media library, giving customers a quick preview without clicking through.
Controls the shape of the product image.
Options: Adapt to image (uses each
image's natural proportions),
Standard (4:3),
Landscape (3:2),
Square (1:1), or
Portrait (3:4).
When enabled, hovering over the product image reveals the second image from the product's media library. If the product has only one image, a subtle zoom effect is shown instead.
The Product Media block also serves as a container for overlay blocks — Sale Overlay, Stock Overlay, and Tag Overlay — which appear as badges on top of the product image. See the Image Overlays section below for details.
The Product Gallery block is used on the product page and inside the Featured Product section. It renders a full media gallery with support for images, videos (hosted and external via YouTube or Vimeo), and 3D models. Customers can navigate through media using arrow buttons, thumbnail strips, or dot indicators.
Controls the proportion of space the gallery
takes up relative to the product information
column. Options: Small (40%),
Medium (50%), or
Large (60%).
Sets the shape of the gallery display. Options:
Auto (matches the first image's
natural proportions), Portrait
(3:4), Square (1:1),
Landscape (4:3), or
Widescreen (16:9).
When enabled, the gallery will never exceed 85% of the browser window height. This prevents tall images from pushing the product details below the fold.
Rounds the corners of gallery images and thumbnails. Range: 0px to 24px.
Displays a scrollable row of small thumbnail images below the main gallery so customers can jump directly to any media item.
Displays clickable dot indicators below the gallery as an alternative navigation method.
Note: The gallery respects focal points you set on images in your Shopify admin. When an image is cropped by the chosen aspect ratio, the focal point ensures the most important area stays visible.
Displays the product's name as a clickable link that takes customers to the product page. Full typography controls let you match this block to your brand's style.
Choose which font to use for the title. Options:
Heading, Body,
Caption (uppercase body font), or
Menu (uppercase body font).
Options: Normal or
Bold.
Range: 12px to 30px.
Controls the spacing between lines of text for multi-line titles. Range: 1.0 to 2.0.
Controls the spacing between individual
characters. Options: Tight,
Normal, or Loose.
Adds space above the title. Range: 0px to 36px.
Adds space below the title. Range: 0px to 36px.
The Discount Information block automatically calculates and displays how much a customer saves on sale products. It compares the original "compare at" price to the current price and shows the result as a percentage (e.g., "25% off") or a dollar amount (e.g., "$15 value"). For products with multiple variants at different discounts, it intelligently shows the highest available discount prefixed with "Up to."
This block shares the same typography settings as the Product Title block: Font style, Font weight, Font size, Line height, Letter spacing, and Padding top/bottom.
Note: Discount information only
appears when a product has a "Compare at price" set
that is higher than the selling price. You can set
this in
Shopify admin → Products →
[Your product] → Pricing.
The block automatically hides when a product is out
of stock.
The Rating block displays a star rating pulled from your product's review metafields. It supports full and half stars, a review count label, and customizable star colors and sizes.
Options: Auto (fits the content)
or Full (spans the entire card
width).
Displays the total number of reviews next to the stars (e.g., "12 Ratings").
Sets the fill color for the star icons.
Options: Small or
Medium.
Adds space above and below the rating. Range: 0px to 36px each.
Note: Ratings require a reviews app
(such as Judge.me, Loox, or Shopify Product Reviews)
that writes to the standard
reviews.rating and
reviews.rating_count metafields. If no
review data exists for a product, this block
automatically hides.
The Variant Picker block displays all of a product's options (size, color, material, etc.) as selectable buttons. When a customer picks an option, the selected variant updates across the entire page — the price, image, inventory level, and add-to-cart button all respond instantly without a page reload. Unavailable combinations are shown with a strikethrough so customers can see what's sold out at a glance.
Displays the currently chosen option value next to the option name (e.g., "Size: Medium").
When enabled, options named "Color" or "Colour" render as circular color swatches instead of text buttons. Swatches pull their color from Shopify's built-in swatch data, the variant's image, or a built-in library of common color names.
Controls the vertical spacing between option groups (e.g., the gap between Size and Color). Range: 8px to 32px.
Sets the minimum width for each option button. Range: 40px to 80px.
When enabled, option buttons inherit the corner radius from your global theme settings. Turn this off to set a custom corner radius for option buttons only (0px to 40px).
Adds a thin horizontal line between each option group.
Choose whether the divider uses your color scheme automatically, or set a custom color with transparency support.
The Buy Buttons block provides the quantity selector, add-to-cart button, and optional dynamic checkout buttons (like Apple Pay, Google Pay, or Shop Pay). It also supports selling plans (subscriptions) and a gift card recipient form. When a customer clicks "Add to Cart," the block shows a smooth loading spinner followed by a checkmark animation to confirm the item was added.
Displays express checkout buttons (Apple Pay, Google Pay, Shop Pay, etc.) below the add-to-cart button. The specific buttons shown depend on the payment methods enabled in your Shopify Payments settings.
When enabled and the product is a gift card, a form appears allowing customers to enter the recipient's email, name, a personal message, and a send date.
Note: Dynamic checkout buttons must
also be enabled at the payment provider level. Go to
Shopify admin → Settings →
Payments
to configure your available express checkout options.
If selling plans (subscriptions) are set up for a
product, a purchase options selector will
automatically appear above the buy buttons showing
both one-time purchase and subscription options.
The Inventory Level block displays the stock status of the currently selected variant using a colored dot indicator and text label. It shows messages like "In stock," "Only 3 left in stock," "Low stock," "Out of stock," or "Available on backorder." The display updates instantly when a customer switches between variants.
When enabled, shows the specific number of items available (e.g., "Only 3 left in stock"). When turned off, simpler labels like "In stock" or "Low stock" are shown instead.
Adds a pulsing animation to the colored status dot, drawing attention to the inventory status. The pulse is disabled for "Out of stock" items.
The quantity at which a product switches from the "In stock" message to the low stock warning. Range: 1 to 20.
Note: This block requires inventory
tracking to be enabled for your products. Go to
Shopify admin → Products →
[Your product] → Inventory
and make sure "Track quantity" is turned on.
The Store Pickup block shows in-store pickup availability for the selected variant. It displays the nearest store with pickup details, ready time, and a "Check availability at other stores" button that opens a drawer listing all locations. The block updates automatically when a customer selects a different variant.
When enabled, the block will request the customer's location to show the closest pickup store first.
Customize the text shown when pickup is available at a location.
Customize the text shown when pickup is not available.
Customize the text on the link that opens the full store list drawer.
Note: Store pickup must be
configured in your Shopify admin before this block
will appear. Go to
Settings → Shipping and delivery →
Store pickup
to enable it and assign inventory to your locations.
This block automatically hides if no pickup
locations are available.
The Product Features block is a container that groups feature highlights together at the bottom of a product card, separated from the main content by a divider line. Inside this container, you can add Rating blocks, Text blocks, and Metafield blocks.
The Metafield child block is especially useful here. It displays a dynamic value from a product metafield alongside a customizable icon and label. For example, you could show "Free Shipping" with a truck icon, or "100% Cotton" with a leaf icon.
Options: Auto (fits the content
and shares space with other metafields) or
Full (takes up the entire row).
Choose from a library of icons organized by category: Navigation, E-commerce (cart, bag, heart, star, tag, gift, etc.), Shipping (truck, package, map pin, clock, calendar, return), Account, Communication, Apparel (t-shirt, pants, dress, hanger, sneaker, watch, ruler), Furniture (armchair, couch, bed, lamp, desk, cabinet, plant), and Misc (info, shield, lock, sparkle, leaf, globe, sun, moon).
Connect a dynamic source — typically a product metafield — whose value will be displayed.
A small caption shown below the metafield value to give it context (e.g., "Material" or "Shipping").
Image overlays are small badge-style blocks that sit on top of the product image. They call attention to important product status information. In Boardwalk, there are three overlay types that nest inside the Product Media block.
Automatically appears when a product has a "Compare at price" set higher than the selling price. Displays a customizable label (e.g., "Sale") as a pill-shaped badge.
Displays an "Out of Stock" badge when a product is unavailable, or a "Pre-Order" badge when a variant allows overselling with zero inventory. Each state has independent color settings.
Shows a custom badge when a product has a specific tag. This is a flexible way to highlight products with labels like "New," "Featured," "Limited Edition," or anything else you need. You can add multiple Tag Overlay blocks to show several badges at once.
Note: Product tags are managed
in your Shopify admin under
Products → [Your product].
Make sure the tag name you enter in the overlay
settings exactly matches the tag on the product
(spacing matters, but capitalization does not).
Container blocks act as organizational wrappers that hold other child blocks. They control layout, spacing, alignment, and visual grouping on the product page.
The primary container for product page details on the Featured Product section. It holds child blocks like Product Title, Price, Variant Picker, Buy Buttons, Rating, Inventory Level, Store Pickup, and more. It arranges them in a vertical stack with customizable gap spacing and text alignment.
A styled card container that stacks vertically with the product content area. Use this to group supplemental information (like Store Pickup or custom text blocks) into its own visually distinct card.
A special card container designed to display complementary product recommendations. It automatically hides when no complementary products are set.
Note: Complementary product recommendations are managed through Shopify's Search & Discovery app. You need to install the app and assign complementary products to your products for this block to display any content.
reviews.rating and
reviews.rating_count product
metafields. Apps like Judge.me, Loox, and
Shopify Product Reviews support this. Make sure
your app is installed, configured, and that at
least one customer has left a review for the
product. The block hides automatically when no
review data exists.