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

Solved
Excursionist
13 0 1

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

Success.

Shopify Partner
1157 94 141

hi,@@

You can look here 

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

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
1 Like
Excursionist
13 0 1

Thanks @Perennial , 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
Shopify Partner
1157 94 141

Please Share a Store url to better assist

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
1 Like
Excursionist
13 0 1

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

0 Likes

Success.

Shopify Partner
1157 94 141

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;}

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
1 Like
Excursionist
13 0 1

@Perennial - 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