Bespoke Permella Charm Builder

One of the most significant pieces of custom Shopify development was the Permella Charm Builder.

Instead of requiring customers to open multiple product pages, remember different products and repeatedly move between their basket and the catalogue, the Charm Builder creates a dedicated journey for building personalised jewellery.

Customers can explore the available options and build a combination from Permella's product catalogue within a user friendly drag and drop interface.

This transformed personalisation from something Shopify simply needed to accommodate into one of the central features of the website.

Connecting the Builder to Shopify Products

An important part of the development was ensuring that the builder remained connected to the actual Shopify catalogue.

Rather than creating a completely separate database of charms that would then need to be maintained independently, the functionality works around Shopify's existing product structure.

Permella can continue managing its products through Shopify while the custom functionality uses that information automatically to create the enhanced customer experience.

It reduces duplicated administration and makes the feature far more scalable as additional charms and jewellery are introduced.

A Better Way to Discover Charms

With a growing catalogue of charms, product discovery becomes increasingly important.

Someone searching for an initial charm, for example, has a very different intention from somebody simply browsing for inspiration.

We structured the charm experience to make it easier for customers to move between products and discover complementary pieces rather than treating every product page as an isolated destination.

This has benefits for both conversion and SEO.

For customers, it reduces the amount of work required to find the right product.

For search engines, it creates stronger relationships between relevant products and collections.

Collection-Aware Previous & Next Product Navigation

Another bespoke feature developed for the Permella store was intelligent Previous and Next product navigation.

This sounds relatively simple, but standard Shopify product navigation can become problematic when customers are browsing filtered collections.

If a customer filters a collection to show a particular group of products, opens one of those products and then uses standard Previous or Next controls, Shopify can lose the context of the filtered collection.

We developed a custom solution to preserve that browsing journey.

The system stores the collection context and retrieves the relevant product handles from Shopify, allowing the Previous and Next controls to navigate through the products that relate to the customer's current collection journey.

A dedicated Shopify collection view was created to output the relevant product handles as JSON, which could then be used by the storefront functionality.

This allowed us to create navigation that behaves much more like customers expect.

Rather than returning them to unrelated products or forcing them back to the collection page after viewing each item, customers can continue moving through the relevant products.

For a jewellery store where customers may compare many similar charms before making a decision, this is a particularly useful usability improvement.

Filtered Collection Navigation

The collection navigation work also considered Shopify's AJAX filtering.

Modern Shopify stores allow customers to narrow a collection without performing a complete page reload. This creates a faster browsing experience, but it can introduce additional complexity when custom functionality needs to understand which collection and filter combination the customer came from.

Our custom navigation retains that context so the product browsing journey doesn't break when filters have been applied.

This is the type of relatively small technical detail that can make a significant difference to how polished an ecommerce store feels.

The customer doesn't need to understand what is happening technically.

They simply expect the website to remember what they were looking at.

Custom Shopify Theme Development

The Permella website wasn't built by simply installing a Shopify theme and changing its colours.

We customised the Shopify theme around Permella's products, content and customer journeys.

Where standard theme functionality wasn't sufficient, bespoke Liquid, JavaScript and CSS development was used to extend Shopify.

This allowed us to build functionality specifically for Permella while retaining Shopify's core ecommerce infrastructure.

It also means the website doesn't depend on a collection of unnecessary third-party apps to provide every piece of functionality.

Where something could be implemented efficiently within the theme itself, we could create it around the exact requirements of the store.

Reducing unnecessary app dependency can help with performance, ongoing costs and the long-term maintainability of a Shopify website.

Reusable Shopify Sections

We also developed the website using reusable Shopify sections wherever possible.

This gives Permella much greater flexibility when creating and updating pages.

Instead of requiring a developer whenever content needs to be rearranged, the Shopify Theme Editor can be used to control many of the website's content sections.

The result is a bespoke website that still retains one of Shopify's biggest advantages: it remains practical for the merchant to manage.

Product Page Improvements

Permella's product pages needed to do considerably more than display a photograph, price and Add to Cart button.

Customers need to understand the individual piece, available options and how it can form part of their wider personalised jewellery.

We therefore approached product pages as both purchasing pages and discovery pages.

The design prioritises the product imagery while keeping important purchasing information easy to access.

Related navigation and links also provide routes into other relevant products rather than allowing the customer journey to end when a particular product isn't quite right.

