An Online Store With a Photo Gallery Outside the Product Page

Can you build an online store on the Shoper platform that not only meets every technical requirement, but also becomes a place to showcase an artist's work and vision? We had the chance to answer that question while working on two online stores that stand apart from standard projects. See, step by step, how we built these Shoper stores, each enriched with an extra photo gallery living outside the product pages.

About the companies

Our client roster grew to include the owners of two different brands rooted in artistic work.

type of project: Online store | technology: Shoper

Shroomy Store is a small business offering handmade home decor, stationery, and clothing built around a distinctive design motif. Every piece draws directly on tattoo designs created by the store's owner.

Kualia, meanwhile, is a store selling artistic handicrafts, offering unique decor pieces, ceramics, drawings, and collages, as well as plush toys whose sales support charitable causes.

The service our clients used was: online store development.

Client goals

Launching the online store

For our clients, the main goal was building an online store that could sell unique handmade products while meeting every technical requirement, matching their aesthetic vision, and staying consistent with the brand's visual identity.

So we went with stores on the Shoper platform. Thanks to its ready-made, fully customizable templates, we were able to tailor each store's design to our clients' individual needs and preferences. The platform also offers secure integration with payment providers and couriers, letting us deliver a smooth, convenient sales and delivery process. On top of that, its intuitive admin interface makes it relatively easy to add products, manage orders, and keep an eye on how the store is running.

A photo gallery in a Shoper store

Another important goal was adding a classic photo gallery to each store, separate from the product pages. Our clients wanted standalone galleries built around a set of thumbnails that expand on click to show off the details of selected pieces.

Shoper doesn't have a built-in feature for automatically creating a gallery like this, so for both projects we built a custom solution.

So why bother with a separate photo gallery in a Shoper store at all?

Personalized subpages like these are a great tool for artists and creative entrepreneurs looking to showcase their work. One client's aesthetic portfolio let her feature archival pieces made as one-off originals that aren't available for regular sale, but can still inspire visitors and encourage custom orders.

Our second client, meanwhile, wanted a standalone tattoo portfolio added to the store, showcasing the recurring theme behind every product on offer. Thanks to this separate tattoo gallery, the client could boost the brand's visibility and present different, complementary sides of his work.

Delivery - step by step

Planning content and choosing a template

For both stores, the first step was a series of detailed conversations with the clients to nail down the page content, visual assets, product descriptions, and any other information we needed. Once we had the materials, we set about optimizing them, focusing on improving readability and appeal, as well as making sure industry-relevant keywords were present. Together we made any necessary revisions to keep the content consistent with each client's vision and mission.

Next, we moved on to choosing the right templates on the Shoper platform for the new stores. We evaluated each template for its customization options, look, and functionality, to deliver the best possible shopping experience for different groups of customers.

Building product categories

The next step in building the online store was adding product categories. We tailored each category tree to the client's needs and the specifics of each store's offer. We carried out a thorough review of the product range to ensure a consistent, logical category structure, making it easier for shoppers to navigate the store and find the products they're after.

You can read more about building the right category tree on our blog.

Adding content to the pages

The stores started taking shape once we added the content, graphics, photos, and, most importantly, the products we'd prepared earlier. We made sure every piece of content was clear and every product was presented attractively.

Building the photo gallery

Next, we moved on to building a more optimized photo gallery module on the Shoper platform. For our clients, this meant a portfolio of handmade pieces in one case, and a tattoo gallery in the other.

For the first store, we wrote custom HTML and adapted JavaScript code; for the second, we cleaned up the existing code's semantics. We then built custom Python scripts that let us sort the photos and generate their thumbnails.

In both cases, the galleries first show thumbnail images, and only open the full-size photo once a visitor clicks on a chosen piece. We cut the image weight from 5 MB down to just 50 KB, which gave us a faster initial page load. It's worth noting that full-size images can weigh up to a hundred times more than their thumbnails. That gave us a significant performance boost, which in turn improved the user experience.

At the same time, we focused on optimizing the site for mobile devices, so users could browse the store comfortably no matter what device they were using.

Polishing navigation, linking, and legal documents

Finally, we filled out the content in the menus and footers, added contact information, and buttoned up the integrations with online payments and couriers. Our clients also opted to publish legal documents on the site, such as store terms and conditions and a privacy policy, along with delivery and payment information. We rounded things off by adding proper internal linking, which improved navigation across the pages and gave visitors easy access to the information and products they needed.

Like what you see? Get in touch with us by filling out the form below to learn more or start a project together!