Store

Import the Store 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 Store 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.

Blocks this design adds

Store Products

canvas-core/store-products

A WooCommerce product grid in the Store card shape, with a slider or hover swap for the extra photographs. In the block inserter it is named Canvas Store Products.

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

Query

• ProductsDefaultLatest products

  Which products the grid pulls in. Related only has anything to show on a single product page.

  ChoicesLatest productsFeatured productsOn saleA product categoryA product tagRelated to the current product

• Category slugDefaultEmpty

  The product category to show. Separate several with commas.

  Shown when Products is "A product category"

• Tag slugDefaultEmpty

  The product tag to show. Separate several with commas.

  Shown when Products is "A product tag"

• Number of productsDefault12

  The most products the grid shows. It stops there even if more match.

• Order byDefaultStore order

  What decides the sequence of the cards. Store order follows the arrangement you set in the products list.

  ChoicesStore orderDateTitlePricePopularityRating

• OrderDefaultAscending

  Which end of that sequence comes first: cheapest and oldest first, or dearest and newest first.

  ChoicesAscendingDescending

Layout

• Grid IDDefaultEmpty

  A name of your own for the grid. A price filter or a shop filter points at this name to say which grid it controls.

• Grid classesDefaultrow

  Class names on the grid itself, setting the space between the cards.

• Column classesDefaultcol-lg-4 col-md-6 mb-4

  Class names on each card column, which is what sets how many products sit side by side at each screen width.

• Card classesDefaultEmpty

  Class names on each product card, for a border, a shadow or a background the design gives its cards.

• Image wrapper classesDefaultposition-relative

  Class names on the picture area of each card. Keep the positioning class or the sale badge and the cart button lose their anchor.

• Details wrapper classesDefaultEmpty

  Class names on the area under the picture holding the name, label and price.

• Filter classes fromDefaultEmpty

  Tag every card with the categories or tags its product belongs to, which is what a shop filter above the grid matches on.

  ChoicesNone (empty)Product categoriesProduct tags

• Filter class prefixDefaultsf-

  Text placed in front of each of those tags, so they cannot collide with a class the design already uses. Your filter buttons have to use the same prefix.

Images

• Extra photographsDefaultSlider when there are several

  What a card does with a product that has gallery pictures as well as a main one.

  ChoicesSlider when there are severalAlways a sliderReveal the second on hover

• Slider arrowsDefaultOn

  Show previous and next arrows over the card picture.

• Slider paginationDefaultOff

  Show a row of dots under the card picture, one per photograph.

• Slider thumbnailsDefaultOff

  Show a strip of small pictures under the card that the shopper can click to jump to a photograph.

• Thumbnails From (images)Default0

  Give a card its own thumbnail strip once it has at least this many images. 0 = every card follows the switch above.

• Thumbnail Card Pause (ms)Default0

  Autoplay pause on the cards that show thumbnails. 0 = the same pause as every other card.

  Shown when Thumbnails From (images) is set

• Thumbnail Card ArrowsDefaultEmpty

  Whether the cards that show thumbnails state their own arrows.

  ChoicesInherit (empty)ShowHideShown when Thumbnails From (images) is set

• Slider speed (ms)Default400

  How long one photograph takes to slide across to the next.

• Slider pause (ms)Default200000

  How long each photograph is held before the next one moves in. The default is long enough that a card only advances when the shopper asks it to.

Card

• Add-to-cart buttonDefaultOn

  Put a buy button on each card. A product that cannot be bought straight from a listing shows its own wording instead, such as Select options.

• Button labelDefaultAdd to Cart

  Wording on the buy button for a product that can be bought straight from the grid.

  Shown when Add-to-cart button is on

• Button iconDefaultuil uil-plus

  Glyph shown before the wording on the buy button.

  Shown when Add-to-cart button is on

• Button classesDefaultcart-btn button button-white button-light

  Class names that set the look of the buy button.

  Shown when Add-to-cart button is on

• Product nameDefaultOn

  Show the product name under the picture.

• Label under the nameDefaultOn

  Show a small line under the name naming the product's brand, category or tag.

• Label readsDefaultProduct brand

  Which of the product's groupings that small line names. A product with none of the chosen kind shows no label.

  ChoicesProduct brandProduct categoryProduct tagShown when Label under the name is on

• PriceDefaultOn

  Show the price on each card.

• Wrap the price inDefaultOn

  Mark a full price up the same way a sale price is marked, so every card in the grid prints its price at the same weight.

  Shown when Price is on