Marquee effect on related products

Shopify Discussion
1

Is it possible that someone could add a marquee effect to this code for my related products section:

{{ ‘component-card.css’ | asset_url | stylesheet_tag }}
{{ ‘component-price.css’ | asset_url | stylesheet_tag }}
{{ ‘section-related-products.css’ | asset_url | stylesheet_tag }}

{% if section.settings.image_shape == ‘blob’ %}
{{ ‘mask-blobs.css’ | asset_url | stylesheet_tag }}
{%- endif -%}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}

/* Added spacing between product cards /
.grid__item {
margin-right: 4px; / Set to 4px /
}
/ Remove margin from the last item */
.grid__item:last-child {
margin-right: 0;
}
{%- endstyle -%}

{% if recommendations.performed and recommendations.products_count > 0 %}

{{ section.settings.heading }}

    {% for recommendation in recommendations.products %}
  • {% render 'card-product', card_product: recommendation, media_aspect_ratio: section.settings.image_ratio, image_shape: section.settings.image_shape, show_secondary_image: section.settings.show_secondary_image, show_vendor: section.settings.show_vendor, show_rating: section.settings.show_rating %}
    • {% endfor %}
{% endif %} {% if section.settings.image_shape == 'arch' %} {% render 'mask-arch' %} {%- endif -%}

{% schema %}
{
“name”: “t:sections.related-products.name”,
“tag”: “section”,
“class”: “section”,
“settings”: [
{
“type”: “paragraph”,
“content”: “t:sections.related-products.settings.paragraph__1.content”
},
{
“type”: “inline_richtext”,
“id”: “heading”,
“default”: “You may also like”,
“label”: “t:sections.related-products.settings.heading.label”
},
{
“type”: “select”,
“id”: “heading_size”,
“options”: [
{
“value”: “h2”,
“label”: “t:sections.all.heading_size.options__1.label”
},
{
“value”: “h1”,
“label”: “t:sections.all.heading_size.options__2.label”
},
{
“value”: “h0”,
“label”: “t:sections.all.heading_size.options__3.label”
}
],
“default”: “h1”,
“label”: “t:sections.all.heading_size.label”
},
{
“type”: “range”,
“id”: “products_to_show”,
“min”: 2,
“max”: 10,
“step”: 1,
“default”: 4,
“label”: “t:sections.related-products.settings.products_to_show.label”
},
{
“type”: “range”,
“id”: “columns_desktop”,
“min”: 1,
“max”: 5,
“step”: 1,
“default”: 4,
“label”: “t:sections.related-products.settings.columns_desktop.label”
},
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”,
“info”: “t:sections.all.colors.has_cards_info”,
“default”: “background-1”
},
{
“type”: “header”,
“content”: “t:sections.related-products.settings.header__2.content”
},
{
“type”: “select”,
“id”: “image_ratio”,
“options”: [
{
“value”: “adapt”,
“label”: “t:sections.related-products.settings.image_ratio.options__1.label”
},
{
“value”: “portrait”,
“label”: “t:sections.related-products.settings.image_ratio.options__2.label”
},
{
“value”: “square”,
“label”: “t:sections.related-products.settings.image_ratio.options__3.label”
}
],
“default”: “adapt”,
“label”: “t:sections.related-products.settings.image_ratio.label”
},
{
“type”: “select”,
“id”: “image_shape”,
“options”: [
{
“value”: “default”,
“label”: “t:sections.all.image_shape.options__1.label”
},
{
“value”: “arch”,
“label”: “t:sections.all.image_shape.options__2.label”
},
{
“value”: “blob”,
“label”: “t:sections.all.image_shape.options__3.label”
},
{
“value”: “chevronleft”,
“label”: “t:sections.all.image_shape.options__4.label”
},
{
“value”: “chevronright”,
“label”: “t:sections.all.image_shape.options__5.label”
},
{
“value”: “diamond”,
“label”: “t:sections.all.image_shape.options__6.label”
},
{
“value”: “parallelogram”,
“label”: “t:sections.all.image_shape.options__7.label”
},
{
“value”: “round”,
“label”: “t:sections.all.image_shape.options__8.label”
}
],
“default”: “default”,
“label”: “t:sections.all.image_shape.label”,
“info”: “t:sections.all.image_shape.info”
},
{
“type”: “checkbox”,
“id”: “show_secondary_image”,
“default”: false,
“label”: “t:sections.related-products.settings.show_secondary_image.label”
},
{
“type”: “checkbox”,
“id”: “show_vendor”,
“default”: false,
“label”: “t:sections.related-products.settings.show_vendor.label”
},
{
“type”: “checkbox”,
“id”: “show_rating”,
“default”: false,
“label”: “t:sections.related-products.settings.show_rating.label”,
“info”: “t:sections.related-products.settings.show_rating.info”
},
{
“type”: “header”,
“content”: “t:sections.related-products.settings.header_mobile.content”
},
{
“type”: “select”,
“id”: “columns_mobile”,
“default”: “2”,
“label”: “t:sections.related-products.settings.columns_mobile.label”,
“options”: [
{
“value”: “1”,
“label”: “t:sections.related-products.settings.columns_mobile.options__1.label”
},
{
“value”: “2”,
“label”: “t:sections.related-products.settings.columns_mobile.options__2.label”
}
]
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 36
}
]
}
{% endschema %}

