Barber

Import the Barber 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 Barber 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

Barber Items

canvas_barber_item

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

• Editor features: custom-fields, editor, excerpt, page-attributes, thumbnail, title
• Grouped by: Barber Categories (canvas_barber_item_cat)

Each item carries these extra settings on its edit screen:

• Item Badge

• Item Badge Class

• Duration

• Item Feat

• Item Label

• Item Media Desc

• Price

• Item Price Old

• Item Subtitle

Blocks this design adds

Barber Items

canvas-core/barber-items

Display the barbershop's services as featured cards, a price list or a card grid, or render a single item page (price, duration, booking CTA, related items). In the block inserter it is named Canvas Barber Items.

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

Layout

• LayoutDefaultFeatured Cards

  Which part of the design this block draws: featured cards, a price list, a product grid, or one of the three pieces that build a single item page. The single pieces render nothing anywhere else.

  ChoicesFeatured CardsPrice ListProduct GridSingle Item - DetailsSingle Item - Booking CTASingle Item - Back + Related

Query

• Category SlugDefaultEmpty

  Limit to one category (e.g. "services"). Empty shows every item.

• Featured Items OnlyDefaultOff

  Show only items carrying a featured order, sorted by it.

• ItemsDefault0

  0 shows all items.

• Order ByDefaultMenu Order

  What decides the sequence items appear in: the order you arranged them in, when each was published, or the item name.

  ChoicesMenu OrderDateTitle

• OrderDefaultAscending

  Whether that sequence runs forwards or backwards. With Order By set to Title, Descending lists from Z to A.

  ChoicesAscendingDescending

Display

• Row ClassesDefaultEmpty

  Classes on the row wrapper. Empty uses the layout default.

• Column ClassesDefaultEmpty

  Classes on each item column. Empty uses the layout default.

• Card Image ClassesDefaultrounded-circle img-thumbnail

  Style classes on the picture inside a featured card. The default draws it as a circle inside a thin frame.

• Card Media StyleDefaultpadding: 0 40px;

  Styling written straight onto the picture area of a featured card. The default insets it, which is how the design keeps the circles clear of the card edges.

• Card Link TextDefaultRead More

  Featured-card link text. Empty hides the link.

• Card Link ClassesDefaultmore-link text-uppercase ls-1 fw-bold

  Style classes on the read more link under a featured card. The default sets it in bold, spaced capitals.

• Card Link StyleDefaultmargin: 20px 0 0 0; font-style: normal;

  Styling written straight onto the read more link, for the spacing above it that no class covers.

• Show DescriptionsDefaultOff

  Add the item description to product-grid cards.

• Price Row BreakDefault2

  Insert a full-width clear after every N price rows. 0 disables it.

• Collection Page SlugDefaultEmpty

  Slug of the page listing this collection. The single layouts resolve it to a portable permalink for the category eyebrow and the "Back" button. Empty = no link.

• CTA TextDefaultEmpty

  Price-list and single-item button label. Empty hides the button.

• CTA Page SlugDefaultEmpty

  Slug of the page the CTA links to, resolved server-side so the link survives export/import. Empty links to the anchor on the current page.

• CTA AnchorDefaultEmpty

  In-page anchor appended to the CTA target (e.g. "contact" for a one-page demo).

• CTA ClassesDefaultbutton button-large button-color text-uppercase ls-1

  Style classes on the call to action button, which is what gives it its size, colour and spaced capitals.

• CTA Icon ClassDefaultEmpty

  Icon class rendered before the CTA label (e.g. "bi-calendar3"). Empty = no icon.

• CTA Column ClassesDefaultcol-12 text-center

  Style classes on the column that holds the call to action button, which is what gives it the full width of the row and centres it.

• Back Button TextDefaultEmpty

  Empty derives "Back to " from the item itself.

• Related HeadingDefaultYou May Also Like

  Heading above the row of other items at the foot of an item page. Leave it empty to show them with no heading.