Big dropdownlist on startpage how do i do it?

[Roar_Sweden]

Hey all!

I wonder if someone have a good solution of a big drop down list on the frontpage where you can choose your model of your phone to see all of the products right away?

Example, you choose iPhone 15 Pro and all of those designs show, same with Samsung S24, all designs show with pictures of the model. 

Showing example of pictures below, I want to put it in the header so it is easy accessible.

I have checked a few apps, but i cant really find the one i need.

[Sweans · Accepted solution]

Hi @Roar_Sweden ,

It seems like you want to add a dropdown menu to your Shopify store's header so that customers can easily select their phone model, like "iPhone 15 Pro" or "Samsung S24," and see all relevant designs for that model right away.

To achieve this, you'll probably need a custom solution. Here's a step-by-step approach you can follow:

Approach 1: Custom Dropdown with Shopify Collections:-

1. Create Collections for Each Model:
• Create individual collections for each phone model (e.g., "iPhone 15 Pro," "Samsung S24"). Ensure that each collection contains products for that specific model.
2. Custom Dropdown in Header:
• Modify your Shopify theme's header to include a dropdown menu. This dropdown will list all the phone models. Upon selecting a model, the customer will be redirected to the respective collection.
3. Adding Images of Designs:
• Ensure each product within the collections has images. Shopify will automatically display the product images in the collection pages once customers are redirected after selecting a model.
4. Styling:
• Style the dropdown to make it visually appealing and easily accessible. You can use CSS to adjust the positioning and design, ensuring it fits well in your header.

Approach 2: Advanced Filtering Apps:-

If you want a more advanced filtering and selection experience, some applications offer this functionality, though they may require customization. Here are a few suggestions:

1. Boost Product Filter & Search:
• This app allows for advanced product filtering and dropdown menus. You can set filters based on product types (e.g., phone models).
2. Filter Menu by Power Tools:
• Another app that can create custom filters and dropdown menus. It offers a lot of flexibility in setting up filters for collections.

Key Considerations:-

• Ensure the dropdown is user-friendly and mobile-responsive.
• Keep collections up to date with the newest models and product designs.
• Use clear and concise labels for the dropdown options.

If you need help implementing this in your Shopify theme, I can guide you through the code changes.

I hope this helps! If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,

Sweans

[Roar_Sweden]

Hey Sweans

Do you want to help me with this? 

We are thinking about a easy custom droplist solution, maybe that can go through "search" to be honest. Because if we use search the picture is shown for what we have chosen in the picture, which collections doesnt.

For example, if you go into Samsung S24, it doesnt show that picture on the collection (we have a dropdown on all the cases in the same product to keep it simple)

But if you search for Samsung S24, it will show the picture.

Check the attached 🙂

So a droplist in the menu in the mobile and a droplist above the header in desktop (almost noone uses desktop, but its nice to have)

If you wanna help me with this I would be really thankful!

[Roar_Sweden]

Anyone else having an idea of a droplist i can have in the menu that maybe an app could use? We could also use it as a filter for the tags or maybe even the collections.