How to Create Dynamic Slider such as - Recently Visited Products

I am using Ella 6.0 theme and website is TOAIArt.com . I need to implement a dynamic slider - ‘Recently visited Items’ on my Product page.

As I could not find any predefined- Block or Section, hence I implemented some code.

However , the result is not exactly as I expected. Instead of a proper slider going from right to left . I am getting huge images , occupying the entire screen.

Please help.

I have attached my code below . If you need to provide any new code , pls do so.

Sections => recent-products.liquid

***********************************

<h2 class="product-recommendations__heading h2 center">{{ section.settings.heading | escape }}</h2>


<ul class="recently-viewed grid product-grid grid--4-col-desktop grid--2-col-tablet-down" role="list">

<!-- Recently viewed products will appear here -->


</ul>

{% schema %}

{

"name": "Recent Products",



"settings": \[



  {



  "type": "text",



  "id": "heading",



  "default": "Recently Viewed",



  "label": "Title"



}



\]

}

{% endschema %}

*********************************************

Under Templates => product.json

**********************************************

"recent-products": {

  "type": "recent-products",

  "custom_css": \[\],

  "settings": {

    "heading": "Recently Viewed"

  }

},

“order”: [

"main",

"0ffde2f7-b16f-40b1-be64-e43934573ae9",

"1757047652808f6a5b",

"product-recently-viewed",

"product-recommendations",

"recent-products",

]

I

1 Like

Hi @SurTri

Ok dear, please share your store URL and collaborator code with me so I can check and provide you with the proper solution.

My store link is TOAIArt.com

What is Collaborator Code ?

Ella has its own recently viewed Recently Viewed Products | Ella Documentation

Maybe it’s not a Section but a block in Product section, but anyway it’s a good starting point to get proper code from…

Yes , there is a recently viewed Product section … but it is not showing any result. It is not working , for me.

Hi @SurTri

Please send me your collaborator code, so I can send a request for theme access. Once I get access, I’ll check the code and give you a proper update.

Hey @SurTri,

The requested changes requires to do the custom code in your theme file.

Could you please share your store collab code so that I can send you request for accessing the store and do the requested changes.
Thanks

8965 - Collaborator Code

1 Like

Hmm. It does work in their demo store though – https://new-ella.myshopify.com/

Hi @SurTri

I’ve sent you the request — please accept it.