I want to see search results in list mode by default in desktop, and see it on grid mode on mobile. What should I do? Right now I edited catalog search list.phtml to show list mode by default on search result page but on mobile, I see list mode too. I want to see grid mode on mobile.

Update from comment:

if ($block->getMode() == 'grid') {
    $viewMode = 'list';
    $image = 'category_page_list';
    $showDescription = false;
    $templateType = 
} else {
    $viewMode = 'grid';
    $image = 'category_page_grid';
    $showDescription = true;
    $templateType = 

but it works on any device, can not seperate them for devices

  • Can you share the code efforts you have made till now? Jan 21, 2019 at 9:33
  • if ($block->getMode() == 'grid') { $viewMode = 'list'; $image = 'category_page_list'; $showDescription = false; $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW; } else { $viewMode = 'grid'; $image = 'category_page_grid'; $showDescription = true; $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::FULL_VIEW; } but it works on any device, can not seperate them for devices
    – MGPM
    Jan 22, 2019 at 5:22
  • You can refer magento.stackexchange.com/a/194051/2443 to check for mobile device Jan 22, 2019 at 6:15
  • Thanks, good, but how can I create a global function for it? I mean don't use if.. just run the function
    – MGPM
    Jan 22, 2019 at 6:36

2 Answers 2

  1. You can create a new theme having the parent as your current theme.
  2. Then set up the new theme as an exception for the mobile devices.
  3. In the new theme, you can override the list.phtml file and write your custom logic (or simply remove the code for the grid view. Keep the code for the list view only).

Update: Add an exception for mobile devices

  1. Go to Design >> Configuration and click on the row of the currently applied theme.
  2. Under Design Rule >> User Agent Rules, you will find Add New User Agent Rule button. Click on it to add the exception. Input the value of the Search String and select the theme as the exception.

Search strings are either normal strings or regular expressions (PCRE).

  1. Save the configuration and deploy the static content.

Theme Exception

I hope it makes sense.

Please let me know if you have any related question.

Add "mobile" in search string and select any template you want to use for mobile, and its done. For all mobile devices automatically those templates will be taken. options

  • Thanks... don't understand number2. how can i do it?
    – MGPM
    Jan 23, 2019 at 5:16
  • 1
    @PMPD, I have updated my answer. Jan 23, 2019 at 5:34


Finally, got this extension, it works well.

  • its not working can you tell me how its working for you Apr 15, 2019 at 11:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.