How can I improve user experience with a device filter for phone cases?

Store Design
, , , ,

Topic summary

Creating a device filter that dynamically shows all phone case designs applied to the selected phone model (e.g., iPhone X, Samsung S24). The goal is a visual mockup preview per device so shoppers can see each design on their exact phone.

Reference: RhinoShield’s collection page link provided as the target experience.

Scale: ~500 designs across many phone models; asks if dynamic mockup overlay is feasible and for UX improvement ideas.

Platform context: Shopify store.

Latest response: The referenced experience is a custom-built feature, not a built-in Shopify capability. Implementing it would require custom development.

No off-the-shelf app or specific technique was shared; only a suggestion to hire a developer.

Status: Unresolved. Action item is to consult/engage a developer to scope and build the device-based mockup filter and previews.

Summarized with AI on January 3. AI used: gpt-5.
1

I work with a phone case company and we want to make this:
create a “device” filter and when the customer chooses the iPhone X, all the iPhone Xs appear with all the designs on the site.
If customer choose Samsung S24, all designs go to S24 to have direct view of phone case with design.

The problem is I have 500 phone case designs and many designs,

Do you think it is possible to do like Rhinoshield and have a mockup of each phone and when I choose a phone the mockups are put in and the designs go onto the mockup directly?

Do you have an idea of what I could do to improve the user experience?

Here is a link and photos to see an example:

https://rhinoshield.io/collections/collab-look

Thanks for all

1 Like
2

Hello @MaxenceGarandel

Welcome to Shopify community.

Thanks for the reference site but it a custom builded functionality. So you need to seek help from the developer at reasonable rate.

Let me know if you need one.

Thanks