How to Design a Shopify Store for Jewellery Brands

Last updated
Expert reviewed
5 min read
Simeon Mantel
Simeon Mantel
CEO at Fudge.

Key takeaways

  • Good Shopify store jewellery design answers one problem: a small object shot on white tells the buyer nothing about scale, weight, or colour accuracy.
  • Show the piece worn and in hand, keep one consistent scale reference across the catalogue, and add macro and video for finish and movement.
  • Put an exact specification table on the product page and store the values as metafields, so they also feed your collection filters.
  • Shopify allows three options and 2,048 variants per product, so engraving and gift messages belong in line item properties, not the variant matrix.
  • Hallmarking, resizing, warranty, and insured shipping belong on the product page, not in the policy footer.

Shopify store jewellery design is not a styling exercise. It is a set of answers to one awkward fact: the shopper cannot pick the piece up.

A 12mm hoop and a 22mm hoop look identical on a white background. A vermeil chain and a solid 14k chain photograph the same. This guide covers how to build the storefront around that gap. For visual reference points first, see our round-up of the best Shopify jewellery stores.

Why you can trust us

We have been in the Shopify space for over four years and have worked with hundreds of Shopify brands on their storefronts, including jewellery brands across most price points. We build Fudge, an AI storefront editor with a 5.0 rating on the Shopify App Store and Built for Shopify status, so we work on the same theme layer these decisions live on.


Why jewellery store design is harder than most categories

Most categories give the shopper an anchor. Jewellery gives them nothing. The pieces are small, the differences are millimetres, and two visually identical items can be tenfold apart in price. Four gaps cause most of the hesitation:

Everything below answers one of those four.


Photography direction for a jewellery store

Treat the media set as a specification document, not a gallery.

Shoot on-model and on-hand. The most useful image is the piece on a person. That one shot resolves scale and drape together. Shoot more than one skin tone, and for rings more than one hand size.

Use one consistent scale reference. A millimetre ruler overlay, a coin, or a fingertip crop all work, as long as it is the same one across the whole catalogue. Fix its position in the media order: hero first, on-model second, scale third.

Add macro detail. Macro shots sell the parts that justify the price: the prong setting, the solder joint, the clasp, the hallmark stamp.

Add video or 360 for sparkle. Stones only read as stones when they move. Shopify hosts video on the product directly, accepting uploads up to 10 minutes, 1 GB, and 4K, then serving MP4 or HLS.1 A five to ten second loop is plenty. See how to add video to a Shopify product gallery.

Metal-tone accuracy

Colour management matters more here than in most categories because the metal tone is the variant. Rose gold rendering as yellow gold generates returns you did not need to have.

Shoot with a colour checker card in the first frame of every session, export sRGB with the profile embedded, and photograph every metal tone separately rather than recolouring one shot. Then say the tone in words too: “14k yellow gold”, not “gold”.

A workable ratio is one hero, two or three on-model, two or three macro, one scale, one video. Past ten items you add weight rather than answers, and three constraints shape the build. 250 media items per product is the ceiling across images, video, and 3D models.2 Images can run to 5000 x 5000 px and 20 MB, though 2048px square is the right upload size for a zoomable gallery.1 And media order is set in the admin, so it is a design decision. Point zoom at the 2048px asset, not the original.


How to communicate scale and specification

Every jewellery product page needs a specification table near the buy box, not a bullet list buried in the description.

FieldFormat
Dimensionsmm and inches
Chain lengthinches and cm, with a diagram
Ring sizeUS, UK, and EU, plus inside diameter in mm
Weightgrams
Metal and purity”14k solid yellow gold”, “925 sterling silver”
Platingmicrons, where applicable
Stonetype, cut, carat, colour, natural or lab-created
Clasp or fittinglobster, spring ring, screw back

Always give both units. A US buyer reads inches, a European buyer reads millimetres, and neither should have to convert.

Chain lengths need a diagram. A line drawing showing where 16, 18, 20, and 24 inch chains sit on a torso converts better than the numbers alone. Do the same for bracelets and hoop diameters.

Ring sizing needs three routes: a conversion chart covering US, UK, and EU against inside diameter in millimetres, a printable PDF sizer with a calibration bar so shoppers can check their printer scaled it, and a free physical sizer posted on request above a certain price point.

