Radio buttons instead of "filter by" drop down on product page (Narrative Theme)

[jahlbom]

Hi,

The product page in the Narrative Theme isn't the best but I'm trying to make the best out of it.

And instead of having a "filter by" drop down menu in the shop I want to display radio buttons directly to filter with instead to make it more clear and easier for the customer visiting the site.

See below example of how it looks today --> how I would like it to be

Anyone here who knows if it's possible + what and where to add code for it?

Let me know if you need any more info. Thanks! // Jesper

[Qualitycheck · Accepted solution]

hi,@@jahlbom

You can look here 

https://help.shopify.com/en/themes/customization/collections/filter-collections-with-product-tags

[jahlbom]

Thanks @Qualitycheck , exactly the solution I'm looking for. Now we're getting somewhere :) And a couple of questions if you're able to help me.

Where do I find the code that controls the margin below the product tags and how do I hide or get rid of the "filter by" drop down menu? I can't find it in the collection-template.liquid. Thanks!

[Qualitycheck]

Please Share a Store url to better assist

[jahlbom]

@Qualitycheck - just sent you store url and password to your email with the code, thanks!

[Qualitycheck · Accepted solution]

Hi
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file
.subnav {
text-align: center;
clear: both;
list-style-type: none;
margin: 3 0 0 0;
padding: 0;
justify-content: center;
}
.subnav li {display: inline-block;float: none;}

[jahlbom]

@Qualitycheck - Thanks a lot for your help.

To get it in center I had to change the code in the collection-template.liquid file as well after I added the code you provided above for theme.scss file.

Collection-template.liquid

I replaced this line --> .subnav li { display: block; float: left; }

To this line --> .subnav li { display: inline-block; float: center; }
 

Have a great december, christmas and new years eve. You made my day with your help today! :)

End result is in the picture below

[pokpok]

Hi, do you know how to change the tag name on the button? I tag my products with brief words but want to specify more on the radio buttons. (For example, is it possible to change the text from 'cotton' to 'Cotton Shirt' ?)

[jahlbom]

Hi @pokpok , you do this under ”tags” on the specific product/item. The radiobuttons are the tags I’ve set up in this Case.

 

[EmmaHarmony]

Hi, I am also using narrative theme and have successfully added the radio buttons.

However, I need help removing the filter by drop down option.

I am working in a duplicate of my live theme.