TruCommerce lets you design every part of the shopping journey from Store Settings. For each part — the shop page, a product card, the product page, the cart, the checkout — you pick one of several finished designs and a few fine-tuning options.
Open Store Settings → Choose the tab for the part you want → Pick a design and fine-tune → Save → Check the shop
Every design is complete: you do not build anything. Designs differ in structure (where the picture, price and button sit), mood (editorial, compact marketplace, soft gallery) and behaviour. A few shared options then fine-tune them — density, corner radius, picture ratio, badges and pricing style. You can change your mind at any time; products, prices and orders are never affected.
Open TruCommerce → Settings (see Store Settings). The design choices are in these tabs:
| Tab | What you choose |
|---|---|
| Storefront Appearance | Container width, animation level, text direction and the default look of widget boxes (Accent Rail, Borderless Editorial, Floating Card, Soft Rounded Panel, Thin Ledger). |
| Shop / Product Archive | The shop page design, where widgets sit (left or right), whether products are shown as cards or list rows, the shop landing mode (product archive or storefront landing), and grid columns for phones, tablets and desktops. |
| Product Cards & Lists | The card design and list-row design, plus density (Compact to Editorial airy), corner radius (Precision to Superellipse), picture ratio (1:1, 4:5, 3:4, 4:3, 16:10), secondary-picture on hover and its transition, badge treatment, pricing treatment and action treatment. |
| Single Product Page | The product page design, gallery design and width, page navigation, variation picker, review layout and review form. |
| Quick View | Whether quick view is on and its design. |
| Cart & Mini Cart | The cart page design, widget placement, the header cart icon and its panel. |
| Checkout Presentation | The checkout design and the success and failure screens. |
| Directories & Customer Pages | Categories, tags, collections, bundles, comparison, My account, order history and order tracking. |
Start with the big three
The shop page, the product card and the product page decide most of the look. Choose those first, then the cart and checkout, then the details.
5 designs.
Catalog Command Center
Compact Market Board
Editorial Discovery
Luminous Gallery
Mosaic Marketplace
8 designs.
Attribute Workbench
Compact Buyline
Editorial Float
Halo Commerce
Kinetic Split
Precision Catalog
Signal Overlay
Soft Gallery
5 designs.
Commerce Command Row
Compact Marketplace Row
Editorial Story Row
Halo Split Row
Specification Strip
5 designs.
Atelier Split
Gallery Axis
Immersive Mosaic
Specification Studio
Studio Purchase Card
5 designs.
Filmstrip
Mosaic Preview
Peek Carousel
Studio Zoom
Vertical Rail
5 designs.
Compact Checkout Bridge
Editorial Ledger
Halo Cart Board
Marketplace Workspace
Warm Studio Cart
5 designs.
Calm Split
Express Command Checkout
Guided Sections
Mobile Priority Flow
Progressive Stepper
| Part | What it is | Designs |
|---|---|---|
| Collection toolbar | The sort / view / filter bar above product lists | Compact Marketplace Bar, Editorial Header Row, Floating Command Dock, Inline Ledger, Segmented Control Bar |
| Product page navigation | The tabs or anchors that jump between sections of a product page | Compact Anchor Toolbar, Compact Segmented Bar, Editorial Underline, Soft Pill Track, Vertical Section Rail |
| Variations | How customers pick size, colour and other options | Color & Image Swatches, Compact Pills, Labeled Choice Cards, Refined Select Fields, Visual Matrix |
| Reviews | The customer reviews section | Analytics Deck, Compact Verified Ledger, Editorial Feed, Review Mosaic, Studio Split |
| Review form | Where and how a customer writes a review | Below Summary, Focused Review Panel, Guided Review, Inline, Side-by-side Composer |
| Quick view | The pop-up that opens from a product card | Centered Split Modal, Commerce Side Drawer, Compact Command Card, Gallery Focus Modal, Mobile Bottom Sheet |
| Mini cart | The cart that opens from the header cart icon | Header Dropdown, Compact Header Dropdown, Header Drawer, Header Fullscreen, Header Bottom Sheet, Recommendations + Cart Drawer |
| Order confirmation and payment failed | The screens after paying (or failing to pay) | Several designs for each, for example Editorial Thank You, Fulfillment Timeline, Receipt Ledger |
| Categories, tags, collections, bundles, comparison | The directory and merchandising pages | Several designs for each |
| My account, order history, order tracking | The customer’s own pages | Several designs for each |
| Widget looks | The shell and content of the shop widgets (filters, search, product list, tag cloud, shop call to action) | Five to seven designs per widget; see Blocks & Widgets |
The shop blocks of the Page Builder have their own Layout choice, independent of the global setting. A landing page can therefore show a Mosaic Marketplace archive while your shop uses Luminous Gallery. See Blocks & Widgets.
| Symptom | What to do |
|---|---|
| The shop looks the same after I changed a design | Clear the page cache and hard-refresh. See the Store FAQ. |
| Pictures look cropped or stretched | Change the Media ratio in Product Cards & Lists to match your photos, or re-upload pictures in that ratio. |
| A page-builder block ignores my setting | The block has its own Layout. Set it to match, or leave the block to follow the global setting. |
| Some design options do nothing | Options marked with a condition appear only when their feature is on (for example the secondary-picture transition needs Secondary image). |
Store Settings · Storefront · Blocks & Widgets · Cart & Checkout