For desktop, hide or delete the view type and bring Featured and the dropdown to the corner where the view type is currently at.
For mobile, just hide it
Topic summary
A user seeks to customize the view type display on their Shopify collection page. Desktop goal: Hide or remove the view type selector and relocate the “Featured” dropdown to that corner position. Mobile goal: Simply hide the view type selector.
Solution provided:
A CSS snippet successfully hides the view type element:
ul.no-bullets.inline-list.text-right {
display: none;
}
Follow-up requests:
- User asks to hide only the last view type option while keeping the first two visible (feasibility unclear from responses)
- User requests removal of a visible border line, addressed with:
.collection-filter__sort.small--hide {
border: 0;
}
Context: The user mentions bugs occurring with shortened product titles affecting the view type display, which motivated hiding it entirely. All CSS modifications are added to the theme.css.liquid file in Shopify’s theme editor.
website>kawaiibonjour.com
ul.no-bullets.inline-list.text-right {
display: none;
}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid
1 Like
Hi @oscprofessional , it works well! The reason I hide this is because it has some bugs after shortening the product title name with… and cause the view type for small view list have some bug. I will tag you in another post to see if you can solve it if not I will just hide the view type using your code. Thanks man!
Your Most Welcome 
1 Like
Hi @oscprofessional , is it possible to just remove the last view type?
Hi, @oscprofessional I want the first two view type to be visible and hide the last one, is it possible?
Hi @oscprofessional , can you hide this visible line I highlighted?
.collection-filter__sort.small--hide {
border: 0;
}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid
1 Like