Mobile Ecommerce Experience

Mobile was a major consideration throughout the project.

Jewellery is particularly influenced by social media, where customers often discover a brand on their phone before moving directly onto the website.

The Permella experience therefore needed to work just as effectively on a smaller screen.

Navigation, product grids, imagery, product options, the Charm Builder and purchasing controls were considered responsively rather than simply shrinking the desktop website.

This is especially important for bespoke functionality.

A custom feature has little value if it creates friction for the large percentage of customers shopping from a mobile device.

Technical SEO Built Into the Development

The Permella project also involved substantial technical SEO work.

This was carried out alongside the Shopify development rather than waiting until the website was finished.

Many ecommerce SEO problems originate in the structure of the website itself. Trying to solve them afterwards can mean working around decisions that should have been addressed during development.

For Permella, SEO considerations influenced collection architecture, internal linking, product discovery, navigation, page structure and the underlying Shopify theme.

Collection Architecture

Collections are some of the most important SEO landing pages on a Shopify store.

Individual product pages can target highly specific searches, but collections allow the website to target broader commercial searches where someone is looking for a type of product rather than one particular item.

We reviewed how Permella's products were organised and how the website connected relevant products and collections.

This provides search engines with a clearer hierarchy while simultaneously giving customers more useful routes through the catalogue.

Instead of SEO pages existing separately from the shopping experience, the objective was to make the pages that are useful for customers the same pages we want search engines to understand and rank.

Internal Linking Improvements

We strengthened internal linking throughout the store.

Internal links are important because they help Google discover pages and understand how different parts of a website relate to one another.

They're particularly important for large ecommerce websites.

Without a considered internal linking structure, products can gradually become buried several levels deep within the site.

By connecting related products, collections and key landing pages more effectively, we created clearer routes through the Permella website for customers and search engine crawlers.

The custom collection-aware product navigation also contributes to this broader product discovery experience.

Product & Collection Metadata

Important products and collections were given more considered SEO metadata.

This included reviewing page titles and meta descriptions so that they more accurately reflected the products and search intent associated with each page.

Titles need to clearly communicate what a page offers, while descriptions should encourage a relevant searcher to choose Permella from the search results.

Combined with improved collection architecture, this gives Permella stronger landing pages for commercially relevant jewellery searches.

Heading & Semantic Structure

We also reviewed the underlying heading structure used throughout important templates.

A Shopify theme can look perfectly correct visually while producing a poor semantic structure behind the scenes.

Multiple inappropriate H1 tags, missing primary headings or headings being used purely for visual styling can make the hierarchy of a page less clear.

We developed the theme so important content follows a more logical structure using the appropriate H1, H2 and supporting heading levels.

This improves accessibility and gives search engines clearer information about the subject and hierarchy of each page.

Structured Data & Schema Markup

Structured data was another important technical consideration.

Schema markup provides search engines with machine-readable information about the content of a website.

For an ecommerce store this can include information relating to:

• Products
• Prices
• Availability
• Reviews
• Breadcrumbs
• Website structure

Correct structured data helps Google understand that a page represents a purchasable product and interpret the information associated with it.

It can also make eligible pages available for enhanced ecommerce search features.

We therefore reviewed the structured data generated by the Shopify theme and the way important ecommerce information was being communicated to search engines.

Canonicalisation & Shopify Duplicate URLs

Shopify can make products accessible through more than one URL depending on how a visitor reaches them.

For example, a product can potentially be accessed directly or within the context of a collection.

Without correct canonical signals, this can create multiple URLs representing essentially the same product.

As part of the technical SEO work, we considered canonicalisation and Shopify's URL behaviour to ensure search engines are directed towards the preferred version of important pages.

This helps consolidate ranking signals rather than unnecessarily splitting them between duplicate URLs.

Redirects & URL Preservation

URL management is particularly important when changing the structure of an established ecommerce website.

Products and collections may have accumulated links, search rankings and authority over time.

Simply changing a URL and allowing the old address to return a 404 can throw that value away.

Where URLs changed, appropriate redirects could be used to send visitors and search engines to the most relevant replacement page.

This protects the customer experience while helping preserve the SEO value associated with existing URLs.

Broken Links & Crawlability

We also considered the way search engines crawl through the website.

Broken links, unnecessary redirects and inaccessible pages waste crawl activity and create poor experiences for customers.

The improved navigation, collection architecture and internal linking all contribute towards making important pages easier to reach.

