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