Product List Page

Examples

Product List Page

Preview

Code

<style>
  .search-page-wrapper {
    display: flex;
    gap: 20px;
  }

  .search-page-wrapper-aside {
    flex: none;
    width: 250px;
  }

  @media screen and (max-width: 768px) {
    .search-page-wrapper-aside {
      display: none;
    }
  }

  .search-page-wrapper-result {
    flex: 1;
  }

  .search-page-wrapper-result-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0 !important;
    overflow-x: auto;
  }

  .search-page-wrapper-result-filters vviinn-extended-filters {
    display: none;
  }

  @media screen and (max-width: 768px) {
    .search-page-wrapper-result-filters vviinn-extended-filters {
      display: block;
    }
    .search-page-wrapper-result-filters vviinn-selected-filters {
      margin-top: 10px;
    }
    .search-page-wrapper-result-filters
      vviinn-selected-filters::part(selected-filters-list) {
      flex-wrap: wrap;
    }
  }

  .search-page-wrapper-result vviinn-results {
    --product-card-width: 215px;
  }

  @media screen and (max-width: 768px) {
    .search-page-wrapper-result vviinn-results {
      --product-card-width: 155px;
    }
  }
</style>

<div class="search-page-wrapper">
  <div class="search-page-wrapper-aside">
    <vviinn-extended-filters locale="en-US" mode="preview"></vviinn-extended-filters>
  </div>
  <div class="search-page-wrapper-result">
    <div class="search-page-wrapper-result-filters">
      <vviinn-extended-filters locale="en-US"></vviinn-extended-filters>
      <vviinn-selected-filters locale="en-US"></vviinn-selected-filters>
    </div>
    <vviinn-results
      token="YOUR_READ_ONLY_TOKEN"
      image-resolution-width="500"
      locale="en-US"
      results-count="9"
      text-search-query="YOUR_SEARCH_QUERY"
      one-click-discovery-mode="append-grid"
      product-details-new-tab="true"
    ></vviinn-results>
  </div>
</div>