Store the spec as metafields

Specifications typed into the description render inconsistently, cannot be filtered, and get re-entered for every product. Shopify has typed metafield definitions for this, including dimension with millimetre and inch units and weight with gram and ounce units.3

SpecMetafield type
Length, diameter, widthDimension (millimeters)
WeightWeight (grams)
Metal and puritySingle line text
Plating thicknessDecimal
Stone typeSingle line text (list)
Lab-createdTrue or false
Care instructionsMulti-line text

One catch: dimension and weight metafields are not available as storefront filters. The filterable types are single line text, single line text list, decimal, integer, true or false, and metaobject references.4 So store chain length as a dimension for display and mirror a filterable decimal alongside it. Structured once, the same values feed the spec table, the filters, and your product feed: see how to add metafields to Shopify products.


Materials, provenance, and claims you can stand behind

Buyers ask three things: what is it made of, where did it come from, and how do I look after it.

Answer all three on the product page rather than in a policy document, and be specific. Give the karat and say whether the piece is solid, filled, vermeil, or plated, with microns for plated. Give the stone type, cut, and carat, say whether it is natural, lab-created, or a simulant, and disclose any treatment.

Sourcing claims carry substantiation expectations

Terms like “conflict-free”, “ethically sourced”, and “recycled gold” carry regulatory weight.

In the US, the FTC’s Jewelry Guides at 16 CFR Part 23 state that it is unfair or deceptive to misrepresent the origin, metallic content, treatment, production, or any other material aspect of a jewellery product, and that qualifications and disclosures should be clear and prominent.5 The same Guides point to the Green Guides for use of the word “recycled”. In the UK, the CMA’s Green Claims Code expects environmental claims to rest on credible, up to date evidence, with stronger evidence for broader claims.6

So write the specific version of the claim, not the broad one. “Recycled 14k gold, certified by our refiner” is defensible. “Sustainable jewellery” is not.

UK hallmarking is also a legal requirement above minimum weights of 1g for gold, 7.78g for silver, 0.5g for platinum, and 1g for palladium, and it applies to online sales.7 If your pieces carry hallmarks, photograph them.

Want a product page that shows scale and spec properly? Describe it to Fudge.
Try Fudge for Free

Variant design for a category with too many options

Jewellery has more legitimate choices than almost any category: metal, stone, size, length, fitting, engraving. Shopify caps how many can be variants.

A product can have up to three options and up to 2,048 variants.2 Three, not five. So metal, size, and length can be options. Stone and engraving cannot, unless you drop one of the first three.

Counts grow fast: four metals, ten ring sizes, and three band widths is 120 variants with all three slots used. Media is the second ceiling, at 250 items per product with one assignable per variant, so plan one image per metal tone rather than one per variant.

Swatch design. Metal tone is the option shoppers pick with their eyes, so render it as a swatch. Crop it from the actual product in that metal rather than using a flat CSS colour, keep a visible text label since colour alone is not an accessible control, and swap the gallery when the swatch changes.

When to split into separate products. Split when the choice changes the purchase rather than the item: the price range across variants is wide, such as lab-created versus natural stone; you have run out of option slots; or the variants have separate search demand. Connect split products with a “shop this style in” block driven by a product reference metafield.


Personalisation and made-to-order

Engraving is one of the better margin levers in jewellery, and the thing most likely to break a variant matrix.

The answer is line item properties: name and value pairs captured on the product form rather than the variant, using inputs named properties[Engraving]. An underscore prefix hides a property from the customer at checkout while still recording it.8

<input
  type="text"
  name="properties[Engraving]"
  maxlength="12"
  placeholder="Up to 12 characters"
/>

Enforce the character limit on the input itself, not in a note underneath, and show a live preview in the engraving font at the real character count.

Made-to-order changes two more things. Lead time has to be visible before add to cart, next to the price rather than on the shipping page, because a lead time discovered after checkout is a cancellation. And personalised items are usually non-returnable, which belongs directly beneath the engraving field. If a buyer types their child’s name into a box, they should read “engraved pieces cannot be returned or exchanged” in the same glance.


Trust signals for a high-consideration purchase

Jewellery has a high average order value and a low conversion rate. The gap is trust, and trust is built on the product page.

