The Outlink app can easily be integrated with the themes compatible with Online Store 2.0. This guide will walk you through the process of how to add the integration code to the Dawn Theme.


For integrating older themes refer to the integration guide here.


External links can be added to Product pages as well as pages with repeating product blocks (for example collection pages). The guide below is for integration with Product pages. For repeating product block pages follow the guide here.


Steps


1. Open your Shopify admin.

2. Click Online Store.

3. Click Themes.

4. Click Actions for your published theme.



5. Click Edit code.



6. Click the file buy-buttons.liquid under the Snippets folder.



7.  The buy-buttons.liquid file will open in the online code editor. In the online code editor window, locate the HTML for your add_to_cart button (you can do this by searching with CTRL-f OR COMMAND-f). The HTML for your add to cart button will look something like this:


<button

            id="ProductSubmitButton-{{ section_id }}"

            type="submit"

            name="add"

            class="product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"

            {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}

              disabled

            {% endif %}

          >

            <span>

              {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}

                {{ 'products.product.sold_out' | t }}

              {%- else -%}

                {{ 'products.product.add_to_cart' | t }}

              {%- endif -%}

            </span>

            {%- render 'loading-spinner' -%}

  </button>



The trick is to find a <button> tag that includes the text 'products.product.add_to_cart'. 


(If you need assistance please contact support@outlinkapp.freshdesk.com.)


8. Above the button code line, add the following code.


{% render 'outlink-custom', product:product, o_showOutlink:1, o_hideCart:1 , o_classes: 'button button--full-width button--primary', o_style: '' %}


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


//<button> code


</div>


The boxes in blue represent the Outlink integration code. The box in red is the existing <button> code. 

It will look as shown in the image below. 




Similarly, the Outlink button code can be placed for the Featured Product Card on the Home page, and also on the product grid on the Search page.



(If you are having problems please contact support@outlinkapp.freshdesk.com. We will do the integration for you.)