Hello, I would like to ask about how to set up a ranking.
I have created a collection called “ranking.” When I set this collection on the homepage, it is configured to display 10 products. I would like the product images of these 10 items to automatically display product numbers (NO.1, NO.2, etc.), similar to the image below.
Could you please advise me on how to set this up? Thank you very much.
※ On desktop, 4 products are displayed by default. I would like to add a clickable “>” button on the right side to move to the next page.
Both the desktop and mobile versions should follow the same behavior as this website: https://mellowneon.com/
Doing this would require tweaking your Featured Collection section. If you paste here the content of featured-collection.liquid I could take a look at what needs to be adjusted to get what you are asking for.
To achieve the ranking display with numbers (No.1, No.2, etc.) and the carousel functionality with a “>” button for a collection on your homepage, you’ll need to customize your theme code.
Product Numbers (No.1, No.2, etc.): This requires modifying the Liquid code for the collection section on your homepage to dynamically add the rank number based on the product’s position in the loop.
Carousel Functionality: To display 4 products and have a clickable “>” button for navigation, similar to the example, you will need to implement a JavaScript-based carousel or slider. This usually involves adding a library like Slick Carousel or Swiper.js to your theme.
This level of customization typically involves editing files like sections/featured-collection.liquid or a similar section file, and adding JavaScript and CSS to assets/theme.js and assets/base.css respectively.
@YAMADATARO to achieve this functionality, you need to add more products to your sections and put them in a slider like slick slider. This functionality will need code editing.
Seeing the code you shared, the theme already seems to come with a Carousel functionality, as it references a featured-collections-carousel, this means that once you add enough products to the section the arrows should appear.
As for showing the ranking functionality, like others have mentioned, this requires some custom code.
If you are open to hiring a developer to assist you with this you can reach out to me through direct messages in the forum.
Hello, thank you for your reply.
May I ask which file I should insert this code into? I tried adding it in the theme’s custom CSS, but it showed an error saying that the [content] code is not supported.
Oh, sorry, seems like they still have this restriction.
In this case, use this code, (even though I hate doing it this way):
/* use id selector of this particular section */
#shopify-section-template--25361896079670__featured_collections_cfhVbB scroll-carousel {
counter-reset: ranking;
}
#shopify-section-template--25361896079670__featured_collections_cfhVbB product-card {
counter-increment: ranking;
}
#shopify-section-template--25361896079670__featured_collections_cfhVbB product-card:before {
content: "No." counter(ranking);
}
You can add this code to the very bottom of your assets/theme.css or, alternatively, you can add a “Custom liquid”/“Custom code” section and paste this code wrapped with <style>…</style>:
like this
<style>
/* may need to update the id selector for the particular section */
#shopify-section-template--25361896079670__featured_collections_cfhVbB scroll-carousel {
counter-reset: ranking;
}
#shopify-section-template--25361896079670__featured_collections_cfhVbB product-card {
counter-increment: ranking;
}
#shopify-section-template--25361896079670__featured_collections_cfhVbB product-card:before {
content: "No." counter(ranking);
}
</style>
You can show product numbers by editing your theme and adding forloop.index in the product loop near the image. For the arrow slider like the sample site, use a product carousel section or add slider code with next and previous buttons. Works same on desktop and mobile.
Funny that I did that first and then checked the example site – they do it in a similar way: