Appearance
Product and Search Components
These components show products from your catalog. Prices, stock and images always come from Magento, so they stay up to date without editing the page.
Product Carousel
Product cards for sections such as "New Arrivals", "Best Sellers" or "Featured": a row that scrolls sideways, a grid, a compact list, or a grid led by one large product.
| Setting | What it does |
|---|---|
| Title | Heading above the row |
| Products | Where the products come from: Recently Added, New Products (products within their "Set Product as New" dates in the catalog), Bestsellers or SKUs |
| Period | When Products is set to Bestsellers, which sales count: Last 30 days, This year or All time |
| SKUs | When Products is set to SKUs, the SKUs to show, separated by commas, in that order |
| Max Items | Maximum number of products |
| Layout | Carousel: one row that scrolls sideways. Grid: every product in rows. List: compact rows with a small image beside the name and price, for narrow columns. Featured: the first product large, the others in a grid beside it |
| Columns (desktop) | Number of cards, or of list columns, side by side on large screens |
| Swatches on Cards | Shows the options of configurable products on their cards, so shoppers can pick a variant and add it to the cart from the row. Off, the button opens the product page. Not shown in the List layout. On by default. |
| Show Wishlist | The wish list heart on each card, while the wish list is on in the store configuration. Off by default. |
| Show Compare | An Add to Compare button on each card, see Compare Products. On by default. |
| Show Arrows | Previous and next arrows, for the Carousel layout |
| Align | See Align |
INFO
Bestsellers come from Magento's Bestsellers report. If the row is empty, refresh the statistics in Reports › Statistics › Refresh Statistics, or make sure Magento's cron is running.
Product Listing
The product grid of a category page, with filters, sorting and pages. It is available on the category page.
| Setting | What it does |
|---|---|
| Columns (desktop) | Number of product columns on large screens |
| Products per Page | Number of products per page |
| Show Toolbar | The sorting and filter bar above the grid |
| Swatches on Cards | Shows color and size options on the cards of configurable products, so shoppers can pick a variant and add it to the cart straight from the list. On by default. |
| Show Add to Cart | The Add to Cart button on each card |
| Show Wishlist | The wish list heart on each card. Off by default. |
| Show Compare | An Add to Compare button on each card, see Compare Products. On by default. |
| Filter Position | Where the filters sit on large screens: Left column (default) or Right column beside the grid, Top bar above it, or Drawer, a panel that opens from a Filter button. On phones and tablets the filters are always in a drawer. |
The filters are the attributes you marked as filterable in the catalog, and the sort options are Magento's own.
Three slots let you add your own content around the grid:
| Slot | Where it shows |
|---|---|
| Below Title | Under the category name |
| Above Products | Above the toolbar and the grid |
| Below Products | Under the grid and the page links |
Each slot accepts layout, text, media and form components, product rows such as a Product Carousel, and the Category Attribute and Category Image Attribute components, for example to show the category image and description above the products.
Search Results
The same grid for the search results page, with the same settings apart from the toolbar, including Filter Position and Show Compare.
Advanced Search Form and Results
The advanced search page shows one field for every attribute marked Use in Advanced Search in the catalog: text fields, price ranges and dropdowns. The form has no settings. The page title above it is a separate Heading component in the default layout, so you can change it, or add a Paragraph under it for an introduction. The results page shows a product grid with Columns and Products per Page settings.
Popular Search Terms
The terms shoppers search for most, each linking to its results. Popular terms appear bigger and bolder.
| Setting | What it does |
|---|---|
| Display | Cloud sizes the terms by popularity. A–Z List groups them by first letter. |
| Text Alignment | Start, Center or End |
As on the advanced search page, the page title is a separate Heading component in the default layout; add a Paragraph under it for an introduction.
Related, Up-sell and Cross-sell Products
Rows of the products you linked in the admin, in Catalog › Products › (product) › Related Products, Up-Sells and Cross-Sells, in the order set there. They look like the Product Carousel and are hidden when there is nothing to show.
| Component | Where | What it shows |
|---|---|---|
| Related Products | Product pages | The viewed product's related products |
| Up-sell Products | Product pages | The viewed product's up-sells |
| Cross-sell Products | Cart | Cross-sells of the products in the cart, those of the last product added first, leaving out products already in the cart |
| Setting | What it does |
|---|---|
| Title | Heading above the row. Defaults: "Related Products", "We found other products you might like!" and "More Choices:" |
| Max Items | Maximum number of products |
| Columns (desktop) | Number of cards visible at once on large screens |
| Show Compare | An Add to Compare button on each card, see Compare Products. On by default. |
| Show Arrows | Previous and next arrows |
| Load after the page | On (default): the row is fetched right after the page loads, so the page itself is sent sooner. Off: the row is sent with the page and seen by search engines |
| Align | See Align |
The default design places Related Products under the product tabs; add Up-sell Products to product pages or Cross-sell Products to the cart in the editor. Cross-sell Products follows Stores › Configuration › Sales › Checkout › Shopping Cart › Show Cross-sell Items in the Shopping Cart.
Compare Products
The Compare Products page lists the products a shopper added with Add to Compare, side by side. Each column shows a product's image, name and price, with Add to Cart, Add to Wish List and a button to remove it, and below them one row for every attribute marked Comparable on Storefront in the catalog. Clear All empties the list. The page opens from the Compare Products icon in the header and is not indexed by search engines.
The Compare Products component has no settings. Open Catalog › Compare products page in the editor to add your own content around it. Since your own comparison list is often empty, the editor's preview fills it with sample products from your catalog.
The Add to Compare buttons on product cards and the header icon are on by default; the button on the product page is off until you turn it on. Each is switched by the Show Compare setting of its component: the Header Account, Product Detail, Product Listing, Search Results, Product Carousel and the Related, Up-sell and Cross-sell rows.
Product page components
Each product type has its own product page, so you can design them separately: simple and virtual, configurable, grouped, bundle and downloadable.
Product
The top of the product page: the breadcrumbs, then the product's images beside its details on large screens. On phones the images come first and the details follow. In the default layouts it holds Product Media in its Images slot and Product Detail in its Details slot.
| Setting | What it does |
|---|---|
| Image Width | How much of the row the images take on large screens: Half, Wide (default, three fifths) or Wider (two thirds) |
| Image Side | Start (default) puts the images before the details, End after them |
| Sticky Details | Keeps the details in view while the shopper scrolls past a long column of images. Off by default. |
| Slot | Where it shows | What it accepts |
|---|---|---|
| Images | The images column | Product page components such as Product Media, layout, text, media and form components, product rows, and the Product Attribute and Product Image Attribute components |
| Details | The details column | The same as Images |
Product Media
The product's images: the main image with thumbnails, which shoppers swipe through on phones. On a configurable product, the images of the option a shopper picks come first.
| Slot | Where it shows | What it accepts |
|---|---|---|
| Below Gallery | Under the images | Layout, text, media and form components, product rows, and the Product Attribute and Product Image Attribute components |
Product Detail
The product's name, SKU, rating, price, options, quantity, Add to Cart, Add to Wish List and Add to Compare. The images are in Product Media. Each product type has its own version:
| Product type | What the component adds |
|---|---|
| Simple and virtual | The standard layout |
| Configurable | Color swatches and size tiles. Picking an option updates the images and the price. |
| Grouped | Every product in the group, each with its own price and quantity |
| Bundle | The options the bundle is built from, a price range before anything is picked and a running total after |
| Downloadable | The links that can be bought, each priced separately when sold separately, and the samples shoppers can open first |
The component always shows the product being viewed.
| Setting | What it does |
|---|---|
| Show Wishlist | The Add to Wish List button under Add to Cart, while the wish list is on in the store configuration. On by default. |
| Show Compare | The Add to Compare button under Add to Cart, see Compare Products. Off by default. |
Its slots let you add your own content inside the product area:
| Slot | Where it shows | What it accepts |
|---|---|---|
| Below Price | Under the price. On grouped products it is called Below Title, since each product of the group has its own price. | Layout, text, media and form components, product rows, and the Product Attribute and Product Image Attribute components |
| Product Options | Above the quantity and Add to Cart | Only Product Custom Options, once |
| Below Add to Cart | Under the Add to Cart, Add to Wish List and Add to Compare buttons | The same as Below Price |
For example, put a Product Attribute showing the material under the price, or a Paragraph with delivery information under the Add to Cart button. To add something under the images, use the Below Gallery slot of Product Media.
Product Description
The product's full description as written in the catalog. It is usually placed in a Tab. Its Align setting is described in Align. Load when shown decides when it arrives: off, it is sent with the page and seen by search engines; on, it is fetched only when it appears on screen, for example when its tab is opened, so the page itself is sent sooner. It is off in the default design.
Product Specifications
The "More Information" table: every attribute marked visible on the storefront, with its value for this product. Its Align setting is described in Align. Load when shown decides when it arrives: off, it is sent with the page and seen by search engines; on, it is fetched only when it appears on screen, for example when its tab is opened, so the page itself is sent sooner. It is on in the default design.
Product Reviews
Approved reviews with their ratings, and the form to write one. It follows the store's review settings: it is hidden when reviews are switched off, and guests see a sign-in notice when only customers may write reviews. Reviews shown sets how many of the newest reviews are listed, and Align works as described in Align. Load when shown decides when it arrives: off, it is sent with the page and seen by search engines; on, it is fetched only when it appears on screen, for example when its tab is opened, so the page itself is sent sooner. It is on in the default design.
Product Custom Options
The custom options you added to the product in the admin, such as text fields, dropdowns, file uploads and dates, with their prices. It goes in the Product Options slot of the Product Detail component, which accepts only this component, once.
Product Attribute
The value of one attribute of the viewed product, such as its brand, material or country of manufacture, with or without its label. It can be placed anywhere on product pages, including the slots of the Product, Product Media and Product Detail components.
| Setting | What it does |
|---|---|
| Attribute | The attribute to show. The list holds every product attribute with a label, apart from image attributes and those with no text value (tier price, categories, quantity and stock status). |
| Show Label | Shows the attribute's label before the value. Off shows the value alone. |
| Label | Your own label, which can be translated. Leave it empty to use the attribute's storefront label. |
| Display | Inline puts the label and the value on one line, Stacked puts the label above the value |
| Align | See Align |
The value is shown as in the "More Information" table: option labels for dropdowns, the formatted price for price attributes, a comma-separated list for multiple choices. HTML in the value is kept only when the attribute allows HTML on the storefront. When the product has no value for the attribute, nothing is shown.
Product Image Attribute
One image of the viewed product, such as its base, small or thumbnail image, or any other image attribute you created. It can be placed anywhere on product pages.
| Setting | What it does |
|---|---|
| Attribute | The image attribute to show |
| Width (px) | Maximum width. 0 uses the full available width. |
| Justification | Where the image sits: Start, Center or End |
| Corners | Square, Rounded, More rounded or Full. Full turns a square image into a circle. |
| Align | See Align |
The image's alt text is its label from the product's images, or the product name. When the product has no image for the attribute, nothing is shown.
Price Alert and Stock Alert
The links of Magento's product alerts: Notify me when the price drops and Notify me when this product is in stock. A customer who follows one is signed up for an email when the price drops or the product is back in stock; a guest is asked to sign in first. Turn the alerts on in Stores › Configuration › Catalog › Catalog › Product Alerts.
- Price Alert shows when price alerts are allowed and the product's price is shown.
- Stock Alert shows only on a product that is out of stock, when stock alerts are allowed.
The default layouts place both in Below Add to Cart of the Product Detail component. You can move them to any other place on product pages, such as Below Price or the Below Gallery slot of Product Media, or remove them. In the editor they are always shown, so you can see where they are.
The unsubscribe link of a stock alert email opens the Stock alert unsubscribe page, which confirms the request and returns the customer to the product page. It holds the Stock Alert Unsubscribe component, which shows a loading indicator meanwhile.
Category page components
These components show information about the category being viewed. They can be placed anywhere on category pages, including the slots of the Product Listing component.
Category Attribute
The value of one attribute of the category, such as its name or description, with or without its label. Its settings are the same as those of Product Attribute: Attribute, Show Label, Label, Display and Align. HTML in the value, such as a description written with the editor, is kept only when the attribute allows HTML on the storefront. Nothing is shown when the category has no value for the attribute.
Category Image Attribute
One image of the category, such as its category image. Its settings are the same as those of Product Image Attribute: Attribute, Width (px), Justification, Corners and Align. Nothing is shown when the category has no image for the attribute.