Product media and variants – Craftsmith Studio

Media types

The product gallery supports:

images
Shopify-hosted videos (with controls, loaded only when played)
YouTube and Vimeo videos (loaded lazily)
3D models (shown after the visitor interacts, with a toggle)

Add media in the product admin. The first media item is the product’s main image on cards and in search.

Gallery (Product information section)

Gallery layout:
- Editorial stack: large images stacked; the first one is shown wider on desktop.
- Slider with thumbnails: a swipeable slider with a counter and thumbnails.
Image ratio: Original, Portrait (3:4) or Square (1:1). Portrait and square frames crop images to the focal point.
Enable full screen images: opens a full-screen lightbox. Close it with the close button or Escape.
Keep product details visible while scrolling on desktop: the details column stays in view beside a long gallery. When the details are taller than the screen, the column scrolls to its end first, so nothing stays hidden.

Recommended media order

Front view of the first color: also the card image.
Back or three-quarter view: becomes the hover image on cards when Show second image on hover is on.
Detail, then on-model and lifestyle images.
One image per additional color.

Variant images

Assign an image to each variant in the product admin. When a customer chooses that variant, the gallery shows its image: the slider scrolls to it, and the stack moves it to the top. The sticky add-to-cart bar shows the variant image too.

Variant picker

Variant picker block, Style: Buttons or Dropdown.
Color swatches: values that have a Shopify swatch (color or image) appear as swatches. Swatches come from the option’s linked category metafield in the product admin. Values without a Shopify swatch can use Theme settings > Product cards > Swatch colors: one Name: #hex pair per line, for example Camel: #B08454. The same swatches appear on product cards, where hovering a swatch previews that color’s image (assign variant images in admin).
Unavailable combinations: they stay selectable but are marked “Unavailable”, and the buy button shows that the combination can’t be bought. Sold-out variants show “Sold out”.
Update the URL when a variant is selected: keeps a shareable link to the chosen variant.
Combined listings (Shopify Plus): choosing a value from another product loads that product.

Size guide, highlights and the tailor’s ticket

Size guide block: a link that opens a side panel with the content of a page you choose (Page). Tables in the page are styled automatically. Create the page in Online Store > Pages first.
Highlights block: up to three short promises, each with an icon (Shipping, Returns, Craft, Natural, Size, Gift, Secure), for example “Free returns within 30 days”. Only promise what your store actually offers.
Tailor’s ticket block: product details on a garment-tag card with up to four rows. Each row has a Row label, a Metafield (namespace.key, for example custom.materials) and a Fallback text. Rows without a value are hidden. The tag number uses the variant’s SKU. The default template shows one row, Care, from Shopify’s standard care guide metafield (descriptors.care_guide); add rows for your own metafields (see section 9).
The Highlights block isn’t in the default product template, so your store never shows promises you haven’t made. Add it from Add block when you’re ready.

Gift cards sent to someone else

On gift card products, the product form shows Send as a gift to someone. When customers tick it, they enter the recipient’s email (required), and optionally a name, a message (200 characters max) and a send date up to 90 days ahead. Shopify then emails the gift card to the recipient on that date, or right after purchase. The details appear in the cart, and the gift card page shows the message and the scheduled date. To sell gift cards, create a gift card product in Products > Gift cards.

Price, inventory and buying

Price shows sale prices with the compare-at price, unit prices when set on the variant, and Shop Pay Installments messaging when your store is eligible.
Inventory status shows a low-stock message at or below Low stock threshold. It requires inventory tracking on the variant.
Buy buttons: Show dynamic checkout buttons (for example Shop Pay, when payment methods are set up) and Show pickup availability (needs local pickup on a location).
Show sticky add to cart bar: appears after the main button scrolls out of view.
Subscriptions (selling plans) from subscription apps appear above the buy buttons automatically.