Two columns of products on mobile view

Ask the community
1

Is it possible to view your products in two columns rather than a single product in mobile view?

1 Like
2

Using the inbuilt stores app & the product page it creates for you it is not currently possible to do this, however if you’re familiar with Velo code & the wix-stores api it is possible to do this using a repeater populated by the data in the product catalogue (which is an available dataset → “Stores/Products”)

This would then allow you to fetch all products & apply them to a dataset (this would all be velo code, which I’ll attach in an additional answer) - my example will use query & will be limited to 100 items for now, however it is not difficult to work around this by adding a load more button in a different section & attaching it to query more items and append it to the data in your repeater. (If this is needed contact me & I will partner your site and do the work for you :)) )

I hope my answer helps :slight_smile:

Screenshot of my workaround (this is not perfect and a proper solution would be far more elegant!

1905Ă—826 122 KB

Here’s my code!

import wixData from 'wix-data'; import wixLocation from 'wix-location';

$w.onReady(async function () {
 let products = await wixData.query("Stores/Products").find().then((results)=>{return results.items})
    console.log(products);
    $w('#repeater1').data = products;
    $w('#repeater1').onItemReady(($item, data, index)=>{
        $item("#productImage").src = data.mainMedia;
        $item("#productTitle").text = data.name;
        $item('#productPrice').html = "ÂŁ"+data.price.toString();
 if (data.discount.type!=="NONE"){
            $item('#sale').show();
            $item('#productPrice').html = "<s>ÂŁ"+data.price.toString()+"</s> ÂŁ"+data.discountedPrice.toString();
        }
    })
    $w('#box1').onClick((event)=>{
 const itemId = event.context.itemId; 
 const data = $w('#repeater1').data; 
 const itemData = data.find((item) => item._id===itemId);
        wixLocation.to(itemData.productPageUrl);
    })
});
3

hey, would you be able to do a walk through this in a video way maybe on youtube please? I am not sure how to do it but need 2 columns on mobile view

4

in addition to this request:
https://support.wix.com/en/article/editor-x-request-additional-product-page-layouts-in-wix-stores

standard workaround would be to use two columns with separate collections