Aesthetika:Shopify Website Development for Rakhis and Jewellery

The homepage has a search bar, category navigation, and a large banner for the rakhi collection. The navigation includes Rakhis, Bhai Bhabhi Rakhis, Rakhis for Girls, Kids Jewellery, Hair Accessories, and other store sections.

Below the banner, the website shows separate categories such as Premium Rakhis, Funky Rakhis, Kids Rakhis, Thread Rakhis, Bracelet Rakhi Sets, Bhai Bhabhi Sets, and Lumbas. Each category has an image, so users can see the type of product before opening the collection.

This is useful because someone looking for a bracelet rakhi and someone looking for a kids rakhi do not need to browse the same set of products first. They can directly open the category that matches what they are looking for.

The homepage also has Women Jewellery and Unisex Jewellery sections, followed by kids jewellery and hair accessories. This gives the other products a place on the homepage along with the rakhi collection.

I developed dynamic product pages and connected the frontend to the Shopify backend. I also made several custom metafields to store product descriptions and other product details.

Different products need different information. A rakhi, a jewellery set, and a hair clip can use a common product page layout, but the details shown on that page need to belong to the selected product.

The custom metafields were used for storing this additional information. The frontend can then display the information for that product in the required part of the page. Shopify explains this use of custom product data in its metafields documentation.

The product page shows a large product image along with the title, price, product code, quantity selector, Add to Cart button, and Buy It Now button. It also has separate expandable sections for Product Details, Shipping and Delivery, and Return & Exchange.

This keeps the purchase options visible while giving users access to the other details before placing an order.

I developed collection pages with advanced filtering so users can narrow down the products instead of checking every item in the collection.

The collection pages show filters for price, product type, product style, and colour. For example, the Bhai Bhabhi collection shows styles such as Evil Eye, Floral, Kundan, Om, and Peacock. The hair clips collection has options such as Bow, Butterfly, Floral, Rainbow, and Unicorn.

The filters need to match the type of products in the collection. A style that is useful for a rakhi collection may not be useful for hair clips, so the available options should help users choose from the products they are actually viewing.

The product grid shows images, names, and prices. The hair clips collection also shows the product count and a sorting control, which gives users another way to browse the collection.

Infinite scroll for loading more products

I used infinite scroll on the collection pages so users can continue browsing products without opening the next collection page manually.

This reduces the number of separate page loads during browsing. It is useful when users want to look through more designs before choosing one, rather than stopping at the end of each page to continue.

Infinite scroll still needs to work with the selected filters. Loading more products should continue the collection the user is browsing, including the filters they have already applied.

The product page also includes a Best Sellers section with other products from the store. This gives users more products to look at after viewing the main product information.

The lower product page view shows a compact Add button with the current product image, name, and price. This keeps an option to add the product available further down the page, where the main Add to Cart button is no longer in view.

For a product page with multiple sections, this is useful because a user may read more information before deciding to buy. They can use the compact Add button without going back to the top of the page.

I integrated a Shopify cart drawer which shows the selected products and supports related products and add-ons. The purpose was to let users review their cart and see other relevant products before proceeding to checkout.

The cart drawer shows product images, names, prices, quantity controls, and an option to remove products. It also has an order note option, savings, subtotal, and a checkout button with the cart amount.

The cart view includes progress towards free shipping and a discount threshold. Instead of only showing an offer message, it also shows how much more the user needs to spend to reach the next benefit.

For a store selling rakhis and accessories, users may want to buy more than one product. Related products and add-ons give them an option to add another item while reviewing the cart.

This was part of the conversion rate optimization work on the website. The focus was on making the cart more useful before checkout, including product selection, offer information, and the order total.