SignalWhere it goes
Hallmark or certificationSpec table plus a macro photo
Stone certificateBeside the stone spec, lab named
Warranty or lifetime repairBuy box, one line
Free resizing windowBuy box, next to the size selector
Returns policyBuy box, one line, linked
Insured shippingBuy box, one line
Secure packagingShipping or gifting block

Resizing is the jewellery-specific one. A free resize within 60 or 90 days removes the biggest objection to buying a ring online, and costs less than the return it prevents. Say warranty terms explicitly too: “lifetime repair on clasps and chains” beats “quality guaranteed”.

Put all of these as short lines under the add to cart button rather than inside an accordion. See how to customise a Shopify product page for the layout patterns.


Gifting is a different shopping mode

A large share of jewellery is bought for someone else, and gift buyers behave nothing like self-purchasers. They do not know the recipient’s ring size, they shop by occasion, and they work to a deadline.

Demand concentrates around November and December, Valentine’s Day, and Mother’s Day. Build the gift collections and cutoff messaging as reusable sections so you switch them on rather than rebuild them each year.


Collection page and navigation design for jewellery

Collection pages do two jobs: narrowing a large, visually similar catalogue, and merchandising by occasion.

Filter by metal, stone, price, style, and length. Standard storefront filters cover availability, category, price, product type, tags, and vendor; custom filters come from product options, metafields, and metaobjects. A store can display up to 25 filters, each showing up to 100 values, and collections over 5,000 products show none at all.4 Use variant metafields where the filter should link through to the right variant, and control filter values tightly, because “14k Gold”, “14K gold”, and “Yellow Gold 14k” become three separate values.

Lay the grid out for small objects. A grid fails when an 8mm stud and a statement cuff fill the same tile at the same apparent size. Crop consistently so the grid itself communicates scale, use two columns on mobile and three on desktop, show metal swatches on the tile, and make the hover image the on-model shot.

Merchandise by occasion, not only product type. “Rings, Necklaces, Earrings” is a warehouse taxonomy. Run engagement, everyday, stacking, layering, and first piercing collections alongside it and they will pick up search demand category pages never will. See customising a collection page in Shopify for the build.

If you sell into the US, search demand there is for “jewelry”, so use the US spelling in US-facing metadata, titles, and alt text even where your brand voice uses “jewellery”.


Speed for an image-heavy, video-heavy category

Everything above adds weight, and that is where Core Web Vitals go wrong.

Largest Contentful Paint should be 2.5 seconds or less, measured at the 75th percentile of page loads and segmented by mobile and desktop.9 Here the LCP element is almost always the first gallery image, and the specific trap is loading the whole gallery eagerly. Twelve 2048px images requested on load push LCP past the threshold even on good connections.

Measure on a real product page with a full gallery. The homepage is rarely the slowest page on a jewellery store.


How to implement: theme settings, metafields, or custom sections

Three places to put this work, and the answer is usually a mix.

Theme settings handle what your theme already supports: gallery layout, swatch display, badge positions. Free and instant, but bounded by what the theme author built.

Metafields handle the data: dimensions, weights, purity, care, certification. Most of the durable value sits here, because the data outlives any theme you put on top of it.

Custom sections handle the rest: the spec table, the scale diagram, the engraving field, the gift-finder block, the sizing modal. Liquid sections with schema settings, so a merchandiser can reuse them without touching code.

That last group is what Fudge is built for. Describe the section and Fudge writes the Liquid, CSS, and JavaScript into your theme, reading your existing brand and product data so the output matches the store. Because it is native theme code, no third-party script renders your spec table and no widget layer sits over your product page. It also survives uninstall. The same applies to campaign pages built with the Shopify page builder.


FAQ

How many variants can a Shopify product have for jewellery?

Shopify allows up to three options and up to 2,048 variants per product. For jewellery that usually means metal, size, and length take all three option slots, so stone type and engraving have to be handled another way. Engraving belongs in line item properties, and a genuinely different stone usually deserves its own product page.

How do I add an engraving field to a Shopify product page?

Add a text input to the product form named properties[Engraving]. Shopify captures it as a line item property that flows through to the order and packing slip without consuming a variant option. Enforce the character limit on the input itself, show a live preview in the engraving font, and state the no-returns condition directly beneath the field.

How do you show jewellery size and scale online?

