How to display products into two rows view when in the mobile view

[Owen]

Good day,

Does anyone know how to display products into two or three rows in the mobile view?

Now I find that when I use the mobile phone to access my website it display the products only one row, so it takes a long time to see those products, is there any way we could display the products into two or three rows when access through the mobile phone?

 

Thank you~

[Wartin]

If you use Niara theme, you have to edit /themes/niara/product-list.tpl

the first lines, changed, are:

  {if $page_name == 'index' || $page_name == 'product'}
    {$product_block_size_class = 'col-xs-6 col-sm-4 col-md-3'}
  {else}
    {$product_block_size_class = 'col-xs-6 col-sm-6 col-md-4'}
  {/if}

(it read col-xs-12 instead of col-xs-6)

[AndyC]

Thanks for this answer.. Has been 1 of my questions to get answered

[Owen]

On 7/4/2020 at 4:20 PM, Wartin said:

If you use Niara theme, you have to edit /themes/niara/product-list.tpl

the first lines, changed, are:

  {if $page_name == 'index' || $page_name == 'product'}
    {$product_block_size_class = 'col-xs-6 col-sm-4 col-md-3'}
  {else}
    {$product_block_size_class = 'col-xs-6 col-sm-6 col-md-4'}
  {/if}

(it read col-xs-12 instead of col-xs-6)

Thank you~

[Owen]

On 7/4/2020 at 4:20 PM, Wartin said:

If you use Niara theme, you have to edit /themes/niara/product-list.tpl

the first lines, changed, are:

  {if $page_name == 'index' || $page_name == 'product'}
    {$product_block_size_class = 'col-xs-6 col-sm-4 col-md-3'}
  {else}
    {$product_block_size_class = 'col-xs-6 col-sm-6 col-md-4'}
  {/if}

(it read col-xs-12 instead of col-xs-6)

Hi Wartin,

Can you tell me how to edit the theme? I try to find the button to edit the theme in the back office, but I can't find it.

 

Thank you very much~

[Wartin]

4 minutes ago, Owen said:

Can you tell me how to edit the theme? I try to find the button to edit the theme in the back office, but I can't find it.

I'm afraid you can't edit it from the Backoffice. Two columns in mobile it not a template option. That's why the changes are made directly in the template code. Are you in a shared hosting? You need to edit the template file directly, with a text editor.

If you have SSH access you can log in and go to template directory, and edit it there. If you have FTP access you can do it from there, depending on your ftp program (or just download it, edit it in your computer and then upload it again)

As you are modifying the file that shows your products, editing a .tpl could break things. Before editing make a backup of the file.

 

[Owen]

18 minutes ago, Wartin said:

I'm afraid you can't edit it from the Backoffice. Two columns in mobile it not a template option. That's why the changes are made directly in the template code. Are you in a shared hosting? You need to edit the template file directly, with a text editor.

If you have SSH access you can log in and go to template directory, and edit it there. If you have FTP access you can do it from there, depending on your ftp program (or just download it, edit it in your computer and then upload it again)

As you are modifying the file that shows your products, editing a .tpl could break things. Before editing make a backup of the file.

 

Thank you Wartin, I think it's difficult for me, as I'm a new beginner, I need time to learn that.

[Owen]

On 7/6/2020 at 2:01 PM, Wartin said:

I'm afraid you can't edit it from the Backoffice. Two columns in mobile it not a template option. That's why the changes are made directly in the template code. Are you in a shared hosting? You need to edit the template file directly, with a text editor.

If you have SSH access you can log in and go to template directory, and edit it there. If you have FTP access you can do it from there, depending on your ftp program (or just download it, edit it in your computer and then upload it again)

As you are modifying the file that shows your products, editing a .tpl could break things. Before editing make a backup of the file.

 

Hi Wartin,

Thank you, I have go into the file manager and edit already. It's done, looks much nice than before.