I finally upgraded my site to Swift last month. It’s taken me a long time, having had an abortive attempt at Swift V1 in March 2020. But as the Bible says, “The race is not to the swift…”
I feel the Swift template is still biased towards desktop/laptop browsers, and a bit more attention needs to be paid to the way the design works on mobile devices. My current stats show 46% of page views are via mobile phones, and 12% via tablets. I’ve made numerous changes, mostly minor and cosmetic, but some more significant and aimed at improving the mobile experience with “keeping it simple” in mind:
GOODBYE MAGIC ZOOM
OK, this was partly to accommodate the odd way I handle product images, but I also didn’t like all the tapping and double-tapping customers have to do to view multiple images of a product on a phone. I have only two images per product; the first is the main image, and the second consists of several further product photos stitched together vertically. This second image (Extended Info Image) is simply placed in a PHOTOS tab on the product page.
GOODBYE TWIDDLY BUTTONS
I got rid of all the twiddly circular buttons in sections and elsewhere that link to the product page. I felt they were distracting, took up too much space, and didn’t really do what you’d expect; they look like add to cart buttons, and might actually put off people who just want to view the product details. Users can still view a product by touching/clicking the image or title; this approach is good enough for Amazon, Wickes, Next, ASOS and M&S, so it’ll do for me.
GOODBYE SHOPPING CART IN MOBILE CHECKOUT
I’ve removed the shopping cart display from checkout pages in smaller screen sizes, so that customers are focussed on the fields they actually have to fill in, without unnecessary scrolling. On the payment page I’ve just shown the total due, above the payment methods, along with a button to allow customers to view the cart if they wish before paying.
GOODBYE SWIFT PROMO CAROUSEL (AND WELCOME BACK SMART PROMO CAROUSEL)
The default promotional carousel in Swift appears to have been dumbed-down compared with the one in the Smart theme. It seems geared to display only one image at a time, and some of the parameters have been taken away. Also, I was seeing a lot of white space above and below the carousel on small screen sizes. Rather than fiddling about with it, I just copied the code over from my ‘old’ Smart theme site. This reinstated the parameterisation and I now have 3 images appearing at a time on all screen sizes, and the carousel is properly responsive. The next step is to vary the number of images displayed; maybe 4 on larger screens, 2 on mobile. I’ll probably use Bootstrap to display a different version of the carousel according to screen size.
GOODBYE SECTION DESCRIPTION IN PAGINATED SECTIONS
The section description, if any, now appears in paginated sections on page 1 only. It takes up space, and people don’t want to be scrolling past it on every subsequent page.
HELLO PRODUCT LISTING LAYOUT (MY VERSION)
Swift V2 introduced the ability to have products listed in a single column on a section page, using the Product Listing Layout. Thank you Sellerdeck! (I think I was one of the people who asked for it.) On large screens this is more or less what I need, with images on the left and price etc. on the right, giving the impression of columns, rather like a giant shopping cart. However, the effect is lost on a mobile screen because the prices etc. wrap round under the images and the whole thing ends up looking like a regular section page, only not as nicely formatted. So I created a completely new version of the Product Listing Layout, which you can see if you look in the Reserved Items subsections on my site.
I still have a few tweaks to do, and there is an obscure-but-nasty little bug in search filtering which, under certain circumstances, presents the mobile user with a completely blank white screen! Support tells me “this should be fixed in one of our future releases.” Hmm, I think I’d prefer now-ish…
That aside, I’m very pleased with Swift, and I hope the above is of some interest or use. It reflects my personal opinions and preferences, so I’m not saying my way of doing things is better than anyone else’s!
John
I feel the Swift template is still biased towards desktop/laptop browsers, and a bit more attention needs to be paid to the way the design works on mobile devices. My current stats show 46% of page views are via mobile phones, and 12% via tablets. I’ve made numerous changes, mostly minor and cosmetic, but some more significant and aimed at improving the mobile experience with “keeping it simple” in mind:
GOODBYE MAGIC ZOOM
OK, this was partly to accommodate the odd way I handle product images, but I also didn’t like all the tapping and double-tapping customers have to do to view multiple images of a product on a phone. I have only two images per product; the first is the main image, and the second consists of several further product photos stitched together vertically. This second image (Extended Info Image) is simply placed in a PHOTOS tab on the product page.
GOODBYE TWIDDLY BUTTONS
I got rid of all the twiddly circular buttons in sections and elsewhere that link to the product page. I felt they were distracting, took up too much space, and didn’t really do what you’d expect; they look like add to cart buttons, and might actually put off people who just want to view the product details. Users can still view a product by touching/clicking the image or title; this approach is good enough for Amazon, Wickes, Next, ASOS and M&S, so it’ll do for me.
GOODBYE SHOPPING CART IN MOBILE CHECKOUT
I’ve removed the shopping cart display from checkout pages in smaller screen sizes, so that customers are focussed on the fields they actually have to fill in, without unnecessary scrolling. On the payment page I’ve just shown the total due, above the payment methods, along with a button to allow customers to view the cart if they wish before paying.
GOODBYE SWIFT PROMO CAROUSEL (AND WELCOME BACK SMART PROMO CAROUSEL)
The default promotional carousel in Swift appears to have been dumbed-down compared with the one in the Smart theme. It seems geared to display only one image at a time, and some of the parameters have been taken away. Also, I was seeing a lot of white space above and below the carousel on small screen sizes. Rather than fiddling about with it, I just copied the code over from my ‘old’ Smart theme site. This reinstated the parameterisation and I now have 3 images appearing at a time on all screen sizes, and the carousel is properly responsive. The next step is to vary the number of images displayed; maybe 4 on larger screens, 2 on mobile. I’ll probably use Bootstrap to display a different version of the carousel according to screen size.
GOODBYE SECTION DESCRIPTION IN PAGINATED SECTIONS
The section description, if any, now appears in paginated sections on page 1 only. It takes up space, and people don’t want to be scrolling past it on every subsequent page.
HELLO PRODUCT LISTING LAYOUT (MY VERSION)
Swift V2 introduced the ability to have products listed in a single column on a section page, using the Product Listing Layout. Thank you Sellerdeck! (I think I was one of the people who asked for it.) On large screens this is more or less what I need, with images on the left and price etc. on the right, giving the impression of columns, rather like a giant shopping cart. However, the effect is lost on a mobile screen because the prices etc. wrap round under the images and the whole thing ends up looking like a regular section page, only not as nicely formatted. So I created a completely new version of the Product Listing Layout, which you can see if you look in the Reserved Items subsections on my site.
I still have a few tweaks to do, and there is an obscure-but-nasty little bug in search filtering which, under certain circumstances, presents the mobile user with a completely blank white screen! Support tells me “this should be fixed in one of our future releases.” Hmm, I think I’d prefer now-ish…
That aside, I’m very pleased with Swift, and I hope the above is of some interest or use. It reflects my personal opinions and preferences, so I’m not saying my way of doing things is better than anyone else’s!
John
Comment