Manual installation instructions

Did the automatic install not work for your store?

Use these instructions ONLY if the automatic install not work for your store.
If products can not be swiped, or the cart icon does not open the cart, there is a need to help identifying them.

How it works

The Swipe-2-Buy app works by identifying the products and the cart icon.

  • It identifies the products, and makes them draggable.
  • It identifies the cart icon, and connects it to the "hidden" and "sliding" carts.

This is done automatically on most sites but sometimes it needs some help.
If there are products not being able to be dragged, ot the cart icon does not open the cart, there is a need to help identifying them. This is done by adding a small snippet inside the theme templates (liquid).

Identifying products

For products, the snippet needs to be added to:

  • Collections
  • Product
  • Search
  • Featured
  • any additional pages where a product is being shown.

Identifying the cart icon

For cart icon, a class name needs to be added to:

  • Header

Identifying the cart counter

For cart counter, a class name needs to be added to:

  • Header

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme is a newer theme that lets you drag and drop to arrange the layout of your store's pages.
To figure out whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme.

Sectioned themes
Non-sectioned themes

Sectioned themes

Product page in sectioned themes

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Sections directory, open product-template.liquid.
  4. The placement of the snippet should be where the product image is loaded.
    Look for "product.featured_image" or "product.featured_media" in the file.
    Place the snippet before or after this the text occurs the first time, as long it is inside the parent element.
    <!-- Touchize snippet start-->
    <div class="tz-product" data-tzproducthandle="{{product.handle}}" data-tzproductimage="{{product.featured_image| img_url}}" data-tzproducturl="{{product.url}}"></div>
    <!-- Touchize end -->

It might look something like this:

<div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{ section.settings.media_size }}-media{% endif %}">

    <div class="grid__item product-single__media-group {{ product_media_width }}{% if section.settings.media_size == 'full' %} product-single__media-group--full{% endif %}" data-product-single-media-group>
    <!-- Touchize snippet start-->
    <div class="tz-product" data-tzproducthandle="{{product.handle}}" data-tzproductimage="{{product.featured_image| img_url}}" data-tzproducturl="{{product.url}}"></div>
    <!-- Touchize end -->
      {%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

      {%- for media in product.media -%}
        {% include 'media', media: media, featured_media: featured_media, height: height, enable_image_zoom: enable_image_zoom, image_zoom_size: product_image_zoom_size, image_scale: product_image_scale %}
      {%- endfor -%}
  1. Click Save.

Collection pages in sectioned themes

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Snippets directory, you need to find and add to both the files:
    • product-card-grid.liquid
    • product-card-list.liquid
      In some themes, these files have a different name. If you cannot find product-grid-item/list.liquid, then look for one of the following:
    • product-card.liquid
    • product-card-item.liquid
    • product-block.liquid
    • product-item.liquid
  4. The placement of the snippet should be at the end of the file, after the last element.
    <!-- Touchize snippet start-->
    <div class="tz-product" data-tzproducthandle="{{product.handle}}" data-tzproductimage="{{product.featured_image| img_url}}" data-tzproducturl="{{product.url}}"></div>
    <!-- Touchize end -->

It might look something like this in product-card-grid.liquid:

          {% include 'product-price-listing', product: product, show_vendor: show_vendor %}
    </div>
    <!-- Touchize snippet start-->
    <div class="tz-product" data-tzproducthandle="{{product.handle}}" data-tzproductimage="{{product.featured_image| img_url}}" data-tzproducturl="{{product.url}}"></div>
    <!-- Touchize end -->

It might look something like this in product-card-list.liquid:

    <div class="list-view-item__price-column">
      {% include 'product-price-listing', product: product, show_vendor: false %}
    </div>
  </div>
</div>
<!-- Touchize snippet start-->
<div class="tz-product" data-tzproducthandle="{{product.handle}}" data-tzproductimage="{{product.featured_image| img_url}}" data-tzproducturl="{{product.url}}"></div>
<!-- Touchize end -->
  1. Click Save.
  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Sections directory, open featured-product.liquid.
  4. The placement of the snippet should be where the product image is loaded.
    Look for "product.featured_image" or "product.featured_media" in the file.
    Place the snippet before or after this the text occurs the first time, as long it is inside the parent element.
    <!-- Touchize snippet start-->
    <div class="tz-product" data-tzproducthandle="{{product.handle}}" data-tzproductimage="{{product.featured_image| img_url}}" data-tzproducturl="{{product.url}}"></div>
    <!-- Touchize end -->

It might look something like this:

  <div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{ section.settings.media_size }}-media{% endif %}">
    <div class="grid__item product-single__media-group {{ product_media_width }}{% if section.settings.media_size == 'full' %} product-single__media-group--full{% endif %}" data-product-single-media-group>
    <!-- Touchize snippet start-->
    <div class="tz-product tzhello" data-tzproducthandle="{{product.handle}}" data-tzproductimage="{{product.featured_image| img_url}}" data-tzproducturl="{{product.url}}"></div>
    <!-- Touchize end -->
      {% unless section_onboarding %}
        {%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
  1. Click Save.

Identifying the cart icon in sectioned themes

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Sections directory, open header.liquid.
  4. Look for " {{ routes.cart_url }} " in the file.
    Place the string " tz-minicart" last in the class list
    It might look something like this:
    <a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart tz-minicart">
        {% include 'icon-cart' %}
        <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
        <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}" data-cart-count-bubble>
            <span data-cart-count>{{ cart.item_count }}</span>
            <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
        </div>
    </a>
  1. Click Save.

