Changing all Add to cart buttons to View more

Solved

Changing all Add to cart buttons to View more

swishlatvija
Explorer
62 0 8

Hello,

 

Could someone please tell us how to change all Add to cart buttons to View more? So after clicking the button, opens a product page.

Link: www.swishtiles.com

 

We will certainly not forget to mark your answers as solutions!

 

Kind regards,

Swish

Accepted Solution (1)

Ninthony
Shopify Partner
2332 350 1034

This is an accepted solution.

Those buttons are specifically functioning to add to cart. You'd probably be better off unchecking the quick add setting in the section settings and adding in a new section setting. Open up your featured-collection.liquid file and Ctrl + F and look for card-product. You'll see a render for the snippet:

Ninthony_1-1685837661553.png

 

 

You're gonna add a new option in there. Copy the "show_quick_add" line and make a space underneath and add a new option called "link_to_pdp". Should look like this:

 

{% render 'card-product',
  card_product: product,
  media_aspect_ratio: section.settings.image_ratio,
  show_secondary_image: section.settings.show_secondary_image,
  show_vendor: section.settings.show_vendor,
  show_rating: section.settings.show_rating,
  show_quick_add: section.settings.enable_quick_add,
  link_to_pdp: section.settings.link_to_pdp,
  section_id: section.id
%}

 

Then scroll down into the schema where the "enable_quick_add" setting was:

 

Ninthony_2-1685837916598.png

 

I want you to copy that whole highlighted section there, including the comma at the end of the bracket. Make a space directly below it and paste it. Change the id to "link_to_pdp" and change the label to "Link to pdp", that long string is just a translation file reference and I don't feel like explaining all that to you. It should look like this:

 

    {
      "type": "checkbox",
      "id": "enable_quick_add",
      "default": false,
      "label": "t:sections.featured-collection.settings.enable_quick_buy.label"
    },
    {
      "type": "checkbox",
      "id": "link_to_pdp",
      "default": false,
      "label": "Link to PDP"
    },

 

And a picture for reference:

Ninthony_3-1685838107315.png

 

Save the file. You've just added a new setting into your featured collection file. Open up your customizer and go to your featured collection on the homepage and look at the section settings. There should be a new checkbox underneath the quick add option called "Link to PDP"

 

Ninthony_4-1685838269753.png

 

Uncheck the quick add button and check the "Link to PDP" option and save. Now we're going to make it output a button. Go into your code editor again and open up card-product.liquid in your snippets folder. Scroll all the way to about line 199, you should see a render for price. I want you to put this code directly under it:

{% if link_to_pdp %}
  <a class="card__view-more button button--full-width button--secondary" href="{{ card_product.url }}">
    View more
  </a>
{% endif %}

 

Should look like this, I just didnt add all the additional classes before I took the screenshot:

 

Ninthony_5-1685839098020.png

 

At this point you should see a link now under your product cards. Greying out product info here cause it's from a former employer:

 

Ninthony_7-1685839563232.png

 

There you go, those should all link to your PDP now.

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Replies 7 (7)

shreyhweb
Shopify Partner
633 111 115

change the text by some custom code.

 

so you need a developer for done that

 

if you want to further discuss about it then you can contact us

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com

Ninthony
Shopify Partner
2332 350 1034

This is an accepted solution.

Those buttons are specifically functioning to add to cart. You'd probably be better off unchecking the quick add setting in the section settings and adding in a new section setting. Open up your featured-collection.liquid file and Ctrl + F and look for card-product. You'll see a render for the snippet:

Ninthony_1-1685837661553.png

 

 

You're gonna add a new option in there. Copy the "show_quick_add" line and make a space underneath and add a new option called "link_to_pdp". Should look like this:

 

{% render 'card-product',
  card_product: product,
  media_aspect_ratio: section.settings.image_ratio,
  show_secondary_image: section.settings.show_secondary_image,
  show_vendor: section.settings.show_vendor,
  show_rating: section.settings.show_rating,
  show_quick_add: section.settings.enable_quick_add,
  link_to_pdp: section.settings.link_to_pdp,
  section_id: section.id
%}

 

Then scroll down into the schema where the "enable_quick_add" setting was:

 

Ninthony_2-1685837916598.png

 

I want you to copy that whole highlighted section there, including the comma at the end of the bracket. Make a space directly below it and paste it. Change the id to "link_to_pdp" and change the label to "Link to pdp", that long string is just a translation file reference and I don't feel like explaining all that to you. It should look like this:

 

    {
      "type": "checkbox",
      "id": "enable_quick_add",
      "default": false,
      "label": "t:sections.featured-collection.settings.enable_quick_buy.label"
    },
    {
      "type": "checkbox",
      "id": "link_to_pdp",
      "default": false,
      "label": "Link to PDP"
    },

 

And a picture for reference:

Ninthony_3-1685838107315.png

 

Save the file. You've just added a new setting into your featured collection file. Open up your customizer and go to your featured collection on the homepage and look at the section settings. There should be a new checkbox underneath the quick add option called "Link to PDP"

 

Ninthony_4-1685838269753.png

 

Uncheck the quick add button and check the "Link to PDP" option and save. Now we're going to make it output a button. Go into your code editor again and open up card-product.liquid in your snippets folder. Scroll all the way to about line 199, you should see a render for price. I want you to put this code directly under it:

{% if link_to_pdp %}
  <a class="card__view-more button button--full-width button--secondary" href="{{ card_product.url }}">
    View more
  </a>
{% endif %}

 

Should look like this, I just didnt add all the additional classes before I took the screenshot:

 

Ninthony_5-1685839098020.png

 

At this point you should see a link now under your product cards. Greying out product info here cause it's from a former employer:

 

Ninthony_7-1685839563232.png

 

There you go, those should all link to your PDP now.

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
swishlatvija
Explorer
62 0 8

Hi @Ninthony ,

 

Your explanation worked and was simply perfect! Thank you very much, and have a great day!

swishlatvija
Explorer
62 0 8

Hi @Ninthony 

 

Sorry for bothering you, but maybe you know how to align these buttons in one line? Please see the image below:

Screenshot - 2023-06-04T205858.438.png

 

Your assistance is highly appreciated! 

Ninthony
Shopify Partner
2332 350 1034

Problem with that is it's going to depend on your product titles, as you can see your one only breaks to two lines while the other two break to three, and this is going to vary on different screen sizes as well. I get that it can look visually unappealing, and there are things that you can do to solve this, but is it worth it? I don't think so, I highly doubt it will have any kind of effect on your conversion. Paste the page here, if I get some free time I'll write you a script that will check the height of all of those titles in the section and set them all to the tallest title, that way all the buttons will match up.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
javierestebanx
Shopify Partner
1 0 0

Hi @Ninthony I did everything as you said here, but the "link to pdp" check is not showing on my customizer (I'm not doing this in the home but in the collection page, maybe is this what is wrong??) 

 

I would like to have both buttons active, quick add and view more. I'm using dawn theme.

 

Shop is: https://euroinnova-edu.myshopify.com/collections/educacion

password: shiepe

 

Thank you so much in advance

stussieberg
New Member
4 0 0

Thanks! This helped me a lot. 

I have a similar request. All the products I've imported to my store have this "View Product" pop up, which is the thing I want as the standard. The last product I added shows this "Add To Bag" instead of that button that triggers the product page preview pop-up, what should I do to have it beneath this product? 

Best regards
Dario