What was actually wrong
When you set a slot to 15°, the charm rotated — but around the wrong point. Instead of pivoting at its attachment anchor (the top of the chain link, the bottom of the bail), it pivoted around the bounding-box corner of the charm image. The result was a charm that appeared to swing and displace rather than tilt in place.
The same pivot mismatch existed between the admin canvas preview and the storefront. A charm looked right in the editor but sat slightly off on the live customizer.
This fix ships alongside per-slot rotation control — which lets you configure the exact angle each slot should snap to when a customer drops a charm in.
What the inspector redesign fixes
Pivot at the slot anchor
Charm rotation now pivots at the slot's anchor position. The Hang from setting gives three options via icon buttons:
- Top edge — ideal for pendants that hang from a bail
- Center — ideal for flat charm overlays
- Bottom edge — ideal for charms attached at their base
The pivot math is shared between the Konva canvas renderer (editor + storefront) and the SVG print builder, so the angle you see in the builder is the angle in the print file.
Reset on slot swap
Swapping a charm from a 15° slot into a 0° slot now correctly resets the rotation to 0°. Previously, the swap logic treated 0° as falsy and preserved the prior angle. Switching to a null-coalescing check closes that edge case — an explicit 0° slot always resets.
Cleaner rotation routing
Groups whose pivot lives on a child image node are now tagged internally, so the canvas manager, drag plugin, and any future consumers all delegate rotation to the correct node. There's no longer a code path that could accidentally compound rotations by applying them to both parent and child simultaneously.
Do merchants need to change anything?
No. The fix is in how rotation is applied, not in the data model. Existing slot configurations render correctly without any republish.
If you noticed charms sitting slightly off-position after a rotation, republishing the affected template will now produce the correct output. For other storefront improvements that shipped in the same window, see three storefront updates that make your personalizer feel native to your theme.
FAQ
What is TailorKit?
TailorKit is a Shopify app that lets merchants offer product personalization — customers design their own text, images, or engravings directly on the product page.
What does "pivot at slot anchor" mean?
It means the charm rotates around the point where it attaches to the necklace or bracelet — the bail, jump ring, or base — rather than around a corner of the image file. The visual result is natural hanging behaviour.
Does the print output reflect these fixes?
Yes. The SVG print builder uses the same anchor-pivot math as the canvas renderer, so storefront preview and print output are now consistent.
My charms looked fine before. Will this change anything for me?
Only if your slots had a non-zero rotation angle. Slots at 0° (the default) are unaffected — the fix only activates when a rotation is present.
Try TailorKit in Your Shopify Store
Your customers can design and preview their products before they buy. Install TailorKit from the Shopify App Store — free to try, works with any theme, no coding required.