2

If you are trying to implement a slider for which I see you are using slick slider that understandable but why would you want a marquee effect on your products. That’s not the best experience for a user in any way I believe.

You would want your customers to see the products properly and not scrolling continuously.

Let me know what you think

3

Yes, I was just experimenting some things just to see how it looks, and now you say it like that i think that you are right. I did have other questions where i haven’t really got a response on, which is:

  1. How to make it so people see products from the same collection as the product page they are on.
  2. And now i have a slider effect on this product but it now is an endless slide, it doesn’t go back and forth.
4

For the first question i believe thats by default, isn’t it?? Shopify i believe pulls up products for such section automatically.

And secondly you could use a swiper js library in your related products section code. So you will have to edit code in your theme editor.

5

For the first, not exactly. Shopify shows different products from different collections too, so for example i have a women’s jacket, and it shows men products on 3 of the 4 ‘related products’. So i was thinking maybe someone had a code for that so it only shows products from the same collection.

For the second, I was thinking that maybe someone could help me with such code.

6

Second one i believe won’t be that hard. For the first one will have to look it up a bit.

Please name the theme you are using, If you using any free theme, I can just try and update the steps and code with you. But if you are on a paid theme then I will need collaborator access to the store as I only have a development store to try stuffs like these

7

I am using the dawn theme

8

Okk, that’s a free one so I can try on my system and then update you with the code and steps

9

Thank very much you, Let me know!

10

Hey @Tolunay while I was coding for your requirements and looking it up i realised a solution which would tackle both of your problems.

I was trying to turn related products to a slider but then it is a bit of a challenge. Also came up that after this I might have to dig up a lot to look for code for product recommendations as that is already done by Shopify in the theme.

So i came up with an idea if I can make a product slider where you as a store owner customising your store gets to choose the products to show as blocks in a slider. This will cover up both of your requirements without much hassle.

Let me know what you think

11

Yeah, we could give that a try. If it looks nice, then I would be happy to use it.

12

Okay, i will update you about it and the steps. Would be pretty easy this way.

13

Okay, Thank you!

14

Okay i got this. So just make a new section, name it anything you want and add this code.

{{ ‘component-card.css’ | asset_url | stylesheet_tag }}
{{ ‘component-price.css’ | asset_url | stylesheet_tag }}
{{ ‘section-related-products.css’ | asset_url | stylesheet_tag }}

{% if section.settings.image_shape == ‘blob’ %}
{{ ‘mask-blobs.css’ | asset_url | stylesheet_tag }}
{%- endif -%}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

<div class="swiper related-products page-width section-{{ section.id }}-padding isolate{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"

{{ section.settings.heading }}

    {% for block in section.blocks %}
    {% assign product = all_products[block.settings.product] %}

  • {% render 'card-product', card_product: product, media_aspect_ratio: section.settings.image_ratio, image_shape: section.settings.image_shape, show_secondary_image: section.settings.show_secondary_image, show_vendor: section.settings.show_vendor, show_rating: section.settings.show_rating %}
    • {% endfor %}
{% if section.settings.image_shape == 'arch' %} {% render 'mask-arch' %} {%- endif -%}

