Big dropdownlist on startpage how do i do it?

Big dropdownlist on startpage how do i do it?

Roar_Sweden
Excursionist
42 0 10

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.

 

Skärmavbild 2024-08-20 kl. 11.06.43.pngSkärmavbild 2024-08-20 kl. 11.03.19.png

Reply 1 (1)

Sweans
Shopify Partner
397 76 118

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

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com