Use three things together: an on-model or on-hand photograph, one scale reference used consistently across the whole catalogue, and an exact specification in both millimetres and inches. For rings, add a conversion chart with inside diameter in millimetres and a printable sizer with a calibration bar. For chains, a diagram showing where each length sits beats the number alone.

Can shoppers filter a Shopify collection by metal or stone?

Yes, using storefront filters built from product options, metafields, or metaobjects. A store can display up to 25 filters, each showing up to 100 values, and collections over 5,000 products do not show filters. Dimension and weight metafields are not filterable, so mirror those values in a decimal or single line text field if you want shoppers to filter by chain length.

Do I need to prove claims like conflict-free or recycled gold?

Yes. The FTC Jewelry Guides treat misrepresentation of a product's origin or material as deceptive and expect disclosures to be clear and prominent, and they point to the Green Guides for use of the term recycled. In the UK, the CMA's Green Claims Code expects credible, up to date evidence, with stronger evidence for broader claims. Write the specific verifiable version of a claim rather than a general sustainability statement.

Why is my jewellery product page slow?

Usually because the whole gallery loads eagerly. Ten or twelve large images plus an autoplaying video requested on load will push Largest Contentful Paint past the 2.5 second threshold. Load only the first gallery image eagerly with fetchpriority high, lazy-load the rest, use a poster image facade for video, and keep the high-resolution zoom asset behind the zoom interaction.

Simeon's signature
Build jewellery pages that answer the scale question.

Footnotes

  1. Shopify Help Center, “Product media types” - images up to 5000 x 5000 px and 20 MB; videos up to 10 minutes, 1 GB, and 4K, served as MP4 or HLS. https://help.shopify.com/en/manual/products/product-media/product-media-types 2

  2. Shopify Help Center, “Adding variants” - up to three options and 2,048 variants per product, and up to 250 media items with one assignable per variant. https://help.shopify.com/en/manual/products/variants/add-variants 2

  3. Shopify Dev, “Metafield data types” - the dimension type supports millimeters through yards; the weight type supports grams, kilograms, ounces, and pounds. https://shopify.dev/docs/apps/build/custom-data/metafields/list-of-data-types

  4. Shopify Help Center, “Adding filters with Shopify Search & Discovery” - up to 25 filters per store, 100 values shown per filter, none on collections over 5,000 products; filterable metafield types are single line text, single line text list, decimal, integer, true or false, and metaobject reference. https://help.shopify.com/en/manual/online-store/storefront-search/search-and-discovery-filters 2

  5. Federal Trade Commission, Guides for the Jewelry, Precious Metals, and Pewter Industries, 16 CFR Part 23, section 23.1 and Note 2 to section 23.1. https://www.ftc.gov/legal-library/browse/rules/jewelry-precious-metals-pewter-industries

  6. Competition and Markets Authority, “Making environmental claims on goods and services” (Green Claims Code). https://www.gov.uk/government/publications/green-claims-code-making-environmental-claims/environmental-claims-on-goods-and-services

  7. GOV.UK, “Hallmarking: practical guidance” - UK exemption weights are 1g gold, 7.78g silver, 0.5g platinum, 1g palladium. https://www.gov.uk/government/publications/hallmarking-guidance-notes/hallmarking-is-the-law-guidance-summary

  8. Shopify Dev, Liquid reference, “line_item” - properties are name and value pairs captured with inputs named properties[name]; an underscore prefix hides one from the customer at checkout. https://shopify.dev/docs/api/liquid/objects/line_item

  9. web.dev, “Largest Contentful Paint (LCP)” - a good LCP is 2.5 seconds or less at the 75th percentile of page loads. https://web.dev/articles/lcp

You might also be interested in

How to Use the Speculation Rules API on Shopify
Shopify already prefetches storefront links with speculation rules. How to add prerender in theme.liquid, exclude cart and account URLs, and measure it.
Building a Multi-Currency Shopify Storefront Without Sacrificing Speed
Multi currency Shopify speed depends on native Markets vs a converter app. How presentment currencies, rounding, and CLS decide your Core Web Vitals.
Price-Anchoring Patterns That Lift Shopify AOV
Price anchoring in Shopify frames value using compare-at pricing, decoy tiers, good-better-best, and bundles. How to build each honestly in your theme.