{% schema %}
{
“name”: “t:sections.related-products.name”,
“tag”: “section”,
“class”: “section”,
“settings”: [
{
“type”: “paragraph”,
“content”: “t:sections.related-products.settings.paragraph__1.content”
},
{
“type”: “inline_richtext”,
“id”: “heading”,
“default”: “You may also like”,
“label”: “t:sections.related-products.settings.heading.label”
},
{
“type”: “select”,
“id”: “heading_size”,
“options”: [
{
“value”: “h2”,
“label”: “t:sections.all.heading_size.options__1.label”
},
{
“value”: “h1”,
“label”: “t:sections.all.heading_size.options__2.label”
},
{
“value”: “h0”,
“label”: “t:sections.all.heading_size.options__3.label”
}
],
“default”: “h1”,
“label”: “t:sections.all.heading_size.label”
},

{
“type”: “number”,
“id”: “desk-slides”,
“default”: 4,
“label”: “Number of slides on Desktop”
},
{
“type”: “number”,
“id”: “mob-slides”,
“default”: 1,
“label”: “Number of slides on Mobile”
},
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”,
“info”: “t:sections.all.colors.has_cards_info”,
“default”: “scheme-1”
},
{
“type”: “header”,
“content”: “t:sections.related-products.settings.header__2.content”
},
{
“type”: “select”,
“id”: “image_ratio”,
“options”: [
{
“value”: “adapt”,
“label”: “t:sections.related-products.settings.image_ratio.options__1.label”
},
{
“value”: “portrait”,
“label”: “t:sections.related-products.settings.image_ratio.options__2.label”
},
{
“value”: “square”,
“label”: “t:sections.related-products.settings.image_ratio.options__3.label”
}
],
“default”: “adapt”,
“label”: “t:sections.related-products.settings.image_ratio.label”
},
{
“type”: “select”,
“id”: “image_shape”,
“options”: [
{
“value”: “default”,
“label”: “t:sections.all.image_shape.options__1.label”
},
{
“value”: “arch”,
“label”: “t:sections.all.image_shape.options__2.label”
},
{
“value”: “blob”,
“label”: “t:sections.all.image_shape.options__3.label”
},
{
“value”: “chevronleft”,
“label”: “t:sections.all.image_shape.options__4.label”
},
{
“value”: “chevronright”,
“label”: “t:sections.all.image_shape.options__5.label”
},
{
“value”: “diamond”,
“label”: “t:sections.all.image_shape.options__6.label”
},
{
“value”: “parallelogram”,
“label”: “t:sections.all.image_shape.options__7.label”
},
{
“value”: “round”,
“label”: “t:sections.all.image_shape.options__8.label”
}
],
“default”: “default”,
“label”: “t:sections.all.image_shape.label”,
“info”: “t:sections.all.image_shape.info”
},
{
“type”: “checkbox”,
“id”: “show_secondary_image”,
“default”: false,
“label”: “t:sections.related-products.settings.show_secondary_image.label”
},
{
“type”: “checkbox”,
“id”: “show_vendor”,
“default”: false,
“label”: “t:sections.related-products.settings.show_vendor.label”
},
{
“type”: “checkbox”,
“id”: “show_rating”,
“default”: false,
“label”: “t:sections.related-products.settings.show_rating.label”,
“info”: “t:sections.related-products.settings.show_rating.info”
},
{
“type”: “header”,
“content”: “t:sections.related-products.settings.header_mobile.content”
},
{
“type”: “select”,
“id”: “columns_mobile”,
“default”: “2”,
“label”: “t:sections.related-products.settings.columns_mobile.label”,
“options”: [
{
“value”: “1”,
“label”: “t:sections.related-products.settings.columns_mobile.options__1.label”
},
{
“value”: “2”,
“label”: “t:sections.related-products.settings.columns_mobile.options__2.label”
}
]
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 36
}
],

“blocks”: [
{
“type”: “product”,
“name”: “product”,
“settings”: [
{
“type”: “product”,
“label”: “Select Your Products”,
“id”: “product”
}
]
}
],
“presets”: [
{
“name”: "My New Related Products ",
“blocks”: [
{
“type”: “product”
},
{
“type”: “product”
},
{
“type”: “product”
},
]
}
]

}
{% endschema %}

Then you can add this as a section to your product template from the customizer. You can the related products section of shopify. Once you add the section you will understand. I believe this gives you a lot more control and the process is self explanatory.

If you are a coding guy i am sure you can make other neccessary changes. if not and you feel i was of help and can be of more please reach out in my mail and let me know.

Thanks

1 Like
15

It has worked, thank you very much! I will play around with it a little bit to optimize it the way i want it, but for now this is good. Thank you very much. :slightly_smiling_face:

16

Great that it worked out for you. For any future queries or opportunities please reach out to via email. Looking forward to working together.