Your shop does not have to live only on the shop page. With TruCommerce blocks you can put products, categories, a search box or even the cart on any page you build, and shop widgets add filters and mini carts to your side areas.
In the Page Builder open the Blocks panel, find the TruCommerce groups (or search for “product”), drag a block onto the page and choose what it shows in Settings. The block draws a live preview, and the page always shows current products and prices. The TruCommerce plugin must be active. How blocks work in general is explained in Dynamic Blocks & Shortcodes.
Layout is per block
Cart and checkout blocks, product grids and others have their own Layout or design choice that does not depend on the global setting in Storefront Designs. That lets one page look different from the rest of the shop.
The general product block. Choose the products by category, tag, brand, price, stock or search, sort them, and show them as cards, rows or a slider.
| Option | Control | Choices |
|---|---|---|
| Products | Search and pick | — |
| Related to product | Search and pick | — |
| Category | Search and pick | — |
| Tag | Search and pick | — |
| Search term | Text | — |
| Stock status | Choice | Any, In stock, Out of stock, Backorder |
| Minimum price | Number | — |
| Maximum price | Number | — |
| Items | Number | — |
| Mobile columns | Number | — |
| Tablet columns | Number | — |
| Desktop columns | Number | — |
| Product presentation | Choice | Product cards, Product list |
| Product card layout | Choice | Attribute Workbench, Compact Buyline, Editorial Float, Halo Commerce, Kinetic Split, Precision Catalog, Signal Overlay, Soft Gallery (default: Attribute Workbench) |
| Product list layout | Choice | Commerce Command Row, Compact Marketplace Row, Editorial Story Row, Halo Split Row, Specification Strip (default: Commerce Command Row) |
| Card density | Choice | Compact, Tight, Balanced, Comfortable, Editorial airy (default: Balanced) |
| Card radius | Choice | Precision, Nearly square, Soft, Plush, Superellipse (default: Soft) |
| Media ratio | Choice | 1:1 Square, 4:5 Portrait, 3:4 Portrait, 4:3 Landscape, 16:10 Landscape |
| Enable secondary image | On / off | — |
| Secondary image transition | Choice | Crossfade, Slide, Restrained zoom, Masked reveal (default: Crossfade) |
| Badge style | Choice | Capsule stack, Corner ribbon, Floating token, Media stamp, Side rail (default: Capsule stack) |
| Pricing style | Choice | Inline current / regular, Purchase strip, Savings ticket, Stacked sale / regular, Variable range |
| Action style | Choice | Floating media dock, Full-width footer, Hover / focus overlay, Split footer, Text + arrow (default: Floating media dock) |
| Pointer effect | On / off | — |
| Kinetic effect | On / off | — |
| Sort | Choice | Priority, Latest, Name, Price, Popular, Random (default: Priority) |
| Direction | Choice | Ascending, Descending |
| Spacing | Choice | None, Small, Medium, Large |
| Pagination | On / off | — |
| Show image | On / off | — |
| Show rating | On / off | — |
| Show price | On / off | — |
| Show action | On / off | — |
| Additional CSS class | Text | — |
The newest products. Same options as Products with “newest first” preset.
Options: the same as Products.
Products ordered by the number and rating of approved reviews.
Options: the same as Products.
A hand-picked selection of products you choose one by one.
Options: the same as Products.
Products that are on sale or promotion.
Options: the same as Products.
Products that share a category with a product you choose. Place it on a product page for “You may also like”.
Options: the same as Products.
Products of the categories you choose.
Options: the same as Products.
Products with the tags you choose.
Options: the same as Products.
One product shown as a card in any product-card design.
| Option | Control | Choices |
|---|---|---|
Product required | Search and pick | — |
| Product card layout | Choice | Attribute Workbench, Compact Buyline, Editorial Float, Halo Commerce, Kinetic Split, Precision Catalog, Signal Overlay, Soft Gallery (default: Attribute Workbench) |
| Card density | Choice | Compact, Tight, Balanced, Comfortable, Editorial airy (default: Balanced) |
| Card radius | Choice | Precision, Nearly square, Soft, Plush, Superellipse (default: Soft) |
| Media ratio | Choice | 1:1 Square, 4:5 Portrait, 3:4 Portrait, 4:3 Landscape, 16:10 Landscape |
| Enable secondary image | On / off | — |
| Secondary image transition | Choice | Crossfade, Slide, Restrained zoom, Masked reveal (default: Crossfade) |
| Badge style | Choice | Capsule stack, Corner ribbon, Floating token, Media stamp, Side rail (default: Capsule stack) |
| Pricing style | Choice | Inline current / regular, Purchase strip, Savings ticket, Stacked sale / regular, Variable range |
| Action style | Choice | Floating media dock, Full-width footer, Hover / focus overlay, Split footer, Text + arrow (default: Floating media dock) |
| Pointer effect | On / off | — |
| Kinetic effect | On / off | — |
| Show image | On / off | — |
| Show rating | On / off | — |
| Show price | On / off | — |
| Show action | On / off | — |
Selected products shown one at a time in a slider.
| Option | Control | Choices |
|---|---|---|
Products required | Search and pick | — |
| Product card layout | Choice | Attribute Workbench, Compact Buyline, Editorial Float, Halo Commerce, Kinetic Split, Precision Catalog, Signal Overlay, Soft Gallery (default: Attribute Workbench) |
| Product density | Choice | Compact, Tight, Balanced, Comfortable, Editorial airy (default: Balanced) |
| Media radius | Choice | Precision, Nearly square, Soft, Plush, Superellipse (default: Soft) |
| Media ratio | Choice | 1:1 Square, 4:5 Portrait, 3:4 Portrait, 4:3 Landscape, 16:10 Landscape |
| Enable secondary image | On / off | — |
| Secondary image transition | Choice | Crossfade, Slide, Restrained zoom, Masked reveal (default: Crossfade) |
| Badge style | Choice | Capsule stack, Corner ribbon, Floating token, Media stamp, Side rail (default: Capsule stack) |
| Slides to Show | Choice | 1, 2, 3, 4, 5 (default: 3) |
| Pricing style | Choice | Inline current / regular, Purchase strip, Savings ticket, Stacked sale / regular, Variable range |
| Action style | Choice | Floating media dock, Full-width footer, Hover / focus overlay, Split footer, Text + arrow (default: Floating media dock) |
| Pointer effect | On / off | — |
| Kinetic effect | On / off | — |
| Maximum products | Number | — |
| Transition duration (ms) | Number | — |
| Autoplay | On / off | — |
| Autoplay interval (ms) | Number | — |
| Loop | On / off | — |
| Navigation arrows | On / off | — |
| Pagination dots | On / off | — |
| Slide gap | Text | — |
One product highlighted with a large presentation.
| Option | Control | Choices |
|---|---|---|
Product required | Search and pick | — |
| Spotlight layout | Choice | Compact Media / Info Split, Floating Purchase Panel, Horizontal Purchase Strip, Media-top Spotlight, Minimal Product Teaser |
| Eyebrow | Text | — |
| Button label | Text | — |
The buying controls of one product — live price, stock, options, quantity and Add to cart — on any page. Ideal for landing pages that sell one product.
| Option | Control | Choices |
|---|---|---|
Product required | Search and pick | — |
| Button label | Text | — |
| Show quantity | On / off | — |
| Show stock status | On / off | — |
Your shop categories with a choice of directory designs.
| Option | Control | Choices |
|---|---|---|
| Layout | Choice | Bento Directory, Circular Atlas, Editorial Index, Floating Label Cards, Immersive Split Tiles (default: Bento Directory) |
| Taxonomy slug | Text | — |
| Included IDs | Text | — |
| Excluded IDs | Text | — |
| Items | Number | — |
Your product tags with a choice of directory designs.
| Option | Control | Choices |
|---|---|---|
| Layout | Choice | Editorial Cloud, Horizontal Tag Rail, Numbered Index, Outlined Pills, Soft Count Pills (default: Editorial Cloud) |
| Items | Number | — |
The shop search and filter form.
| Option | Control | Choices |
|---|---|---|
| Search layout | Choice | Command Bar, Compact Sidebar Search, Hero Search, Predictive Search Panel, Search Overlay (default: Command Bar) |
| Shell layout | Choice | Accent Rail, Borderless Editorial, Floating Card, Soft Rounded Panel, Thin Ledger (default: Borderless Editorial) |
| Category | On / off | — |
| Tag | On / off | — |
| Price | On / off | — |
| Sorting | On / off | — |
| Button label | Text | — |
A curated collection of products with its own title, cards and rows.
| Option | Control | Choices |
|---|---|---|
| Products | Search and pick | — |
| Maximum products | Number | Default: 8 |
| Title | Text | — |
| Description | Text | — |
| Collection layout | Choice | Bento Commerce, Editorial Shelf, Feature Lead, Gallery Grid, List Showcase (default: Bento Commerce) |
| Product card layout | Choice | Attribute Workbench, Compact Buyline, Editorial Float, Halo Commerce, Kinetic Split, Precision Catalog, Signal Overlay, Soft Gallery (default: Attribute Workbench) |
| Product list layout | Choice | Commerce Command Row, Compact Marketplace Row, Editorial Story Row, Halo Split Row, Specification Strip (default: Commerce Command Row) |
| Card density | Choice | Compact, Tight, Balanced, Comfortable, Editorial airy (default: Balanced) |
| Card radius | Choice | Precision, Nearly square, Soft, Plush, Superellipse (default: Soft) |
| Media ratio | Choice | 1:1 Square, 4:5 Portrait, 3:4 Portrait, 4:3 Landscape, 16:10 Landscape |
| Enable secondary image | On / off | — |
| Secondary image transition | Choice | Crossfade, Slide, Restrained zoom, Masked reveal (default: Crossfade) |
| Badge style | Choice | Capsule stack, Corner ribbon, Floating token, Media stamp, Side rail (default: Capsule stack) |
| Pricing style | Choice | Inline current / regular, Purchase strip, Savings ticket, Stacked sale / regular, Variable range |
| Action style | Choice | Floating media dock, Full-width footer, Hover / focus overlay, Split footer, Text + arrow (default: Floating media dock) |
| Pointer effect | On / off | — |
| Kinetic effect | On / off | — |
A bundle builder: customers combine simple products and add the bundle to the cart.
| Option | Control | Choices |
|---|---|---|
Products required | Search and pick | — |
| Maximum products | Number | Default: 5 |
| Title | Text | — |
| Bundle layout | Choice | Bundle Matrix, Checklist Builder, Complete the Set Shelf, Configuration Accordion, Soft Bundle Box (default: Bundle Matrix) |
A side-by-side comparison of products you choose.
| Option | Control | Choices |
|---|---|---|
Products required | Search and pick | — |
| Maximum products | Number | Default: 4 |
| Comparison layout | Choice | Clean Specification Matrix, Differences Focus, Mobile Swipe Compare, Product Cards & Detail Bands, Sticky Product Headers (default: Clean Specification Matrix) |
A call-to-action panel that leads to the shop or to one product.
| Option | Control | Choices |
|---|---|---|
| Product | Search and pick | — |
| CTA layout | Choice | Bento CTA, Elevated Promotional Card, Full-image Poster, Horizontal Strip, Split Banner (default: Bento CTA) |
| Widget shell | Choice | Accent Rail, Borderless Editorial, Floating Card, Soft Rounded Panel, Thin Ledger (default: Borderless Editorial) |
| Title | Text | — |
| Description | Text | — |
| Button label | Text | — |
The current customer’s cart, in the cart design you choose.
| Option | Control | Choices |
|---|---|---|
| Cart layout | Choice | Compact Checkout Bridge, Editorial Ledger, Halo Cart Board, Marketplace Workspace, Warm Studio Cart (default: Compact Checkout Bridge) |
The checkout, in the checkout design you choose.
| Option | Control | Choices |
|---|---|---|
| Checkout layout | Choice | Calm Split, Express Command Checkout, Guided Sections, Mobile Priority Flow, Progressive Stepper (default: Calm Split) |
Widgets put shop tools into widget areas such as the shop, product, cart and checkout sidebars: category, attribute and price filters, product search, product list, product tags and categories, a mini cart, a spotlight and a call to action. Each has a design choice (for example the price filter can be a range slider, min/max fields, preset ranges or segmented bands). They are described in Widgets, and the available designs are listed in Storefront Designs.
The same shop widgets can also be placed inside a page with the Widgets block of the Page Builder by naming the area, for example trucommerce-shop-sidebar.
| Symptom | What to do |
|---|---|
| A product block is empty | No product matches the filters, or the products are not visible in the shop (inactive, out of stock when hidden, or not in the sales channel). Loosen the filters. |
| A price on the page is old | The page may be cached. See the Store FAQ. |
| The cart block shows an empty cart | It shows the visitor’s own cart; add a product first to test. |
| The block does not appear in the Blocks panel | TruCommerce is not active, or your account may not edit pages. |