On the Collection pages, you have 3 options:


1. Add a new Outlink External Link button

2. Replace the Add to Cart button with the Outlink button

3. Redirect to the external link when the user clicks the product grid


If you are unsure of the integration you may simply contact us here. We will do the integration for you.


1. Add a new Outlink button 


Let's say you want to add the Outlink button below price on the product cards on the Collection page.


Look for snippets/card-product.liquid file (or the file that holds the product card info).


Add the below code below price information.


{% render 'outlink-custom', product:card_product, o_showOutlink:1, o_hideCart:0 , o_classes: 'quick-add__submit button button--full-width button--secondary', o_style: '' %}



The code will look as -


This will add an Outlink button below the price information on the Product Card.



2. Replace the existing Add to Cart button with the Outlink button


Go to snippets/card-product.liquid file.


Add the below code to replace the add to cart button with an external link button for Outlink products.


{% render 'outlink-custom', product:card_product, o_showOutlink:1, o_hideCart:1 , o_classes: 'quick-add__submit button button--full-width button--secondary', o_style: '' %}

<div class="o_original_{{ card_product.id }}">


// <button> code


</div>


The code will look as -




This will replace the existing Add to Cart button with the Outlink button.


3. Redirect to the external link on clicking the product card


If you want the users to be redirected to the external page on clicking the product card then follow the steps below:


Go to snippets/card-product.liquid file.


Locate the HTML for the product title. You can search for the keyword 'card_product.title' in <a> element.


Add the below code:


 {% render 'outlink-custom', product:card_product, o_showOutlink:0, o_hideCart:1 , o_classes: '', o_style: '' %}


          {% if card_product.metafields.outlink["isOutlink"] == 1 %}


             {% assign outlink_url = card_product.metafields.outlink["url"] %}

             {% assign outlink_link_id = "outlink_button"| append: card_product.id  %}

               {% if 1 == 1 %}

                 {% if card_product.metafields.outlink["isoutpage"] == 1 %}

                    {% assign outlink_url = "https://outpage.co/"| append: card_product.id  %}

                 {%endif%}

           {% endif %}

            

            <a id="{{ outlink_link_id }}" name="OutlinkLink" data-productid="{{card_product.id}}" onclick="OutlinkButtonClick{{card_product.id}}()" href="{{ outlink_url }}" target="_blank" class="full-unstyled-link" rel="nofollow">{{ card_product.title }}</a>


          {% endif %}


         <div class="o_original_{{ card_product.id }}">


            //<title code>

            </div>



The code will look as - 



Note: The code may vary from theme to theme.


(If you are having problems please raise a support ticket here. We will do the integration for you.)