Adding a "more info" button to collections pages that redirects to products

New Member
9 0 0

Hi all,

 

I have been searching through the forums for a post on how i can add a "More Info" button below my products on my collection pages that would, when clicked on, take the customer to the product description page.  I have found a couple posts that have good info but seem to be missing a key element that i am looking for.

 

I am currently using the Minimal theme and have found the area in which to change the code for such a button.  I have used the following code from other posts and it works for most of what i am trying to do except that when it is clicked it doesnt redirect to the full product description with all the different variants, it only goes to the single variant that shows on the collection page.  I changed the value from "add to cart" to more info but if my limited knowledge is correct the part that is labeled action="/cart/add" needs to be changed.  I have tried  using "product.url"  and just get a 404 error page.  can anyone help me with the missing code needed to get this done?

 

Thank you

 

<form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input min="1" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn" />
</form> 

 

0 Likes
Shopify Partner
1927 321 406

Hi,

You want to redirect user to product page on click of "More Info" button? Or want to direct add to cart product by this button?

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
9 0 0
To product...hence the 'more info'
0 Likes
Shopify Partner
1927 321 406

So, you need to use like bellow code

<a href="{{ product.url | within: collection }}" class="btn" />More Info</a>

This code work with collection file.

Note: If not work then send me store url and theme name.

let me know if you need help. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
9 0 0
where does this go? is it added with the other code? does it go in alone?

I tried it a couple places and it didnt work
0 Likes
Shopify Partner
1927 321 406

You can place this line in product grid where you placed above form on collections page,

send me your store url and theme name so i can give solution.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Excursionist
28 0 2

I'm trying to do the same thing, but on the Fashionopolism theme. Can you please let me know where this code will go? 

 

https://www.mobilestairlift.com/collections/mobile-stairlift-accessories

 

Thank you! 

0 Likes
Shopify Partner
1927 321 406

Hi @chadwicknyc 

You can add this code in section->collection-template.liquid file.

If cant find then i have to check in theme because some theme has different structure.

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Excursionist
28 0 2

@Jasoliya  Thanks for your help. 

 

I've placed it in there, but for some reason it's not populating on the products page (or any pages): https://www.mobilestairlift.com/collections/mobile-stairlift-accessories

 

Is there a certain line it should go in? I've placed a screenshot for reference. 

Screen Shot 2019-10-21 at 1.46.44 PM.png

0 Likes
Shopify Partner
1927 321 406

You can add this line of code in Snippet->product-listing.liquid file next to {{ product.title}}

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like