Headphones

Import the Headphones design and it brings blocks and content types of its own, on top of the main Canvas library. Read this page when you are working on a site built from Headphones and meet a block you cannot find in the main reference.

These items stay registered on every site so that content you have already imported keeps rendering, and they appear in the block inserter only where the design is in use.

Content types this design adds

Stores

canvas_hp_store

One item is called a Store. You will find them in their own admin menu once the design is installed.

• Editor features: editor, excerpt, page-attributes, thumbnail, title
• Grouped by: Store Categories (canvas_hp_store_cat)

Each item carries these extra settings on its edit screen:

• Address

• Store Country

• Opening Hours

• Store Map

• Open Since

• Phone

• Price

Blocks this design adds

Headphone Product

canvas-core/headphone-products

Product card with colour-swatch image switching, or the bare price element, driven by a live catalogue record. In the block inserter it is named Canvas Headphone Product.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Product

• ProductDefaultEmpty

  The catalogue record this card presents. Title, price and link are read from it. Stored as a slug and resolved at render time, so it survives an import.

  Choices- Select a product - (empty)

• Product ID (legacy)Default0

  Only used when no product is selected above. Post ids do not survive an import; prefer the selector.

• LayoutDefaultShowcase Card

  Whether the block draws the full showcase card or the price on its own.

  ChoicesShowcase CardPrice Only

Colours

• ColoursDefaultEmpty

  One row per colour. The first row is shown until a swatch is pointed at.

  Shown when Layout is "Showcase Card"

  Each row of Colours takes:

  • ImageDefault0

    The photograph shown for this colour.

  • Colour NameDefaultEmpty

    Name of this colour, shown when its swatch is pointed at.

  • Swatch CSS ClassesDefaultEmpty

    Classes that paint the swatch dot.

  • Image Alt TextDefaultEmpty

    Overrides the attachment alt text.

  • Selected on LoadDefaultOff

    Marks this colour as the pre-selected swatch in the served markup.

Card

• Link the ImagesDefaultOn

  Wrap each colour image in a link to the product.

  Shown when Layout is "Showcase Card"

• Badge TextDefaultEmpty

  Small label over the card, for wording such as New. Empty shows none.

  Shown when Layout is "Showcase Card"

• Badge CSS ClassesDefaultbadge bg-dark px-3 py-2

  Classes on the badge.

  Shown when Layout is "Showcase Card"

• Description Wrap CSS ClassesDefaultproduct-desc list-inline text-center

  Classes on the block under the images holding the name and price.

  Shown when Layout is "Showcase Card"

• Title Link CSS ClassesDefaultfw-normal

  Classes on the product name link.

  Shown when Layout is "Showcase Card"

• Title OverrideDefaultEmpty

  Optional title markup for names the catalogue stores plainly, e.g. a superscript model number. Empty uses the product name.

  Shown when Layout is "Showcase Card"

• Swatch Row CSS ClassesDefaultmb-0

  Classes on the row of colour swatches.

  Shown when Layout is "Showcase Card"

• Title Wrap CSS ClassesDefaultproduct-title mt-2

  Classes on the block holding the product name.

  Shown when Layout is "Showcase Card"

• Image Stack CSS ClassesDefaultshowcase-target-images

  Classes on the stack of colour photographs.

  Shown when Layout is "Showcase Card"

• Image ID PrefixDefaultEmpty

  Prefix for the element ids of the colour images, which the swatches target. Empty derives one from the product.

  Shown when Layout is "Showcase Card"

• Price CSS ClassesDefaultproduct-price

  Classes on the price.

Headphone Stores

canvas-core/headphone-stores

Store locator grid, priced catalogue grid and single views driven by the demo store records. In the block inserter it is named Canvas Headphone Stores.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Layout

• LayoutDefaultStore Grid

  Which part of the store design this block draws: the store grid, the priced catalogue grid, or one of the three single item pieces.

  ChoicesStore GridCatalogue Grid (priced)Single Item - DetailsSingle Item - CTASingle Item - Back + Related

Query

• CategoryDefaultEmpty

  Store Category slug to show (the retail locations, or the headphone catalogue). Empty shows every item.

• StoresDefault0

  0 shows every store.

• Order ByDefaultMenu Order

  What to sort the records by.

  ChoicesMenu OrderDateTitle

• OrderDefaultAscending

  Read the sort order forwards or backwards.

  ChoicesAscendingDescending

Display

• Row ClassesDefaultrow text-center g-5

  Classes on the row wrapping the store cards.

• Column ClassesDefaultsection-contact col-lg-4 col-md-6

  Classes on each store column, which is where the number of cards per row is set.

• Card ClassesDefaultp-5 rounded-6

  Classes on the box around one store.

• Card IconDefaultbi-shop

  Icon shown at the top of every store card.

• Card Icon ClassesDefaulti-plain i-large mx-auto mb-4

  Classes on the store card icon, which set its size and style.

• Card Title ClassesDefaultmb-3

  Classes on the store name.

• Card Link TextDefaultStore Details

  Wording on the link to the full store page.

• Card Link ClassesDefaultbutton button-border button-circle button-fill fill-from-bottom button-dark button-black text-transform-none ls-0 ms-0 mt-4

  Classes on the store card link.

Catalogue

• Catalogue Row ClassesDefaultrow g-5

  Classes on the row wrapping the catalogue cards.

  Shown when Layout is "Catalogue Grid (priced)"

• Catalogue Column ClassesDefaultcol-md-4

  The catalogue grid carries its own column classes, so it never inherits the store card’s boxed styling hooks.

  Shown when Layout is "Catalogue Grid (priced)"

• Catalogue Card ClassesDefaultproduct

  Classes on the box around one catalogue item.

  Shown when Layout is "Catalogue Grid (priced)"

• Catalogue Image Wrap ClassesDefaultproduct-image

  Classes on the picture area of a catalogue card.

  Shown when Layout is "Catalogue Grid (priced)"

• Catalogue Body ClassesDefaultproduct-desc text-center

  Classes on the body of a catalogue card, under the picture.

  Shown when Layout is "Catalogue Grid (priced)"

• Catalogue Title Wrap ClassesDefaultproduct-title mt-2

  Classes on the block holding the catalogue item name.

  Shown when Layout is "Catalogue Grid (priced)"

• Catalogue Title TagDefaulth3

  Heading level for the catalogue item name.

  Choicesh2h3h4Shown when Layout is "Catalogue Grid (priced)"

• Catalogue Title Link ClassesDefaultfw-normal

  Classes on the catalogue item name link.

  Shown when Layout is "Catalogue Grid (priced)"

• Catalogue Price ClassesDefaultproduct-price

  Classes on the catalogue price.

  Shown when Layout is "Catalogue Grid (priced)"

• Catalogue Price TagDefaultNo inner tag

  Element wrapping the price inside its container.

  ChoicesNo inner taginsspanstrongShown when Layout is "Catalogue Grid (priced)"

Links

• Store Locator Page SlugDefaultstores

  Resolved to a permalink at render time, so it survives an import.

• Single CTA TextDefaultContact This Store

  Wording on the main button on a single item page. Empty renders no button.

• Single CTA Page SlugDefaultcontact

  Slug of the page the main button opens.

• Back Link TextDefaultAll Stores

  Wording on the button back to the store collection. Empty renders no button.

• Nearby HeadingDefaultOther Stores

  Heading above the row of other stores.