How to create such srop down link choice

[WonderSkin]

Hi all,

How to create such srop down link choice where I can choose either a link or after having chosen something from the drop down, it leads me with the Shop Now button to a different collection:

[devcoders]

Hi @WonderSkin

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder

[PeterGeorge]

Looks like that is comes from a section’s setting of a preselect menu.
If so, get in your visual editor, then you could try to figure it out which menu that section use.
Then update the menu.

[WonderSkin]

Hi, my question is how can I do something like this in my store - could you advise or share a link where such a solution is explained?

[WonderSkin]

Hi, I found this element here

Korean Skincare & K-beauty | Korean Beauty | Skin Cupid

And I am looking for a way to create such a preselect drop-down in my store

Thanks for any idea

[devcoders]

Hi @WonderSkin

Do you want this in your store?

[WonderSkin]

I need the whole thing - a question with a drop down, which leads to different solution (product) collections over the button or over the direct choice from the drop down.

[WonderSkin]

@devcoders Any ideas?

[devcoders]

Hi @WonderSkin

Ok, I’ll make it the same as it is in the live store. I’ll need store access.

[WonderSkin]

@PeterGeorge and @devcoders could you just paste here a liquid code or similar

[PeterGeorge]

Sure.

<nav class="pg-nav">
  <ul class="pg-menu">
    {%- for link in linklists.main-menu.links -%}
      {%- assign has_children = link.links.size > 0 -%}

      <li class="pg-menu__item {% if has_children %}has-mega{% endif %}">
        <a class="pg-menu__link" href="{{ link.url }}">
          {{ link.title }}
        </a>

        {%- if has_children -%}
          <div class="pg-mega" role="region" aria-label="{{ link.title }} mega menu">
            <div class="pg-mega__inner">
              {%- for child in link.links -%}
                <div class="pg-mega__col">
                  <a class="pg-mega__heading" href="{{ child.url }}">
                    {{ child.title }}
                  </a>

                  {%- if child.links.size > 0 -%}
                    <ul class="pg-mega__list">
                      {%- for grandchild in child.links -%}
                        <li class="pg-mega__list-item">
                          <a class="pg-mega__list-link" href="{{ grandchild.url }}">
                            {{ grandchild.title }}
                          </a>
                        </li>
                      {%- endfor -%}
                    </ul>
                  {%- endif -%}
                </div>
              {%- endfor -%}
            </div>
          </div>
        {%- endif -%}
      </li>
    {%- endfor -%}
  </ul>
</nav>

.pg-nav {
  position: relative;
}

.pg-menu {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pg-menu__item {
  position: relative;
}

.pg-menu__link {
  display: inline-block;
  padding: 14px 6px;
  text-decoration: none;
}

.pg-mega {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;

  width: 100vw;              
  max-width: 100vw;
  display: none;

  background: #fff;
  border-top: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  z-index: 50;
}


.pg-menu__item.has-mega:hover .pg-mega {
  display: block;
}


.pg-mega__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 20px;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}


.pg-mega__heading {
  display: inline-block;
  font-weight: 700;
  margin-bottom: 10px;
  text-decoration: none;
}


.pg-mega__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pg-mega__list-link {
  display: block;
  padding: 8px 0;
  text-decoration: none;
  opacity: 0.9;
}

.pg-mega__list-link:hover {
  opacity: 1;
  text-decoration: underline;
}


@media (max-width: 989px) {
  .pg-menu {
    flex-direction: column;
  }
  .pg-mega {
    position: static;
    transform: none;
    width: 100%;
    display: block;
    box-shadow: none;
  }
  .pg-mega__inner {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
  }
}

This is an example. I still suggest let developer do this instead… many minor adjust needed.