{"id":17765,"date":"2025-07-15T15:23:02","date_gmt":"2025-07-15T09:53:02","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=17765"},"modified":"2025-07-15T15:23:04","modified_gmt":"2025-07-15T09:53:04","slug":"customize-recently-viewed-products-in-hyva","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/customize-recently-viewed-products-in-hyva\/","title":{"rendered":"How to Customize Recently Viewed Products in Hyv\u00e4?\u00a0"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Hyv\u00e4, by default, provides a recently viewed products section, which can be enabled with just a few simple steps.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Navigate to <strong>Stores > Configuration > Catalog > Catalog > Recently Viewed\/Compared Products and <\/strong>set the \u201cEnable Recently Viewed Products\u201d option to \u201c<strong>Yes.<\/strong>\u201d<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1072\" height=\"812\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/1-Enable-Recently-Viewed-Products.png\" alt=\"Enable recently viewed products\" class=\"wp-image-17776\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/1-Enable-Recently-Viewed-Products.png 1072w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/1-Enable-Recently-Viewed-Products-250x189.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/1-Enable-Recently-Viewed-Products-700x530.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/1-Enable-Recently-Viewed-Products-768x582.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/1-Enable-Recently-Viewed-Products-403x305.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/1-Enable-Recently-Viewed-Products-964x730.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/1-Enable-Recently-Viewed-Products-120x91.png 120w\" sizes=\"auto, (max-width: 1072px) 100vw, 1072px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once enabled, you will see the Recently Viewed Products block on the frontend.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1115\" height=\"520\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/2-Recently-Viewed-Products-Block-on-the-Frontend.png\" alt=\"Recently viewed products block on the frontend\" class=\"wp-image-17772\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/2-Recently-Viewed-Products-Block-on-the-Frontend.png 1115w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/2-Recently-Viewed-Products-Block-on-the-Frontend-250x117.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/2-Recently-Viewed-Products-Block-on-the-Frontend-700x326.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/2-Recently-Viewed-Products-Block-on-the-Frontend-768x358.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/2-Recently-Viewed-Products-Block-on-the-Frontend-403x188.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/2-Recently-Viewed-Products-Block-on-the-Frontend-964x450.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/2-Recently-Viewed-Products-Block-on-the-Frontend-120x56.png 120w\" sizes=\"auto, (max-width: 1115px) 100vw, 1115px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">However, the default design may not always align with the overall aesthetics of your website. To maintain design consistency and enhance user experience, customizing the recently viewed products section using Tailwind CSS is highly recommended.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Why Customize?<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ensures consistency with your site\u2019s visual design using Tailwind CSS<\/li>\n\n\n\n<li>Improves performance and responsiveness, especially on mobile devices<\/li>\n\n\n\n<li>Increases product visibility and boosts conversions by encouraging users to revisit previously viewed items<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">To achieve this, you will need to override both the frontend templates and potentially the logic behind them.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Steps to Customize Recently Viewed Products in Hyv\u00e4:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Update product-slider-container.phtml at:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">app\/design\/frontend\/Meetanshi\/hyva_werra\/Magento_Catalog\/templates\/product\/slider\/product-slider-container.phtml<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n\/**\n * Hyv\u00e4 Themes - https:\/\/hyva.io\n * Copyright \u00a9 Hyv\u00e4 Themes 2020-present. All rights reserved.\n * This product is licensed per Magento install\n * See https:\/\/hyva.io\/license\n *\/\n\ndeclare(strict_types=1);\n\nuse Hyva\\Theme\\Model\\ViewModelRegistry;\nuse Hyva\\Theme\\ViewModel\\Cart\\Items as CartItems;\nuse Hyva\\Theme\\ViewModel\\ProductCompare;\nuse Hyva\\Theme\\ViewModel\\ProductList;\nuse Hyva\\Theme\\ViewModel\\Slider;\nuse Hyva\\Theme\\ViewModel\\Store;\nuse Hyva\\Theme\\ViewModel\\Wishlist;\nuse Magento\\Catalog\\Model\\Product\\Visibility as ProductVisibility;\nuse Magento\\Framework\\Escaper;\nuse Magento\\Framework\\View\\Element\\Template;\n\n\/** @var Template $block *\/\n\/** @var Escaper $escaper *\/\n\/** @var ViewModelRegistry $viewModels *\/\n\/** @var Slider $sliderViewModel *\/\n\/** @var ProductList $productListViewModel *\/\n\/** @var Wishlist $wishlistViewModel *\/\n\/** @var ProductCompare $compareViewModel *\/\n\/** @var Store $storeViewModel *\/\n\n$sliderViewModel      = $viewModels->require(Slider::class);\n$productListViewModel = $viewModels->require(ProductList::class);\n$wishlistViewModel    = $viewModels->require(Wishlist::class);\n$compareViewModel     = $viewModels->require(ProductCompare::class);\n$storeViewModel       = $viewModels->require(Store::class);\n\n$sliderName        = str_replace('.', '_', $block->getNameInLayout());\n$categoryIds       = $block->getData('category_ids') ?: '';\n$isAnchorCategory  = $block->getData('include_child_category_products');\n$pageSize          = $block->getData('page_size') ?: 8;\n$priceFrom         = $block->getData('price_from');\n$priceTo           = $block->getData('price_to');\n$sortAttribute     = $block->getData('sort_attribute') ?: '';\n$sortDirection     = $block->getData('sort_direction') ?: 'ASC';\n$title             = $block->getData('title') ?: '';\n$headingTag        = $block->getData('heading_tag') ?: 'h3';\n$hideDetails       = $block->getData('hide_details') ?? false;\n$hideRatingSummary = $block->getData('hide_rating_summary') ?? false;\n$type              = $block->getData('type');\n$skusFilter        = $block->getData('product_skus') ? explode(',', $block->getData('product_skus')) : [];\n$additionalFilters = (array) $block->getData('additional_filters');\n$itemTemplate      = $block->getData('item_template') ?? 'Magento_Catalog::product\/list\/item.phtml';\n$containerTemplate = $block->getData('container_template')\n    ?? 'Magento_Catalog::product\/slider\/product-slider-container.phtml';\n\n\n\/\/ The number of slides visible on the xl breakpoint\n$maxVisibleSlides = $block->getData('max_visible'); \/\/ default to null\n\/\/ Passed to the product slider container\n$slideSectionClasses = $block->getData('maybe_purged_tailwind_section_classes'); \/\/ default to null\n$slideItemClasses = $block->getData('maybe_purged_tailwind_slide_item_classes'); \/\/ default to null\n\n\n\/\/ In case $type is not set on the block, it will default the block class name, which is not what we need in this template.\n$type = is_string($type) &amp;&amp; strpos($type, '\\\\') === false  ? $type : 'generic';\n\nif ($categoryIds) {\n    $productListViewModel->addFilter('category_id', $categoryIds, 'in');\n}\n\nif ($isAnchorCategory) {\n    \/\/ Only has an effect if a single category ID filter is set, and that category is an anchor category\n    $productListViewModel->includeChildCategoryProducts();\n}\n\nif ($priceFrom) {\n    $productListViewModel->addFilter('price', $priceFrom, 'gteq');\n}\nif ($priceTo) {\n    $productListViewModel->addFilter('price', $priceTo, 'lteq');\n}\n\nif ($hideRatingSummary) {\n    $productListViewModel->excludeReviewSummary();\n}\n\nif ($skusFilter) {\n    $productListViewModel->addFilter('sku', array_map('trim', $skusFilter), 'in');\n}\n\nforeach ($additionalFilters as $filter) {\n    $productListViewModel->addFilter($filter['field'], $filter['value'], $filter['conditionType'] ?? 'eq');\n}\n\n$productListViewModel->setPageSize($pageSize);\n$productListViewModel->addFilter('website_id', $storeViewModel->getWebsiteId());\n$productListViewModel->addFilter('visibility', [\n    ProductVisibility::VISIBILITY_IN_CATALOG,\n    ProductVisibility::VISIBILITY_BOTH,\n], 'in');\nif ($sortAttribute) {\n    $sortDirection === 'ASC'\n        ? $productListViewModel->addAscendingSortOrder($sortAttribute)\n        : $productListViewModel->addDescendingSortOrder($sortAttribute);\n}\n\nif (in_array($type, ['related', 'upsell', 'crosssell'], true)) {\n\n    $items = $type === 'crosssell'\n        ? $productListViewModel->getCrosssellItems(...$viewModels->require(CartItems::class)->getCartItems())\n        : $productListViewModel->getLinkedItems($type, $block->getProduct());\n\n} else {\n    $items = $productListViewModel->getItems();\n}\n\n$sliderHtml = $sliderViewModel->getSliderForItems($itemTemplate, $items, $containerTemplate)\n    ->setData('hide_details', $hideDetails)\n    ->setData('hide_rating_summary', $hideRatingSummary)\n    ->setData('name', $sliderName)\n    ->setData('title', $title)\n    ->setData('item_relation_type', $type)\n    ->setData('heading_tag', $headingTag)\n    ->setData('max_visible', $maxVisibleSlides)\n    ->setData('maybe_purged_tailwind_section_classes', $slideSectionClasses)\n    ->setData('maybe_purged_tailwind_slide_item_classes', $slideItemClasses)\n    ->toHtml();\n\nif (empty($sliderHtml)) {\n    return '';\n}\n$actionName = $this->getRequest()->getFullActionName();\n$container = 'container';\nif($actionName == 'catalog_product_view'){\n    $container = '';\n}\n?>\n&lt;div class=\"product-slider &lt;?= $container ?> &lt;?= $escaper->escapeHtmlAttr($type) ?>-product-slider\">\n    &lt;div>\n        &lt;?= \/* @noEscape *\/ $sliderHtml ?>\n    &lt;\/div>\n    &lt;script>\n        'use strict';\n        window.addEventListener('DOMContentLoaded', function() {\n            if (! window.productSliderEventHandlerInitialized) {\n                window.productSliderEventHandlerInitialized = true;\n\n                &lt;?php if ($wishlistViewModel->isEnabled()): ?>\n                window.addEventListener('product-add-to-wishlist', (event) => {\n                    const formKey = hyva.getFormKey();\n                    const postUrl = BASE_URL + 'wishlist\/index\/add\/';\n                    const productId = event.detail.productId;\n\n                    fetch(postUrl, {\n                        \"headers\": {\n                            \"content-type\": \"application\/x-www-form-urlencoded; charset=UTF-8\",\n                        },\n                        \"body\": \"form_key=\" + formKey + \"&amp;product=\" + productId + \"&amp;uenc=\" + hyva.getUenc(),\n                        \"method\": \"POST\",\n                        \"mode\": \"cors\",\n                        \"credentials\": \"include\"\n                    }).then(function (response) {\n                        if (response.redirected) {\n                            window.location.href = response.url;\n                        } else if (response.ok) {\n                            return response.json();\n                        } else {\n                            typeof window.dispatchMessages !== \"undefined\" &amp;&amp; window.dispatchMessages(\n                                [{\n                                    type: \"warning\",\n                                    text: \"&lt;?= $escaper->escapeHtml(__('Could not add item to wishlist.')) ?>\"\n                                }], 5000\n                            );\n                        }\n                    }).then(function (result) {\n                        if (!result) {\n                            return\n                        }\n                        typeof window.dispatchMessages !== \"undefined\" &amp;&amp; window.dispatchMessages(\n                            [{\n                                type: (result.success) ? \"success\" : \"error\",\n                                text: (result.success)\n                                    ? \"&lt;?=\n                                        $escaper->escapeHtml(\n                                            __(\"%1 has been added to your Wish List.\", __(\"Product\"))\n                                        )\n                                        ?>\" : result.error_message\n                            }], 5000\n                        );\n                        window.dispatchEvent(new CustomEvent(\"reload-customer-section-data\"));\n                    }).catch(function (error) {\n                        typeof window.dispatchMessages !== \"undefined\" &amp;&amp; window.dispatchMessages(\n                            [{\n                                type: \"error\",\n                                text: error\n                            }], 5000\n                        );\n                    });\n                })\n                &lt;?php endif; ?>\n\n                &lt;?php if ($compareViewModel->showInProductList()): ?>\n                window.addEventListener('product-add-to-compare', (event) => {\n                    const productId = event.detail.productId;\n                    hyva.postForm({\n                        action: BASE_URL + 'catalog\/product_compare\/add\/',\n                        data: {product: productId}\n                    })\n                })\n                &lt;?php endif; ?>\n            }\n        });\n    &lt;\/script>\n&lt;\/div>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Update <strong>product-slider.phtml<\/strong> at:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">app\/design\/frontend\/Meetanshi\/hyva_werra\/Magento_Catalog\/templates\/product\/slider\/product-slider.phtml<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\n\/**\n * Hyv\u00e4 Themes - https:\/\/hyva.io\n * Copyright \u00a9 Hyv\u00e4 Themes 2020-present. All rights reserved.\n * This product is licensed per Magento install\n * See https:\/\/hyva.io\/license\n *\/\n\ndeclare(strict_types=1);\n\nuse Hyva\\Theme\\Model\\ViewModelRegistry;\nuse Hyva\\Theme\\ViewModel\\HeroiconsOutline;\nuse Hyva\\Theme\\ViewModel\\ProductListItem;\nuse Hyva\\Theme\\ViewModel\\ProductPage;\nuse Hyva\\Theme\\ViewModel\\Store;\nuse Magento\\Catalog\\Block\\Product\\ReviewRendererInterface as ProductReviewRenderer;\nuse Magento\\Framework\\Escaper;\nuse Magento\\Framework\\View\\Element\\Template;\n\n\/\/ phpcs:disable Generic.Files.LineLength.TooLong\n\n\/** @var Template $block *\/\n\/** @var Escaper $escaper *\/\n\/** @var ViewModelRegistry $viewModels *\/\n\n\/** @var Store $viewModelStore *\/\n$viewModelStore = $viewModels->require(Store::class);\n\n\/** @var ProductPage $productViewModel *\/\n$productViewModel = $viewModels->require(ProductPage::class);\n\n\/** @var HeroiconsOutline $heroicons *\/\n$heroicons = $viewModels->require(HeroiconsOutline::class);\n\n\/** @var ProductListItem $productListItemViewModel *\/\n$productListItemViewModel = $viewModels->require(ProductListItem::class);\n\n$viewMode = 'grid';\n$imageDisplayArea = 'category_page_grid';\n$showDescription = false;\n\n$name = (string) $block->getName();\n$title = (string) $block->getTitle();\n$headingTag = $block->getData('heading_tag') ?: 'h3';\n$items = $block->getItems() ?? [];\nif (is_object($items) &amp;&amp; $items instanceof Iterator) {\n    $items = iterator_to_array($items);\n}\nif (!$itemCount = count($items)) {\n    return '';\n}\n\n$sliderIndex = 1;\n$sliderItemRenderer = $block->getLayout()->getBlock('product_list_item')\n    ?: $block->getChildBlock('slider.item.template')\n    ?: $block->getLayout()->createBlock(Template::class);\n\n$hideRatingSummary = true;\n$hideDetails       = true;\n\n$sliderItemRenderer->setData('hide_details', $hideDetails);\n$sliderItemRenderer->setData('hide_rating_summary', $hideRatingSummary);\n\n\/\/ The slider item renderer block is often a shared instance.\n\/\/ If a specific item template is set for this slider, the previously set template must be reset later\n\/\/ so the item template is only replaced for the one slider it is specified on.\n$sharedItemRendererTemplate = null;\n$isSharedItemRenderer       = $sliderItemRenderer !== $block->getChildBlock('slider.item.template');\nif ($isSharedItemRenderer &amp;&amp; $block->getChildBlock('slider.item.template')) {\n    $sharedItemRendererTemplate = $sliderItemRenderer->getTemplate();\n    $sliderSpecificItemTemplate = $block->getChildBlock('slider.item.template')->getTemplate();\n    $sliderItemRenderer->setTemplate($sliderSpecificItemTemplate);\n}\n\n\/\/ The number of slides visible on the xl breakpoint\n$maxVisibleSlides = $block->getData('max_visible') ?? 4;\n\n\/\/ Breakpoints for 1 visible slider items on mobile, 2 visible on md, 3 on lg and 4 on xl (see $sliderPageSize).\n$defaultSliderItemClasses = 'md:w-1\/2 lg:w-1\/3 xl:w-1\/4';\n\n$sliderSectionClasses = $block->getData('maybe_purged_tailwind_section_classes') ?? 'my-4 md:my-6 lg:my-8 xl:my-12 text-gray-700 body-font';\n$slideItemClasses = $block->getData('maybe_purged_tailwind_slide_item_classes') ?? $defaultSliderItemClasses;\n\n?>\n&lt;script>\n    'use strict';\n\n    function initSliderComponent() {\n        return {\n            active: 0,\n            itemCount: 0,\n            getSlider() {\n                return this.$root.querySelector('.js_slides');\n            },\n            pageSize: 4,\n            pageFillers: 0,\n            calcPageSize() {\n                const slider = this.getSlider();\n                if (slider) {\n                    this.itemCount = slider.querySelectorAll('.js_slide').length;\n                    this.pageSize = Math.round(slider.clientWidth \/ slider.querySelector('.js_slide').clientWidth);\n                    this.pageFillers = (\n                        this.pageSize * Math.ceil(this.itemCount \/ this.pageSize)\n                    ) - this.itemCount;\n                }\n            },\n            calcActive() {\n                const slider = this.getSlider();\n                if (slider) {\n                    const sliderItems = this.itemCount + this.pageFillers;\n                    const calculatedActiveSlide = slider.scrollLeft \/ (slider.scrollWidth \/ sliderItems);\n                    this.active = Math.round(calculatedActiveSlide \/ this.pageSize) * this.pageSize;\n                }\n            },\n            scrollPrevious() {\n                this.scrollTo(this.active - this.pageSize);\n            },\n            scrollNext() {\n                this.scrollTo(this.active + this.pageSize);\n            },\n            scrollTo(idx) {\n                const slider = this.getSlider();\n                if (slider) {\n                    const slideWidth = slider.scrollWidth \/ (this.itemCount + this.pageFillers);\n                    slider.scrollLeft = Math.floor(slideWidth) * idx;\n                    this.active = idx;\n                }\n            },\n            skipCarouselToNavigation(navSelector) {\n                const element = document.getElementById(navSelector)\n                if (element) {\n                    element.scrollIntoView({behavior: 'smooth', block: 'end'});\n                    const button = element.querySelector('button:not([disabled])');\n                    this.$nextTick(() => button &amp;&amp; button.focus({preventScroll: true}))\n                }\n            }\n        }\n    }\n&lt;\/script>\n&lt;section\n    class=\"&lt;?= $escaper->escapeHtmlAttr($sliderSectionClasses) ?>\"\n    x-data=\"initSliderComponent()\"\n    x-init=\"calcPageSize();\"\n    x-id=\"['slider-nav', 'slider-desc', 'slider-id']\"\n    @resize.window.debounce=\"calcPageSize(); $nextTick( function() { calcActive() })\"\n    role=\"group\"\n    aria-roledescription=\"&lt;?= $escaper->escapeHtmlAttr(__('Carousel')) ?>\"\n    aria-label=\"&lt;?= $escaper->escapeHtmlAttr(__('Carousel %1', $title)) ?>\"\n    :aria-describedby=\"$id('slider-desc')\"\n    x-defer=\"intersect\"\n>\n    &lt;?php if ($items): ?>\n        &lt;div class=\"relative\">\n            &lt;?php if ($title): ?>\n\n                &lt;div class=\"justify-between flex items-center xl:pt-6 xl:pb-3 mx-auto md:flex-row\">\n                    &lt;&lt;?= \/* @noEscape *\/ $headingTag ?> class=\"text-[20px] md:text-[40px] text-th-primary-default title-font\">\n                        &lt;?= \/* @noEscape *\/ $title ?>\n                    &lt;\/&lt;?= \/* @noEscape *\/ $headingTag ?>>\n                    &lt;div>\n                        &lt;template x-if=\"itemCount > pageSize\">\n                            &lt;div\n                                class=\"gap-3 flex items-center justify-center py-4\"\n                                :id=\"$id('slider-nav')\"\n                            >\n                                &lt;button\n                                    type=\"button\"\n                                    aria-label=\"&lt;?= $escaper->escapeHtmlAttr(__('Previous slide')) ?>\"\n                                    :disabled=\"active === 0\"\n                                    class=\"bg-th-primary-lighter text-white flex-none p-1 md:p-3\"\n                                    :class=\"{ 'opacity-25 pointer-events-none' : active === 0 }\"\n                                    @click=\"scrollPrevious\"\n                                >\n                                    &lt;?= $heroicons->chevronLeftHtml(\"w-5 h-5\", 25, 25, ['aria-hidden' => 'true']) ?>\n                                &lt;\/button>\n                                \n                                &lt;button\n                                    aria-label=\"&lt;?= $escaper->escapeHtmlAttr(__('Next slide')) ?>\"\n                                    :disabled=\"active >= itemCount-pageSize\"\n                                    class=\"bg-th-primary-lighter text-white flex-none p-1 md:p-3\"\n                                    :class=\"{ 'opacity-25 pointer-events-none' : active >= itemCount-pageSize }\"\n                                    @click=\"scrollNext\"\n                                 >\n                                    &lt;?= $heroicons->chevronRightHtml(\"w-5 h-5\", 25, 25, ['aria-hidden' => 'true']) ?>\n                                &lt;\/button>\n                            &lt;\/div>\n                        &lt;\/template>\n                    &lt;\/div>\n                &lt;\/div>\n            &lt;?php endif; ?>\n            &lt;span\n                class=\"sr-only\"\n                :id=\"$id('slider-desc')\"\n                tabindex=\"-1\"\n            >\n                &lt;?= $escaper->escapeHtml(__('Navigating through the elements of the carousel is possible using the tab key. You can skip the carousel or go straight to carousel navigation using the skip links.')) ?>\n            &lt;\/span>\n\n            &lt;a\n                href=\"#&lt;?= $escaper->escapeHtmlAttr($name) ?>-slider-end\"\n                class=\"action skip sr-only\"\n            >\n                &lt;?= $escaper->escapeHtml(__('Press to skip carousel')) ?>\n            &lt;\/a>\n            &lt;button\n                x-show=\"itemCount > pageSize\"\n                type=\"button\"\n                class=\"action skip sr-only \"\n                @click.prevent=\"skipCarouselToNavigation($id('slider-nav'))\"\n            >\n                &lt;?= $escaper->escapeHtml(__('Press to go to carousel navigation')) ?>\n            &lt;\/button>\n            \n            &lt;div class=\"flex-none relative w-full ring-offset-2 active:ring-0 ring-blue-500\/50\">\n                &lt;div class=\"relative flex flex-nowrap -mx-1 overflow-auto js_slides snap\"\n                     @scroll.debounce=\"calcActive\"\n                >\n                    &lt;?php foreach ($items as $product): ?>\n                        &lt;div class=\"js_slide flex shrink-0 w-full p-1 &lt;?= $escaper->escapeHtmlAttr($slideItemClasses) ?>\"\n                             role=\"group\"\n                             aria-label=\"&lt;?= $escaper->escapeHtmlAttr(__('Item %1', $sliderIndex++)) ?>\"\n                             :aria-describedby=\"`slide-desc-&lt;?= $escaper->escapeHtmlAttr($product->getId()) ?>-${$id('slider-id')}`\"\n                        >\n                            &lt;?= \/** @noEscape *\/ $productListItemViewModel->getItemHtmlWithRenderer(\n                                $sliderItemRenderer,\n                                $product,\n                                $block,\n                                $viewMode,\n                                ProductReviewRenderer::SHORT_VIEW,\n                                $imageDisplayArea,\n                                $showDescription\n                            ) ?>\n                        &lt;\/div>\n                    &lt;?php endforeach; ?>\n                    &lt;?php for ($i = 0; $i &lt; $maxVisibleSlides; $i++): \/* Add empty filler slides in case the number of items is not dividable by the pagesize *\/ ?>\n                        &lt;div :class=\"{\n                        'js_dummy_slide w-full flex-none &lt;?= $escaper->escapeJs($slideItemClasses) ?>' : pageFillers > &lt;?= (int) $i ?>\n                        }\">&lt;\/div>\n                    &lt;?php endfor; ?>\n                &lt;\/div>\n            &lt;\/div>\n            \n            &lt;span id=\"&lt;?= $escaper->escapeHtmlAttr($name) ?>-slider-end\" tabindex=\"-1\">&lt;\/span>\n        &lt;\/div>\n    &lt;?php endif; ?>\n&lt;\/section>\n&lt;?php\n\nif ($sharedItemRendererTemplate) {\n    $sliderItemRenderer->setTemplate($sharedItemRendererTemplate);\n}\n\n?>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">After applying this code, the recently viewed product section will look something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1164\" height=\"510\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/3-Recently-Viewed-Product-Section-After-Adding-Second-Code.png\" alt=\"Recently viewed product section after adding second code\" class=\"wp-image-17774\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/3-Recently-Viewed-Product-Section-After-Adding-Second-Code.png 1164w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/3-Recently-Viewed-Product-Section-After-Adding-Second-Code-250x110.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/3-Recently-Viewed-Product-Section-After-Adding-Second-Code-700x307.png 700w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/3-Recently-Viewed-Product-Section-After-Adding-Second-Code-768x336.png 768w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/3-Recently-Viewed-Product-Section-After-Adding-Second-Code-403x177.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/3-Recently-Viewed-Product-Section-After-Adding-Second-Code-964x422.png 964w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/07\/3-Recently-Viewed-Product-Section-After-Adding-Second-Code-120x53.png 120w\" sizes=\"auto, (max-width: 1164px) 100vw, 1164px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">These templates can be tailored to implement your preferred layout, styling, and behavior, using Hyv\u00e4\u2019s Alpine.js and Tailwind CSS approach.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By leveraging Hyv\u00e4\u2019s flexible structure and modern tools like Tailwind CSS, you can tailor this feature to match your store\u2019s design and functionality needs.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With just a few template overrides, your storefront can provide a seamless, mobile-optimized view that encourages conversions and keeps customers engaged.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also looking for a ready to use template? Try out <a href=\"https:\/\/meetanshi.com\/hyva-theme-templates\/werra\">Hyv\u00e4 Werra theme templates<\/a>\u2014carefully crafted for modern design and optimal user experience.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hyv\u00e4, by default, provides a recently viewed products section, which can be enabled with just a few simple steps. Navigate to Stores > Configuration >&#8230;<\/p>\n","protected":false},"author":5,"featured_media":17781,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5869],"tags":[],"class_list":["post-17765","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hyva-themes"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/17765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=17765"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/17765\/revisions"}],"predecessor-version":[{"id":20171,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/17765\/revisions\/20171"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media\/17781"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=17765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=17765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=17765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}