Magento 2 Experten — Hyvä Theme, Tailwind CSS & SEO aus einer Hand ›

Storefront for Customers

The customer's perspective: search, checkout, customer account and wishlist in the storefront.

KAPITEL 4 Unterkapitel

Product Search and Filters

<div class="prose prose-hyva max-w-none"><p>How customers search for products in your store and use the filters in the category view.</p><p>Product search is available as a search field in the header on every storefront page. While typing, Magento (or on this project, OpenSearch as the search engine) often already shows live suggestions of matching products before the customer even submits the search.</p> <h3>Layered navigation (filters)</h3> <p>Category and search result pages usually offer a filter sidebar ("layered navigation") that lets customers narrow down results, typically by:</p> <ul> <li>Price (as a range or in price brackets)</li> <li>Attributes like color, size, material — depending on which attributes in your catalog are marked with <strong>Use in Layered Navigation</strong> (see the "Attributes and Attribute Sets" chapter)</li> <li>Categories, when a search returns hits across multiple categories</li> </ul> <p>Active filters can be removed individually again, usually via a small "×" next to the filter value. The more precisely and consistently your product attributes are maintained, the more useful the filter sidebar becomes for your customers — inconsistent values (e.g. "Red" and "red" as separate options) noticeably hurt the user experience.</p> <h3>Sorting and View Options</h3> <p>A toolbar above the product list on category and search result pages lets customers adjust the display: sorting by Position (the order you defined in the admin), Name, Price, or other enabled attributes, plus the number of products shown per page and usually a switch between grid and list view. Which sort options are available is controlled per attribute under <em>Stores &gt; Attributes &gt; Product</em> via <strong>Use in Product Listing Sort By</strong>.</p> <p><strong>Practical tip:</strong> The default "Position" sort order only pays off if you actually maintain the ordering in category editing — otherwise the result list feels arbitrarily sorted to customers.</p> <h3>Advanced Search</h3> <p>Besides the quick header search, Magento provides a dedicated advanced search page where customers can search by individual attributes such as name, SKU, description, or a price range (from/to). Which attributes appear as search fields there is likewise controlled through attribute configuration (<strong>Use in Advanced Search</strong>). In many themes — including the default Hyvä theme — the link to advanced search isn't prominently placed and may need to be deliberately added to the footer or the "no results" page.</p> <h3>Empty Result Lists and Minimum Search Length</h3> <p>If a search returns no hits, Magento shows a corresponding message instead of the product list. How many characters a customer must type at minimum before a search is even triggered is set under <em>Stores &gt; Configuration &gt; Catalog &gt; Catalog Search &gt; Minimum Query Length</em> — along with the maximum length. Setting it too low produces imprecise live suggestions; setting it too high frustrates customers searching with short terms (e.g. model numbers).</p> <img loading="lazy" src="{{media url=wysiwyg/handbuch/1kapitel/catalog13katalog.png}}" alt="catalog" /> </div>
Weiterlesen

Order Process and Checkout

<div class="prose prose-hyva max-w-none"><p>The journey from the shopping cart to a completed order from your customer's point of view.</p><p>The standard Magento checkout runs through a few clear steps:</p> <ol> <li><strong>Cart:</strong> review items, quantities, and any coupon code, then click "Proceed to Checkout".</li> <li><strong>Shipping address:</strong> enter an address or pick one from saved addresses (for logged-in customers).</li> <li><strong>Shipping method:</strong> select one of the available shipping methods with its price.</li> <li><strong>Payment method:</strong> choose one of the configured payment methods (see the "Configuring Payment Methods" chapter) and confirm the billing address if needed.</li> <li><strong>Place order:</strong> a final review, then the order is placed.</li> </ol> <p>Magento supports both <strong>guest checkout</strong> (ordering without a customer account) and ordering as a registered customer — whether guest checkout is allowed is configured under <em>Stores &gt; Configuration &gt; Sales &gt; Checkout &gt; Checkout Options</em>. Guest checkout often lowers cart abandonment, since customers don't have to create an account first — after purchase, an account can usually still be created from the order afterwards if they choose to.</p> <h3>Mini Cart (Cart Drawer)</h3> <p>When a product is added, the Hyvä theme typically opens an Alpine.js-driven cart panel as a side drawer ("mini cart") without reloading the page. There, customers can adjust quantities, remove items, and jump straight to checkout without leaving the current page. This immediate feedback ("item added") reduces uncertainty and, with it, cart abandonment.</p> <h3>Applying a Coupon Code</h3> <p>The cart page offers a collapsible "Enter discount code" field. After entering a valid code, the discount becomes visible immediately in the totals summary. By default, Magento allows only one coupon code to be active at a time — a new code replaces the previous one rather than stacking with it. If a code is invalid or expired, a corresponding error message appears right at the field.</p> <h3>Required Fields and Terms and Conditions Agreement</h3> <p>Before finally placing the order, a required checkbox agreeing to your terms and conditions can be shown. This is enabled under <em>Stores &gt; Configuration &gt; Sales &gt; Checkout &gt; Checkout Options &gt; Enable Terms and Conditions</em>; the actual text blocks are maintained under <em>Stores &gt; Terms and Conditions</em>. Without the checkbox ticked, the "Place Order" button stays inactive, or the order is rejected with an error message.</p> <img loading="lazy" src="{{media url=wysiwyg/handbuch/1kapitel/checkout13kategorie.png}}" alt="checkout" /> <h3>Saved Payment Methods (Vault)</h3> <p>If your payment provider supports Magento's Vault module (e.g. certain credit card or PayPal integrations), returning customers can securely save their payment details as a token and reuse them with one click on their next order, without re-entering the data. Whether and for which payment method Vault is available depends on the specific payment module — not every payment method supports this.</p></div>
Weiterlesen