Identifying the cart counter in sectioned themes

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Sections directory, open header.liquid.
  4. Look for " {{ cart.item_count }} " in the file.
    Place the string " tz-cartcounter" last in the class list. You might need to create the class list: " class="tz-cartcounter" ".
    It might look something like this:
    <a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart tz-minicart">
        {% include 'icon-cart' %}
        <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
        <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}" data-cart-count-bubble>
            <span data-cart-count class="tz-cartcounter">{{ cart.item_count }}</span>
            <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
        </div>
    </a>
  1. Click Save.

Non-sectioned themes

Product page in non-sectioned themes

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Templates directory, open product.liquid.
  4. The placement of the snippet should be where the product image is loaded.
    Look for "product.featured_image" or "product.featured_media" in the file.
    Place the snippet before or after this the text occurs the first time, as long it is inside the parent element.
    <!-- Touchize snippet start-->
    <div class="tz-product tzhello" data-tzproducthandle="{{product.handle}}" data-tzproductimage="{{product.featured_image| img_url}}" data-tzproducturl="{{product.url}}"></div>
    <!-- Touchize end -->

It might look something like this:

  <div class="grid product-single">
    <!-- Touchize snippet start-->
    <!-- Touchize snippet start-->
    <div class="tz-product tzhello" data-tzproducthandle="{{product.handle}}" data-tzproductimage="{{product.featured_image| img_url}}" data-tzproducturl="{{product.url}}"></div>
    <!-- Touchize end -->
    <div class="grid__item large--one-half text-center">
      <div class="product-single__photos" id="ProductPhoto">
        {% assign featured_image = current_variant.featured_image | default: product.featured_image %}
        <img src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg">
      </div>
  1. Click Save.

Collection pages in non-sectioned themes

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Snippets directory, you need to find the file:
    • product-grid-item.liquid
      In some themes, the file have a different name. If you cannot find product-grid-item.liquid, then look for one of the following:
    • product-card.liquid
    • product-card-item.liquid
    • product-block.liquid
  4. The placement of the snippet should be right after the first element line that comes after the comments, thus inside the product element.
    <!-- Touchize snippet start-->
    <div class="tz-product tzhello" data-tzproducthandle="{{product.handle}}" data-tzproductimage="{{product.featured_image| img_url}}" data-tzproducturl="{{product.url}}"></div>
    <!-- Touchize end -->

It might look something like this in product-grid-item.liquid:

<div class="grid__item {{ grid_item_width }}">
    <!-- Touchize snippet start-->
    <div class="tz-product tzhello" data-tzproducthandle="{{product.handle}}" data-tzproductimage="{{product.featured_image| img_url}}" data-tzproducturl="{{product.url}}"></div>
    <!-- Touchize end -->
    <a href="{{ product.url | within: collection }}" class="grid__image">
        <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
    </a>
  1. Click Save.

Identifying the cart icon in non-sectioned themes

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Layout directory, open theme.liquid.
  4. Look for " a href="/cart" " in the file. It might be in more than one place!
    Place the string " tz-minicart" last in the class list of those element
    It might look something like this:
    <div class="site-nav--mobile">
        <a href="/cart" class="js-drawer-open-right site-nav__link tz-minicart" aria-controls="CartDrawer" aria-expanded="false">
            <span class="icon-fallback-text">
  1. Click Save.

Identifying the cart counter in non-sectioned themes

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Layout directory, open theme.liquid.
  4. Look for " a href="/cart" " in the file. It might be in more than one place!
    Place the string " tz-cartcounter" last in the class list. You might need to create the class list: " class="tz-cartcounter" ".
    It might look something like this:
            <div>
              <a href="/cart" class="site-header__cart-toggle js-drawer-open-right" aria-controls="CartDrawer" aria-expanded="false">
                <span class="icon icon-cart" aria-hidden="true"></span>
                {{ 'layout.cart.title' | t }}
                (<span id="CartCount" class="tz-cartcounter">{{ cart.item_count }}</span>
                {{ 'layout.cart.items_count' | t: count: cart.item_count }}
                <span id="CartCost">{{ cart.total_price | money }}</span>)
              </a>
            </div>```
5. Click Save.