Mobile Version of Product Gallery Element not working as expected

[Creature1]

With category pages {the default way that products are added to your shop} when you view these categories on a mobile device, it shows the products in a two-column format, allowing customers to browse products more quickly like almost every other e-commerce platorm.

If you choose to use the standard page and drop in a product gallery element {found in the builder menu}, your products will show as a single column format, which is tiresome and not how any shop or product elements should be showing on mobile. 

Recently, as a way to get around the shortcomings of how little Weebly offers control over category pages for our shops, I have switched to the idea of building my shop pages using the standard page format and simply dropping in the product element onto the standard page to create different areas of products. This works great for everything EXCEPT mobile, because like I mentioned it shows the huge, view one product at a time, one-column format on a mobile device. . 

[Adam7]

Hi @Creature. I'm assuming this is by design to maximize the size on small screens, although it's inconsistent with the experience seen on auto-generated category pages. What was missing with the auto-generated category pages that prompted you to switch?

[Creature1]

@Adam To answer your question:

"What was missing with the auto-generated category pages that prompted you to switch?"

There is literally no control at all with designing category pages, that is why I switched. My business model is such that I need to be able to move things around and have different sections on each page that shows products. I like to also include info text.  Using category pages only allows for everything to be lumped together and offers very minimal to zero control over where info can be placed any lacks any true organization for products that need to be organized around a theme.

I want to divide up specifics about what I am selling all on one page for visitors.

For instance, for my "Rings" page:

• I want the first section on the page to be "ready to ship" rings, these are rings that are already cast and finished and can be shipped out in 1-3 days. 

•The next section I want to show is "made to order" rings, these are rings that can be ordered to a custom size selected by the customer and in the material of their choice, but require time for production and take 2-3 weeks for me to complete them before shipment.

•

The last section on my rings pages that I want shown is archived sold rings. These are designs that I have made previously that have sold out. Most in this section are either limited edition or one of a kind. I may make these again in the future but they are currently unavailable and this section simply serves as a portfolio of my previous designs so that my customers can know what I may be offering in the future for a shop update. 

If this lack of sophistication when showing products on mobile that are in the product element is "by design" that it sure is curious that it is inconsistent with the way weebly designed products to be shown in categories for mobile. Surely whoever designed how products are shown in categories understands that is the preferred and pretty much universal standard for mobile view for e-commerce shopping or it would not have been implemented as the standard on weebly categories. I hope Weebly will make the mobile product experience consistent whether products are being shown via category or via the product element. It looks much more professional to have two rows of products for mobile.

[Adam7]

Ok, thanks for taking the time to detail that out. I can see why using multiple category elements on a standard page solves having multiple categories on a single page for you. 

I decided to play around with my test site using the newer website editor to see what that did on mobile in the event that it would let you do what you want. In the newer editor there is a section called "Featured Items", which serves the same purpose as the Products element in the classic editor. There are a few different layout options you can pick, and I added three of them to this page of my (heinously ugly) test site. The top layout is a masonry-type of layout on desktop, but on mobile it will make the first item in the list of items full screen, then double up the rest underneath it. The second section will do like the Products element section does. The third layout is a side-scrolling layout, and this is preserved on mobile. There's actually a fourth layout, but it's designed to feature a single item and not multiple.

[Creature1]

@Adam 

The new editor probably isn't going to solve anything for me. Did you preview your test page on mobile to see if these other features that are similar to product elements show as a single column or double column as products should? The lack of a two-column mobile conversion is my main gripe and why I started this thread.

Another reason that I am switching to standard pages and product elements instead of using category pages in addition to the extra control and ability to create subsections of products all on one page, is because I am now switching my business model to one of a kind and limited edition designs only available during shop updates that are advertised as going live at a certain time and have a limited quantity available. Because of this format, I have customers that all visit my site at once, and products are hidden until the official release date and time.  I have to do a lot of the behind the scenes prep work to develop all of my products, curate and organize the order that they will show in. I then have to publish them all simultaneously at for example 8pm sharp so all visiting customers can see the full collection of my update at once. 

Because of the way I now list my items to the public at a set time and with a first come first serve basis, I like to load my product element full of my new designs on a hidden/ private page away from prying eyes first and organize them and prepare them for viewing. When the time comes to make them live, all I have to do is copy the entire product element over to my designated visible shop update page or specific item page or whatever. This literally takes me only seconds to execute. This method is a lot less fuss than trying to utilize the hide and visible function with products within a category, which requires entering both the site editor and store editor separately to organize my new products at the top and there is still the random drop out the bug that makes me not even trust using categories. It's just overall about 10x more of a hassle to use category pages than to just use the product element which is so much more versatile for organizing products and controlling product releases. I doubt the new editor addresses the need for this format of publishing products for updates either.

If the product element reflected the same mobile conversion double-column format on mobile as all other e-commerce sites for browsing shops on phones, the workaround I use to run my shop efficiently would work out perfectly. Using Weebly, there seems to always be a catch with every feature and even when trying to implement a workaround to navigate around Weebly features that are severely lacking. The lack of true mobile conversion for the product element is the catch of course. :{   Can someone at Weebly please update the product element?

[Adam7]

I did test the mobile version to confirm - the top-most layout is the closest to what you want (it's using the default blank product images, but you get the gist):

The side-scrolling option also displays two at a time on my iPhone 11 pro max, although it may be a little different on other models:

Regarding hiding products until you're ready to direct people to them, I set up a page of my site to test doing something similar. There's nothing to see there right now because I set the item visibility to "unavailable", but if I change that to visible then the page will update to show the item details. I think it's the same amount of steps you're doing now; just a different approach. 

[Creature1]

@Adam 

I think I'm going to stick with the way I am doing things, just to save the headache of finding out what I don't like about how that "feature" items thing works for now. As someone that has to immerse myself in using Weebly to run a business, I clock a ton of hours building my website and figuring out how things work and discovering oversights, when I finally land on something that saves me time, I like to stick with it. Because this is the aspect of running a business, that I literally hate, running a website. It would be great if Weebly made all of their "features" mobile friendly like making the "product element"a two column on mobile like everything else, so I could simply continue with life.

Anyway, Where is the new editor? Per usual, there is no indication of how to get to it or preview it anywhere from my end.  Is it possible to poke around and then return to my current editor so? Also, is there any chance that accessing the store through the editor will be an option again? The current version of the editor that I have, I have to back out of the editor to access the store and products, orders, etc. Pretty annoying and a step backward from the way it was set up before in the previous editor version.

[Adam7]

There's a couple ways to get it: 1. Click the Online link in your Square account (this might not work if your Weebly account uses the same email address as your Square account, or 2 create a new account on Weebly.com and make sure you choose the option that you do want to sell right now. 

You can definitely play around and give it a trial run with a free subdomain. Store features are still accessed from the dashboard, though.