create home page filter

Store Design
, ,

Topic summary

A Shopify store owner seeks help creating a vehicle brand/model filter for their homepage, similar to a reference example they provided. They shared their store URL (pawauto.com) and a sample site (omacshop.com) for comparison.

Solution Provided:

  • A community member offered custom CSS code to style the filter interface
  • The code targets dropdown selects, buttons, and hover states to match the desired appearance
  • Instructions included: navigate to Online Store → Theme → Edit Code, locate styles.css in assets folder, and paste the provided CSS

Current Issue:

  • The initial CSS implementation worked well visually
  • However, a usability problem emerged: the filter only activates when clicking directly on text, not anywhere on the dropdown row
  • This creates confusion as users expect the entire clickable area to work

Next Steps:

  • The helper suggested testing whether this click issue existed before the CSS changes
  • If it’s a new problem, JavaScript modifications may be needed to expand the clickable area
  • Recommended temporarily removing the custom CSS to isolate whether it caused the click behavior issue
Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hello, how can I correct the vehicle brand model filter on my website’s interface? I want to get a view like the one in the picture.

I have attached the pictures as my website and sample website.

my web site.jpg
my web site.jpg1195×453 61.3 KB

sapmle web site.jpg
sapmle web site.jpg1412×563 116 KB

2

Could you please share you store’s URL?

3

Hey @canem34

Welcome to Shopify Community.

Some themes do offer this. You can buy them. Or if you don’t want to buy this needs to be custom coded, thus you will need a developer.

Let me know if you need one.

Thanks

4

www.pawauto.com

5

sample web site www.omacshop.com

6

how can we move forward on this issue.

7

  1. Go to ‘Online Store’ → Theme → Edit Code

  2. In the assets folder locate the file ‘styles.css’

  3. At the end of the file paste this code

input.advanced.btn.auto-full-width {
    background: #3761bf;
    border: none;
    border-radius: 5px;
    height: 50px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1);
    font-weight: 600;
    transition: background-color 0.35s ease-in-out;
}

input.advanced.btn.auto-full-width:hover {
    background-color: #0134a7;
}

summary.styledSelect {
    min-height: 50px;
    border: 1px solid black;
    border-radius: 5px;
    font-weight: bold;
}
span.icon.icon-arrow-down {
    color: black;
}
.content ul.unformatted.options li {
    padding: 4px;
    line-height: 40px;
    cursor: pointer;
}
ul.options {
    border-left: 3px solid #3761bf;
    border-right: 3px solid #3761bf;
    border-bottom: 3px solid #3761bf;
}
summary.styledSelect {
    display: flex;
    align-items: center;
}
.content ul.unformatted.options li button:hover {
    color: white !important;
    cursor: unset !important;
}
ul.options.unformatted li:hover {
    background: #3761bf !important;
    background-image: linear-gradient(#3875d7 20%, #2a62bc 90%) !important;
}
ul.options.unformatted li:hover button {
    font-weight: bold !important;
    color: white !important;
}
ul.options.unformatted li button {
    transition: color 0s !important;
}
ul.unformatted.options li.first:hover {
    color: white !important;
    cursor: unset !important;
}
ul.options.unformatted li {
    transition: color 0s !important;
}
1 Like
8

Thank you very much. It turned out very well. I am grateful to you. I have been working on this for a long time. I can receive your positive and negative criticisms for our site. If there is a better theme to recommend,

9

Thank you again sincerely. I have only one request. It only works when you hover over the text to select it in the menu. It does not work when you click on the other nasal area, which gives the impression that the filter is not working. Can we activate this by clicking anywhere on the entire line as in the picture?

10

Hey thanks for the response. For the hover problem. Was this problem occurring before the css changes? . If that’s the case you’ll probably need to add some javascript. So please try and remove the css that I’ve given you and check if the click only works when you click on the text.