How to format the design of "Recently Viewed" according to my template

New Member
1 0 0

Hi all,

I've tried to integrate "Recently Viewed" section using this great article.

I managed to get it to work but unfortunately couldn't get it to be designed natively just like my "You May Also Like" section (i.e max of 4 large images in desktop right next to each other, max of 2 in mobile)

Does somebody knows how to help me to build this code correctly? I'm having troubles understanding this grid and design.

Would greatly appreciate that!


Screen Shot 2020-08-23 at 17.59.50.jpg


Here's my recently-viewed.liquid snippet (that I couldn't code correctly):

{{ '//' | script_tag }}
{{ 'jquery.products.min.js' | asset_url | script_tag }}

<div class="clearfix"></div>

<div class="product-template__container page-width head-room">
  <aside class="row grid_wrapper"> 
    <div class="grid_item product product-index span-3 desktop-3 tablet-fourth">
      <div id="recently-viewed-products">
          <h2>Recently Viewed Products</h2>         

{% raw %}
<script id="recently-viewed-product-template"  type="text/x-jquery-tmpl">
	<div class="grid__item small--one-half medium-up--one-quarter" >
        <div class="image">
        	<a href="${url}"><img src="${Shopify.Products.resizeImage(featured_image, "medium")}" /></a>
        <div class="details">
        	<a href="${url}"><span class="title">${title}</span></a>
{% endraw %}

<script type="text/javascript" charset="utf-8">
  Shopify.Products.showRecentlyViewed( { howManyToShow:4 } );


Here's the product recommendation snippet with my template's grid that works beautifully.

{% if section.settings.show_product_recommendations %}
<div class="desktop-12 tablet-6 span-12 mobile-3" id="related" data-aos="{{ settings.scroll_animation }}">
  <div class="row grid_wrapper">
    <div class="product-recommendations" data-product-id="{{ }}" data-limit="4">
      {%- if recommendations.products_count > 0 -%}
        <h4 class="desktop-12 tablet-6 mobile-3 span-12">{{ section.settings.product_recommendations_heading }}</h4>
          {%- for product in recommendations.products -%}
          <div class="product product-index span-3 desktop-3 tablet-fourth">
            <a href="{{ product.url }}">
              <div class="ci">
                <img class="product__img" src="{{ product.featured_image | img_url: '1200x' }}" alt="{{ product.featured_image.alt }}" />
              <div class="product-details">
                {% if section.settings.show_recommendations_vendor %}<h4 class="product__vendor">{{ product.vendor }}</h4>{% endif %}
                <h3 class="product__title">{{ product.title }}</h3>
                <p class="product__price">{{ product.price | money}}</p>
          {%- endfor -%}
      {%- endif -%}
{% endif %}