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

Solved
Highlighted
Excursionist
22 1 7

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

 

today.jpg

after.jpg

0 Likes
Highlighted
Highlighted
Excursionist
22 1 7

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!

 

Skärmavbild 2019-12-23 kl. 07.23.55.png

0 Likes
Highlighted
Shopify Expert
1381 112 211

Please Share a Store url to better assist

Highlighted
Excursionist
22 1 7

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

0 Likes
Highlighted
Shopify Expert
1381 112 211

This is an 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;}

Highlighted
Excursionist
22 1 7

@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

after.png

0 Likes
Highlighted
Tourist
6 0 1

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' ?)

0 Likes
Highlighted
Excursionist
22 1 7

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

B99A1CE3-41A0-4EC5-822F-4C26B303D759.jpeg

 

0 Likes
Highlighted
New Member
2 0 1

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.

0 Likes