Customer Account in the Shop

<div class="prose prose-hyva max-w-none"><p>What customers can see and manage in their own account: orders, addresses, personal data.</p><p>Logged-in customers reach their account through the account area in the header. There they typically have access to:</p> <ul> <li><strong>Order History:</strong> every past order with status, the option to reorder ("Reorder"), and invoice/shipment PDF downloads.</li> <li><strong>Addresses:</strong> save multiple shipping and billing addresses and set a default one — considerably speeds up future orders.</li> <li><strong>Account Information:</strong> change name, email address, and password.</li> <li><strong>Wish List</strong> and, if enabled, a <strong>Compare List</strong> (see the next chapter).</li> <li><strong>Newsletter settings:</strong> subscribe/unsubscribe directly from the account.</li> </ul> <p>These areas are largely provided directly by Magento and generally need no backend configuration — your job as the store owner is mainly to make sure registration is easy and account management is easy to find (e.g. a clearly visible account link in the header).</p> <h3>Registration and Password Requirements</h3> <p>When creating an account, Magento by default asks for first and last name, email address, and password. How strict the password policy is (minimum length, required character classes) is set under <em>Stores &gt; Configuration &gt; Customers &gt; Customer Configuration &gt; Password Options</em>. That same section also lets you require email confirmation ("Require Emails Confirmation") — the customer then has to click a confirmation link before they can log in.</p> <img loading="lazy" src="{{media url=wysiwyg/handbuch/1kapitel/password13kategorie.png}}" alt="password" /> <h3>Password Reset</h3> <p>Via "Forgot Your Password?" on the login form, customers request a reset link by email. This link is only valid for a limited time — the validity period is likewise configured in Customer Configuration ("Recovery Link Expiration Period"). Once it expires, a new link has to be requested; for security reasons, the error message doesn't reveal whether the entered email address is actually registered.</p> <h3>Order Detail Page and Shipment Tracking</h3> <p>When a customer opens an individual order from the order history, they see every line item, price, the shipping and payment method used, and the current status. If shipment has already taken place and a tracking number was added to the shipment in the admin, a link to the carrier's tracking page appears there as well.</p> <h3>My Product Reviews</h3> <p>If the review module (Magento_Review) is active and included in the theme, customers find an overview of every product review they've submitted, including its approval status, under "My Product Reviews" — useful for them to check whether a review has already been approved by you as the store owner.</p></div>
Weiterlesen

Wishlist and Compare List

How customers add products to their wishlist or compare several products side by side.

Two native Magento features help customers get an overview before buying:

Wish List

Via a heart icon on product cards or the product detail page, logged-in customers can add products to their personal wish list — useful for saving items for later or sharing them with others (Magento offers a "Share Wishlist" feature via email for this). Whether guests (non-logged-in visitors) see this feature depends on configuration and theme — a customer account is generally required.

Compare Products

A corresponding button lets customers add multiple products to a compare list, which lays out all relevant attributes (price, dimensions, technical specs) side by side in a table. This is especially helpful for products with many technical specifications (electronics, furniture) during the purchase decision.

Both features are standard Magento functionality and normally need no extra backend configuration — if they're not visible on the storefront, first check whether the current theme even includes them in its layout (Hyvä themes sometimes deliberately trim these to keep the page lean).

Comments on Wish List Items

When adding a product to the wish list, customers can optionally attach a personal comment (e.g. "Size M, for a birthday"). This comment stays attached to that entry and can be edited later directly in the wish list — handy when a customer saves several variants of a product and later can't recall the exact reason.

Adding to Cart from the Wish List

Every wish list entry can be moved to the cart individually with a click; the wish list page also usually offers an "Add All to Cart" button that adds every in-stock item at once. Products that are no longer available or out of stock are automatically skipped or flagged accordingly.

Managing the Compare List

Products are added to the compare list via a button on the product card or the product detail page; a small counter icon in the header shows the current number of compared products. On the compare page itself, each item can be removed individually, or the entire list can be reset via "Clear All".

One Wish List per Customer

In Magento Open Source, every customer has exactly one wish list — multiple themed wish lists (e.g. "Gifts" and "For Myself") are an Adobe Commerce feature ("Multiple Wish Lists") and not included in the Open Source core. Anyone who needs that kind of separation has to work around it with individual comments (see above) or an extension.

Weiterlesen