Canvas Docs

Setting Up Your Shop

Canvas is built to run a WooCommerce shop without glue work: activate the plugin and the theme takes over the shop's design on its own, replacing the stock catalog, product page, cart and checkout with Canvas-designed versions. Read this page when you are adding a shop to a Canvas site, or importing a store demo and wanting to know what it wired up.

How To Set Up

Starting screenPluginsAdd New Plugin.

Install and activate WooCommerce, then let its own onboarding create the shop, cart, checkout and account pages and take your store details. No Canvas-side activation step follows, because the integration switches on with the plugin: the shop archive, product category pages and single product pages render through the theme's own templates, product cards take the Canvas design, and store notices render as Canvas alerts.

With the store running, set the catalog up under Canvas > Theme Options in the Shop tab. Its settings are grouped into Catalogue, Product Page, Cart and Checkout and Mini Cart. The Catalogue group is the one to set first, because it governs what a shopper sees on the shop page:

  • Products per PageDefault0

    How many products each catalogue page lists before pagination. Leave it at 0 to follow the store's own count, which is Rows per page multiplied by Products per row under Appearance → Customize → WooCommerce → Product Catalog.

  • PaginationDefaultNumbered

    Choose how shoppers move between catalogue pages. Numbered pagination is what most stores want, because without it a shopper cannot reach anything past the first page.

    ChoicesNumberedNone

  • Product Image ShapeDefaultEmpty

    Pin every catalogue picture to one shape so the cards in a row line up, whatever sizes your product photographs were uploaded at. Follow each picture leaves them at their own proportions.

    ChoicesFollow each picture (empty)SquarePortrait (4:5)Portrait (3:4)Tall (2:3)Landscape (4:3)Landscape (3:2)

  • Fit Pictures To That ShapeDefaultFill and crop

    Choose what happens to a picture whose own proportions differ from the shape above. Fill and crop enlarges it until it covers the card and trims what hangs over; Fit inside shows the whole picture and leaves space at its edges.

    ChoicesFill and cropFit insideShown when Product Image Shape is set

  • Extra ImagesDefaultSlider When Several

    Choose what a card does with a product's extra gallery pictures: reveal the second one on hover, or turn the card picture into a slideshow. Slider when several does both, a slideshow once a product holds two or more gallery pictures and a hover reveal when it holds one.

    ChoicesReveal on HoverImage SliderSlider When Several

  • Card OverlayDefaultBuy and quick view icons

    Choose what appears over a product picture when a shopper hovers it. The icons and the labelled button both add to the cart without leaving the page.

    ChoicesBuy and quick view iconsOne labelled buttonBuy icon on the pictureno overlayNothingthe card is a link only

The other three groups set the product page's gallery and related products, the cart and checkout cards, and the header cart's icon and labels. You can leave them at their defaults and come back to them.

The Templates Canvas Provides

The Site Editor lists the shop's templates alongside the rest of the theme, so the design is editable rather than fixed:

  • Product Catalog (archive-product) and the product category archive (taxonomy-product_cat) render the catalog through the Canvas products grid on the store's own query.
  • Single product (single-product) renders the product page, with named variants available as templates for other layouts, among them left, right and both sidebar versions, a sticky layout and a list layout.
  • Cart (page-cart) and Checkout (page-checkout) replace the WooCommerce defaults for those two pages, covered in Cart, Checkout And Account Pages.
  • Shop page layouts for pages you compose yourself: Shop - Full Width, Shop - Left Sidebar, Shop - Right Sidebar and Shop - Both Sidebars, chosen in a page's Template setting.

Store Demos

The fastest route to a finished store is a store demo. Imported site-wide, a store demo also assigns its own designed cart and checkout pages as the store's working cart and checkout, and adopts its product image framing, so the store is transactionally complete the moment the import finishes. See Site Wide Versus Page Scoped Import for what that switch controls.

Pitfalls

The shop blocks render nothing. Every Canvas WooCommerce block reads from the store, so with WooCommerce inactive there is nothing to read and the blocks stay empty rather than erroring.

The catalog ignores the Shop tab settings. Products per Page and Pagination act on the catalog query the shop templates run. A hand-built page listing products through its own block follows that block's settings instead.

How many products a page lists is a WooCommerce setting until you override it. Set the shape of the grid under Appearance > Customize > WooCommerce > Product Catalog, where the two controls are Products per row and Rows per page. Canvas reads both, so the shop page, the category archives and any products block left on Store Setting all follow the same numbers.

Canvas's own Products per Page is an override, and it is off by default. Leave it at 0 and the store's own Rows per page decides. Enter a number and Canvas wins, which also hides the Rows per page control, because two settings cannot both own the count.

Performance plugins strip WooCommerce assets from shop pages. Canvas's own performance screen carries WooCommerce-specific options under Canvas > Performance, which is the safe place to trim store assets, because it knows which pages are store pages.

Was this page helpful?