Personalized checkout and custom promotions with Shopify Scripts
Hello Community,
I'm using using below script code to show related product on Cart page the script working perfect but the issue it related products are shown in vertically.. is there any way to show related product in carousel or horizontally?
Script code is
{% assign heading = 'You may also like' %}
<div class="related-div ">
<div class="cart-related shopify-section index-section " id="shopify-section-featured-collections">
<div class="page-width">
<div class="section-header text-center"><h2>{{ heading }}</h2></div>
<ul class="grid grid--uniform grid--view-items">
{% assign prod_handle = '' %}
{% assign item_handle = '' %}
{% for item in cart.items %}
{%assign item_handle = item_handle | append: item.product.handle | append: ';' %}
{% endfor %}
{% for item in cart.items %}
{% for col_item in item.product.collections %}
{% for prod in col_item.products %}
{% if prod_handle contains prod.handle or item_handle contains prod.handle %}
{% else %}
<div class="cre_item {{ prod.handle }}">
<div class="related-item grid__item grid__item--featured-collections small--one-half medium-up--one-fif2th {{ prod.handle }}" style="">
<div class="grid-view-item product-card">
<div class="image">
<a href="{{ prod.url | within: collection }}" title="{{ product.title | escape }}">
{{ prod.featured_image | product_img_url: "medium" | img_tag}}
</a>
</div>
<div class="name h5 grid-view-item__title">
<a href="{{ prod.url }}" title="{{ prod.title | escape }}">{{ prod.title }}</a>
</div>
<div class="price">
<span class="price-item price-item--regular" data-regular-price="">
{{ prod.price | money }}
</span>
</div>
<div class="quick-view-button" style="display: none;">
<a class="sca-qv-button button-quick-view" href="#sca-qv-showqv" title="Quick Add" handle="{{ prod.handle }}" style="font-family: tahoma; font-size: 14px; color: rgb(255, 255, 255); background-color: rgb(0, 0, 0);">QUICK VIEW</a>
</div>
</div>
{%assign prod_handle = prod_handle | append: prod.handle | append: ';' %}
<div class="clear"></div>
</div>
</div>
{% endif %}
{% endfor %}
{% endfor %}
{% endfor %}
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(".related-div").hide();
if($(".cre_item").text()){
$(".related-div").show();
}
</script>
Current view of related product in cart page is vertical
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024