A user seeks to add scroll arrows to their blog’s tag filter section, as too many recipe tags overflow the desktop view without horizontal scrolling capability.
Proposed Solutions:
Slick Slider Implementation: One contributor provides detailed steps involving duplicating the theme, adding Slick Slider library code to theme.liquid (before </head> and </body> tags), and configuring responsive breakpoints to enable arrow navigation.
CSS Customization: Another suggests adding CSS code to theme.css to position navigation buttons, though the original poster reports this approach produces no visible changes.
Alternative Approach: A third participant recommends using the Blog Articles Filter Search PRO app instead of arrows, suggesting dropdown filters grouped by categories (e.g., Protein: Beef/Chicken/Fish) would provide better user experience for recipe filtering.
Current Status:
The CSS-only solution hasn’t worked for the user. The Slick Slider method appears more comprehensive but requires theme file modifications. The discussion remains open with the app-based alternative presented as a potentially simpler option.
Hi,
Our recipes are all written as blogs and tagged for easy filtering. There are too many tags to fit on the desktop page and customers cannot scroll left to right so they can reveal more. Is it possible to add an arrow to manually click left or right so customers can scroll and find more options?
Website Page: https://www.olivelle.com/blogs/recipes
Thanks!
oh sorry for that issue its possible make customization code for slider arrow left and right but you need simple code its possible css can you just add more filter and let me know i will check and let you know code
@KetanKumar I have been trying to figure out a code but cannot. If you can help me with that to create buttons like the focal theme uses in other areas of the website that would be great!
yes you can do this using slick slider
step 1. duplicate your theme
and open edit code for duplicated theme
step 2. add these code in to just before closing tag in theme.liquid
step 3. add these code in to just before closing tag in theme.liquid
<script type="text/javascript">
$(document).ready(function(){
$('.link-bar__linklist').slick({
dots: false,
infinite: true,
speed: 500,
slidesToShow: 13,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 7
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 4
}
}
]
});
});
</script>
great please confirm look and add code
.shopify-section--main-blog prev-next-buttons.link-bar__prev-next.prev-next-buttons.hidden-pocket {
position: absolute;
left: 0;
right: 0;
z-index: 1;
display: flex;
justify-content: space-between;
}
@KetanKumar That is how I would like the page to look. However, when I paste the code to the bottom of the theme.css nothing changes
oh sorry but i can’t see code
I have had a look at your blog.
Rather than adding left and right button, you may consider adding dropdown filter for easier recipes filtering and better user experience using the Blog Articles Filter Search PRO app.
You can easily group your article tags like Protein: Beef / Chicken / Fish and so on.
Here is a demo or you can try the app from Shopify app store here.