The aim was to create a logical site architecture where priority products and collections aren't hidden deep within the website.

Image Optimisation

Photography is fundamental to the Permella brand.

But jewellery websites can also become extremely image-heavy.

Large, unnecessarily loaded imagery can slow a website considerably, particularly on mobile connections.

We therefore considered responsive imagery and performance as part of the build, allowing the website to retain the high-quality visual presentation expected from a jewellery brand without treating performance as an afterthought.

Image optimisation also extends to accessibility and SEO considerations such as appropriate alternative text where relevant.

Core Web Vitals & Performance

Performance was considered throughout the development rather than relying on an optimisation app after launch.

This included being conscious of the amount of JavaScript being introduced, the impact of custom functionality, image loading and unnecessary third-party functionality.

This is particularly important when creating bespoke features such as the Charm Builder.

Custom functionality needs to add genuine value without making the rest of the website unnecessarily heavy.

A faster Shopify website provides a better customer experience and creates stronger foundations for Google's page experience measurements and Core Web Vitals.

Product Discovery as an SEO Strategy

One of the most important ideas behind the Permella project was that SEO and usability shouldn't be treated as separate disciplines.

Consider the collection-aware Previous and Next functionality.

For the customer, it makes it easier to browse relevant charms.

For the business, it increases the opportunity for customers to discover more products.

For the website architecture, it creates stronger relationships between products and collections.

The same applies to collection structure.

A well-designed collection makes it easier for customers to find products while simultaneously creating a strong landing page for Google.

This approach informed much of the Permella development.

Creating a Shopify Store That Can Grow

The final consideration was scalability.

Permella's catalogue isn't static. New charms, jewellery, collections and campaigns can continually be introduced.

The website therefore needed to accommodate growth without requiring the underlying store to be rebuilt every time the catalogue expanded.

Using Shopify's native product and collection infrastructure alongside bespoke theme functionality gives Permella that flexibility.

Products can continue to be managed centrally through Shopify while features such as the Charm Builder and custom collection functionality create a much more specialised experience on the storefront.

The Result

The Permella project demonstrates what can be achieved when Shopify is treated as a development platform rather than simply a choice of ecommerce templates.

We combined Shopify's product, collection, checkout and ecommerce infrastructure with bespoke development specifically designed around Permella's business.

The finished website includes:

• A premium responsive Shopify design.
• A bespoke interactive Charm Builder.
• A charm-focused product discovery experience.
• Custom Shopify Liquid, JavaScript and CSS development.
• Integration between bespoke functionality and Shopify's existing product catalogue.
• Custom collection-aware Previous and Next product navigation.
• Preservation of collection context when browsing products.
• Support for filtered/AJAX collection journeys.
• A dedicated Shopify product-handles data view used by the custom navigation functionality.
• Improved collection and product architecture.
• Reusable Shopify sections for easier content management.
• Improved mobile product browsing.
• Stronger internal linking.
• Improved product and collection metadata.
• Improved semantic heading structures.
• Structured data and ecommerce schema considerations.
• Improved canonicalisation and duplicate URL handling.
• URL and redirect management.
• Improved crawlability.
• Image and performance optimisation.
• Core Web Vitals considerations.
• A more scalable architecture for Permella's expanding product catalogue.

Most importantly, the technical work serves the customer journey rather than existing simply for the sake of adding features.

The Charm Builder makes personalisation easier.

The collection navigation makes comparing products easier.

The Shopify catalogue integration makes the website easier for Permella to manage.

And the technical SEO improvements make the products and collections easier for search engines to discover, understand and rank.

Together, these changes created a Shopify website built around the way Permella actually sells jewellery.

Bespoke Shopify Development by Fat Buddha Web Design

At Fat Buddha Web Design, we don't believe a Shopify redesign should simply involve installing a new theme.

The biggest opportunities often come from understanding how customers actually shop and then developing Shopify around that behaviour.

For Permella, that meant building a website where customers could do more than browse jewellery. They could explore charms, compare products and create something personal to them.

Behind that experience, we developed the technical infrastructure needed to support product discovery, SEO, performance and future growth.

If your Shopify store needs functionality that doesn't exist within a standard theme — whether that's a product builder, personalised product journey, advanced collection functionality, custom filtering or completely bespoke Shopify development — we can design and develop it around your business.

Speak to Fat Buddha Web Design about your Shopify project.