Categories
Digital Marketing Google Ads Shopify Shopping

Add Sale Price to Shopify’s Google Shopping feed

As of Aug 12, 2020 Shopify’s Google Shopping app does NOT send compare_at_price to Google Merchant Center. This means that you are unlikely to receive the SALE annotation in your Google Shopping ads when your products are on sale:

Sale annotation in Google Shopping
SALE labels and price markdown annotations usually only appear if you provide Google Shopping with both your regular price (compare_at_price) and your sale price.

To fix this, you must create and upload a supplemental data feed to Google Merchant Center.

Create a Price Feed in Shopify

The first step is to create a data feed in Shopify containing your products sale and regular prices. We can accomplish this by creating a custom Shopify Collection Template that will output XML data instead of HTML:

1. Create a new Collection Template called collection.xml-sale-pricing.liquid with the following code:

{% layout none %}<?xml version="1.0"?>
<rss xmlns:g="http://base.google.com/ns/1.0" version="2.0">
{% paginate collection.products by 1000 %}
{%- assign CountryCode = 'US' -%}
{%- if shop.currency == 'CAD' -%}{%- assign CountryCode = 'CA' -%}{%- endif -%}
<channel>
<title>{{ shop.name }} {{ collection.title | strip_html | strip_newlines | replace: '&', '&amp;' | replace }}</title>
<link>{{ shop.url }}</link>
<description>{{ collection.description | strip_html | strip_newlines | replace: '&', '&amp;' }}</description>
{% for product in collection.products %} 
  {% for variant in product.variants %}
    {%- if variant.compare_at_price > variant.price -%}
      {%- assign OnSale = true -%}
      {%- assign Price = variant.compare_at_price -%}
      {%- assign SalePrice = variant.price -%}
        <item>
            <g:item_group_id>shopify_{{ CountryCode }}_{{ product.id }}</g:item_group_id>
            <g:id>shopify_{{ CountryCode }}_{{ product.id }}_{{ variant.id }}</g:id>
            <g:price>{{ Price | money_without_currency }} {{ shop.currency }}</g:price>
            <g:sale_price>{{ SalePrice | money_without_currency }} {{ shop.currency }}</g:sale_price>
        </item>
    {%- endif -%}
{% endfor %}
{% endfor %}
</channel>
</rss>
{% endpaginate %}

Also available on github

2. Create a new collection called “google-feed-sale-price” and choose xml-pricing-feed as your collection template.

3. Preview the collection and copy the url. Your url should look something like this: yourstoredomain.com/collections/google-feed-sale-price

Add a Supplemental Data Feed in Google Merchant Center

1. Open Merchant Center and go to
Products > Feeds > Supplemental Feeds > Add Supplemental Feed

  • Name: Sale Pricing Update
  • Feed Type: Scheduled Fetch
  • File Name: google-feed-sale-price
  • File Url: yourstoredomain.com/collections/google-feed-sale-price

Leave everything else as default values and click Continue

2. Make sure there’s a checkmark beside Content API and click Create Feed

3. You should now see your newly created feed in the Supplemental Feeds section. Click on your feed’s name and then click on Fetch Now to update pricing data immediately.

Done

It may take up to 30 minutes for your main feed to be updated. Any new sale pricing will now be uploaded once per day.

Categories
Digital Marketing Facebook Ads Shopify

Fix Missing Fields in Shopify’s Facebook Product Feed

Last Update: September 18, 2020

If you use the Facebook Channel on your Shopify store, you will notice that some product attributes are missing in the product catalog:

  • Google Product Category
  • Gender
  • Material
  • Additional Images

Below is the solution to add these missing details. This will give you finer control over your Facebook Product Sets and will let you create richer dynamic ads with multiple product images.

Pre-requisites

Before we start, make sure all of the following are done:

  1. Install the Google Sales Channel
    The script leverages some of the metafields that are created on by the Google Sales Channel
  2. Install the Facebook Sales Channel
  3. Setup Empty Field Rules
    This is not actually a pre-requisite, but it’s a good backup in case things break down with your feed. This sets some default values for fields such as condition and availability.
  1. Go to Facebook Business Manager and then
    Commerce Manager > Catalog > Data Sources
  2. Click on your data feed and go to Settings
  3. Scroll down to Data Feed Rules and click on Add Rules > Set Default Values
  4. Create default values for age_group, gender, availability, condition, material, and any other fields that make sense for your business.

Step 1
Create the Facebook Product Feed Template

To create the Facebook product update feed, we will use a “hack” to transform a standard Shopify Collection page into and XML data feed:

  • In the Shopify admin, go to
    Online Store > Themes > Action > Edit Code
  • Under Templates, choose Add a new Template
  • Choose collection from the drop down and name your template facebook-feed-template

Paste the code below into your newly created template file and click Save.

{% layout none %}<?xml version="1.0"?>
<rss xmlns:g="http://base.google.com/ns/1.0" version="2.0">
{%- paginate collection.products by 1000 -%}
{%- assign useSEOdescription = true -%}
{%- assign additionalImagesForVariants = false -%}
{%- assign filterVariantImagesByColor = false -%}
{% comment %}
This template is used to add additional information to the Facebook product catalog
</comment:title>
{% endcomment %}
<channel>
<title>{{ shop.name }} {{ collection.title | replace: '&', '&amp;' }}</title>
<link>{{ shop.url }}</link>
<description>{{ collection.description | strip_html }}</description>
{% for product in collection.products %}
{%- assign GoogleProductCategory = product.metafields.mm-google-shopping.google_product_category -%}
{%- assign Gender = product.metafields.mm-google-shopping.gender -%}
{%- assign AgeGroup = product.metafields.mm-google-shopping.age_group -%}
{%- assign Material = product.metafields.mm-google-shopping.material  -%}
{%- assign Color = "" -%}

{%- if product.variants.size > 0 -%}
{%- for variant in product.variants -%}
{%- for option in product.options -%}
{%- if option == 'Color' -%}{% capture Color %}{{ variant.options[forloop.index0] }}{% endcapture %}{%- endif -%}
{%- endfor -%}

{% assign additional_images = product.images %}
{% if filterVariantImagesByColor %}{% assign additional_images = product.images | where: "alt", Color | sort: 'attached_to_variant' | reverse%}{% endif %}

<item>
<g:id>{{ variant.id }}</g:id>
<g:brand>{{ product.vendor }}</g:brand>
{% if useSEOdescription and product.metafields.global.description_tag.size > 0 %}<description>{{ product.metafields.global.description_tag | strip_html | strip_newlines | replace: '&', '&amp;' }}</description>{% endif %}
<g:google_product_category>{{ GoogleProductCategory | replace: '&', '&amp;'  }}</g:google_product_category>
<g:item_group_id>{{ product.id }}</g:item_group_id>
<g:content_id>{{ variant.id }}</g:content_id>
<g:availability>{% if variant.available %}in stock{% else %}out of stock{% endif %}</g:availability>
<g:material>{{ Material }}</g:material>
<g:gender>{{ Gender }}</g:gender>
<g:age_group>{{ AgeGroup }}</g:age_group>
{% if additionalImagesForVariants %}
{% if additional_images.size > 1 %}{%- for image in additional_images offset:1 limit:10 -%}
<g:additional_image_link>https:{{ image.src | product_img_url: 'master' }}</g:additional_image_link>
{% endfor %}{% endif %}
{% endif %}
</item>

{% endfor %}
{%- else -%}

<item>
<g:id>{{ product.id }}</g:id>   
<g:brand>{{ product.vendor }}</g:brand>
{% if useSEOdescription and product.metafields.global.description_tag.size > 0 %}<description>{{ product.metafields.global.description_tag | strip_html | strip_newlines | replace: '&', '&amp;' }}</description>{% endif %} 
<g:google_product_category>{{ GoogleProductCategory | replace: '&', '&amp;'  }}</g:google_product_category>
<g:item_group_id>{{ product.id }}</g:item_group_id>
<g:availability>{% if product.available %}in stock{% else %}out of stock{% endif %}</g:availability>
<g:material>{{ Material }}</g:material>
<g:gender>{{ Gender }}</g:gender>
<g:age_group>{{ AgeGroup }}</g:age_group>
{% if product.images.size > 1 %}{%- for image in product.images offset:1 limit:10 -%}
<g:additional_image_link>https:{{ image.src | product_img_url: 'master' }}</g:additional_image_link>
{% endfor %}{% endif %}
</item>

{% endif %}
{% endfor %}
</channel>
</rss>
{% endpaginate %}

or download from Github

Although the script above will work as is, there are two items that you can configure:

additionalImagesForVariants = false
Setting this to true will upload all your product’s additional images. If you use variants, all your variants will have the identical additional images (their primary image will be as-configured in Shopify)

filterVariantImagesByColor = false
Setting this to true will only upload additional images for a variant IF the ALT text of the images exactly match that variant’s color attribute.

Step 2
Select the Products to Send to Facebook

Now select which products will be included in your feed.

  • In Shopify Admin, go to
    Products > Collections > Create Collection
  • Enter a Title: “Facebook”
  • Add Products to the collection (either manually or using conditions). If you want to include all your products, then add a rule similar to “Inventory Stock is greater than 0”.
  • IMPORTANT!
    Assign the Facebook Feed Template to this collection.
    In the bottom right column of the page, you should see a section called Theme templates. Choose collection.facebook-feed-template otherwise none of this will work.
  • At the bottom of the page, click on Edit Website SEO and enter “facebook” as your collection url handle. (optional – but helps with remembering your feed url)
  • Save and Preview the collection. You should see unformatted text on the screen. This is your Facebook feed. Do a “View Source” in your browser to preview the XML data.
  • Copy the url of this page. It should look similar to https://www.yourstore.com/collections/facebook

Step 3
Upload your Product Feed to Facebook

  • Go to your Facebook Business Manager and go to Commerce Manager
  • Expand Catalogs in the left hand menu and select Data Sources
  • Click on your data source name and then on Settings
  • Scroll to the bottom of the screen and click on Single Upload and select via URL
  • Paste in the feed url generated in Step 2 and select Update your data feed
  • Click Upload File
  • Wait for Facebook to finish fetching your feed

Done

Your products should now have the missing information added. You will probably want to repeat STEP 3 anytime you modify or add new products to your shop.

It’s just a matter of time before Shopify starts uploading the full data specs to Facebook, but until that time, this is the workaround!

Related Reading

Categories
Digital Marketing Google Ads Shopify

Shopify Dynamic Remarketing Setup

Last Updated: April 8, 2019

Here is how to properly install Google Ads Dynamic Remarketing Tags on your Shopify store.

The code needs to be installed in two places:

  1. At the top of your theme.liquid in between the HEAD tags
  2. In the “Additional Scripts” field in your Store’s Admin > Settings > Checkout section

Theme.liquid

Step 1: Create a Remarketing Snippet

In your store’s admin section go to:

  • Online Store > Themes > Edit HTML/CSS
  • Expand the Snippets section and click “Add new snippet”
  • Call the snippet “adwords-remarketing”
  • Paste the following code into the snippet
  • Update the google_conversion_id to use your specific conversion Id (you will find it in your Google AdWords account)
{% comment %} Enter your google conversion id below {% endcomment %}
{% assign google_conversion_id = 123456789 %}

{% assign shopify_store_country  = 'US' %}
{% if shop.currency == 'CAD' %}
{% assign shopify_store_country  = 'CA' %}
{% elsif shop.currency == 'AUD' %}
{% assign shopify_store_country  = 'AU' %}
{% endif %}

<!-- Global site tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-{{ google_conversion_id }}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'AW-{{ google_conversion_id }}');
</script>

<script>
  function getUserId() {
    if(typeof __st !== 'undefined' && __st["cid"]) {
      return __st["cid"];
    } else {
      return;
    }
  }

  var _data = {'send_to': 'AW-{{ google_conversion_id }}', 'ecomm_pagetype':'other', 'user_id': getUserId()};

{% if template contains 'cart' %}
  _data["ecomm_pagetype"] = 'cart';
  _data["ecomm_prodid"] = [{% for item in cart.items %}'shopify_{{ shopify_store_country  }}_{{ item.product.id }}_{{ item.variant.id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}];
  _data["ecomm_totalvalue"] = '{{ cart.total_price | money_without_currency  | remove: ','  }}';
  
{% elsif template contains 'collection' %}
  var _prodid = [{% for item in collection.products limit:5 %}'shopify_{{ shopify_store_country  }}_{{ item.id }}_{{ item.variants.first.id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}];
  _data["ecomm_pagetype"] = 'category';
  _data["ecomm_category"] = '{{ collection.handle }}';
  
{% elsif template contains 'index' %}
  _data["ecomm_pagetype"] = 'home';
  
{% elsif template contains 'product' %}
  _data["ecomm_prodid"] = 'shopify_{{ shopify_store_country  }}_{{ product.id }}_{{ product.selected_or_first_available_variant.id }}';
  _data["ecomm_pagetype"] = 'product';
  _data["ecomm_totalvalue"] = '{{ product.selected_or_first_available_variant.price | money_without_currency  | remove: ','  }}';
  
{% elsif template contains 'search' %}
  _data["ecomm_prodid"] = [{% for item in search.results limit:5 %}'shopify_{{ shopify_store_country  }}_{{ item.id }}_{{ item.variants.first.id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}];
  _data["ecomm_pagetype"] = 'searchresults';
		
{% endif %}

  gtag('event', 'page_view', _data);
</script>

This code is also available on GitHub: Shopify Remarketing Code Snippet

Step 2: Include the snippet in your Theme file

Open up the theme.liquid file and add the following line of code before the closing </head> tag:

{% include 'adwords-remarketing' %}

Checkout Scripts

In your Shopify Store’s Admin, go to:

  • Settings > Checkout
  • Scroll down to the “Additional Scripts” field.
  • Copy and paste the code below into the “Additional Scripts” field
  • Make sure you update the code with your own custom google_conversion_id and google_conversion_label
  • NOTE: The code below also includes Google Ads Conversion Tracking. If you already have conversion tracking installed, make sure you are not duplicating conversions.
{% if first_time_accessed %}
{% comment %} Enter your account specific values below {% endcomment %}
{% assign google_conversion_id = 123456789 %}
{% assign google_conversion_label = "abcdefghijklmnop" %}

{% assign shopify_store_country  = 'US' %}
{% if shop.currency == 'CAD' %}
{% assign shopify_store_country  = 'CA' %}
{% elsif shop.currency == 'AUD' %}
{% assign shopify_store_country  = 'AU' %}
{% endif %}


<!-- Global site tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-{{ google_conversion_id }}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'AW-{{ google_conversion_id }}');
</script>

<!-- Event snippet for Web Order conversion page -->
<script>
    function getUserId() {
      if(typeof __st !== 'undefined' && __st["cid"]) {
        return __st["cid"];
      } else {
        return;
      }
    }

    // Conversion
    gtag('event', 'conversion', {
        'send_to': 'AW-{{ google_conversion_id }}/{{ google_conversion_label }}',
        'value': {{ checkout.subtotal_price | money_without_currency | remove: ',' }},
        'currency': '{{ shop.currency }}',
        'transaction_id': '{{ order.order_number }}'
    });

    // Remarketing
    gtag('event', 'page_view', {
        'send_to': 'AW-{{ google_conversion_id }}',
        'user_id': getUserId(),
        'ecomm_pagetype': 'purchase',
        'ecomm_prodid' : [{% for item in order.line_items %}'shopify_{{ shopify_store_country }}_{{ item.product.id }}_{{ item.variant.id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
        'ecomm_totalvalue' : '{{ total_price | money_without_currency | remove: ',' }}'
    });
</script>

{% endif %}

Download the code from Github here: Shopify Checkout Remarketing Code

Final Step: Verification

Once you’ve installed all your code, it’s time to run through your site and main pages (collection, product, cart, and purchase pages) with Google Tag Assistant installed. This will help you troubleshoot any errors.

Additional Reading…

Categories
Digital Marketing Google Ads Shopify Shopping

Add Microdata to your Shopify Product Pages (with variant support)

If you are using Google Merchant Center to with Shopify then you have likely ran into an issue where Merchant Center will give you a warning that there is insufficient match of micro-data information and that automatic item updates are no longer being performed.

merchant-center-warning
Insufficient micro-data warnings in Google Merchant Center

This is generally due to incorrect or incomplete micro-data on your product page.

Product.liquid

All the required edits should be limited to your Product.liquid file. You need to define a Product itemscope which will have properties such as Product Url, Product Image, Product Title, and Product Description.

Nested within the Product will be an Offer itemscope that will contain the product variant’s price, currency, condition, and availability.

What complicates things is that most Shopify Themes will have at least a partial implementation of micro-data, and are perhaps only missing a few items, or perhaps don’t fully support variants.

A good idea would be to first run your product page through Google’s Structured Data Testing Tool to see which tags already exist.

Product ItemScope

1. Open your product.liquid file and add the Product itemscope property to the outer most div. The first line of your product.liquid should look something like this: 

<div itemscope itemtype="http://schema.org/Product">

2. Directly below this line, you should add the product variant’s url and image markup as so:

<meta itemprop="url" content="{{ shop.url }}{{ product.selected_or_first_available_variant.url }}" />
<meta itemprop="image" content="https:{{ product.selected_or_first_available_variant.image.src | product_img_url: 'grande' }}" />

3. Find where your product’s title and description are displayed, and add itemprop=name and itemprop=description attributes as shown below:

<!-- Product Title -->
<h1 itemprop="name">{{ product.title }}</h1>
<!-- Product description -->
<div class="product-description" itemprop="description">
{{ product.description }}
</div>

Offer ItemScope

4. Now you need to find the place in your product.liquid file where you display your price. Find a wrapping div tag and add the Offers itemscope attributes to the tag. The Offers itemscope MUST nested within the Product itemscope div tag.

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

5. Immediately after this line you can add the product variant’s price, currency, condition, and availability microdata as so:

<meta itemprop="priceCurrency" content="{{ shop.currency }}" />
<meta itemprop="price" content="{{ product.selected_or_first_available_variant.price | money_without_currency | remove: ',' }}" />
<meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition"/>
{% if product.selected_or_first_available_variant.available %}
  <link itemprop="availability" href="http://schema.org/InStock" />
{% else %}
  <link itemprop="availability" href="http://schema.org/OutOfStock" />
{% endif %}

Putting it all together

Once done, your product.liquid should have roughly the following structure.

<!-- BEGIN Product itemscope -->
<div itemscope itemtype="http://schema.org/Product">
  <meta itemprop="url" content="{{ shop.url }}{{ product.selected_or_first_available_variant.url }}" />
  <meta itemprop="image" content="https:{{ product.selected_or_first_available_variant.image.src | product_img_url: 'grande' }}" />
 
  <!-- Product Title & Description -->
  <h1 itemprop="name">{{ product.title }}</h1>
  <div class="product-description" itemprop="description">
  {{ product.description }}</div>
  <!-- BEGIN Offer itemscope -->
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <meta itemprop="priceCurrency" content="{{ shop.currency }}" />
    <meta itemprop="price" content="{{ product.selected_or_first_available_variant.price | money_without_currency | remove: ',' }}" />
    <meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition"/>
    {% if product.selected_or_first_available_variant.available %}
      <link itemprop="availability" href="http://schema.org/InStock" />
    {% else %}
      <link itemprop="availability" href="http://schema.org/OutOfStock" />
    {% endif %}
  </div>
</div>

Final Steps

  1. Save and test your new product page in Google’s Structured Data Testing Tool, and fix all errors if any.
  2. Wait and check back periodically in Google Merchant center to ensure no new errors were introduced. It will take a few weeks before the “unable to update” warning disappears.

Related Reading

Categories
Facebook Ads Shopify

DIY Facebook Product Feed for Shopify

WARNING! I am no longer updating / maintaining this code. It should still work but use at your own risk.

UPDATE Oct 10, 2019: I have switched to using the Shopify Facebook Marketing App to sync my product catalogs with Facebook. Although not perfect, it does the job well enough!

UPDATE Dec 11, 2019: Shopify Facebook Marketing App does not upload all product attributes (Product Type is missing). If you need these missing attributes, I have documented a way to upload the missing data via a custom xml feed.

Below is a free customizable DIY solution to create a Facebook Product Feed in Shopify.

  1. This is an advanced topic and assumes you have the required understanding of HTML/XML/Liquid, the Shopify Store Admin and Facebook Business Manager.
  2. There are several existing paid apps that allow you to do this without coding (Flexify and DataFeedWatch) and a free app (Facebook Marketing App by Shopify).

1. Install the Google Shopping Channel

Install Shopify’s free Google Shopping app. This will allow you to configure product properties such as Age Group, Gender, and Product Category.

2. Create an XML Collection Template

Create a custom collection template that will output your products as XML instead of HTML.

  • In the Shopify admin, go to Online Store > Themes > Action > Edit Code
  • Under Templates, choose Add a new Template
  • Choose collection from the drop down and name your template fb-product-feed

Paste the code below into your new template and click Save. (Best to copy the code from this link: Shopify Facebook Product Feed Template)

{% layout none %}<?xml version="1.0"?>
<rss xmlns:g="http://base.google.com/ns/1.0" version="2.0">
{%- paginate collection.products by 1000 -%}
{%- assign CountryCode = 'US' -%}
{%- if shop.currency == 'CAD' -%}{%- assign CountryCode = 'CA' -%}{%- endif -%}
{%- assign PriceAdjustment = 1.0 -%}
{%- assign PriceAdjustmentEffectiveDate =  '20181226T080000-0500/20190102T235900-0800' -%}

<channel>
<title>{{ shop.name }} {{ collection.title | replace: '&', '&' }}</title>
<link>{{ shop.url }}</link>
<description>{{ collection.description | strip_html }}</description>
{%- for product in collection.products -%} 
  {%- assign GoogleProductCategory = product.metafields.mm-google-shopping.google_product_category -%}
  {%- assign Gender = product.metafields.mm-google-shopping.gender -%}
  {%- assign AgeGroup = product.metafields.mm-google-shopping.age_group -%}
  {%- assign Color = "" -%}
  {%- assign Size = "" -%}

  {%- if product.variants.size > 0 -%}
  {%- for variant in product.variants -%}
    {%- for option in product.options -%}
  	  {%- if option == 'Color' -%}{% capture Color %}{{ variant.options[forloop.index0] }}{% endcapture %}
  	  {%- elsif option == 'Size' -%}{% capture Size %}{{ variant.options[forloop.index0] }}{% endcapture %}
  	  {%- endif -%}
    {%- endfor -%}

    {% comment %} Calculate Sales vs Base Pricing {% endcomment %} 
    {%- if variant.compare_at_price == blank -%}
      {%- assign BasePrice = variant.price -%}
    {%- else -%}
      {%- assign BasePrice = variant.compare_at_price -%}
    {%- endif -%}
    {%- assign SalePrice = variant.price | times: PriceAdjustment -%}

<item>
<title>{{ product.title | strip_html | strip_newlines | replace: '&', '&' }}{% unless product.title contains Color %} {{ Color | replace: '&', '&' }}{% endunless %}</title>
<link>{{ shop.url }}{{ variant.url }}</link>
<description>{{ product.title | strip_html | strip_newlines | replace: '&', '&' }} {{ variant.title | strip_html | strip_newlines | replace: '&', '&' }} {{ product.description | replace: '</', ' </' | strip_html | strip_newlines | replace: '&', '&' }}</description>
<g:google_product_category>{{ GoogleProductCategory | replace: '&', '&'  }}</g:google_product_category>
<g:item_group_id>{{ product.id }}</g:item_group_id>
<g:id>{{ variant.id }}</g:id>
<g:condition>new</g:condition>
<g:price>{{ BasePrice | money_without_currency }} {{ shop.currency }}</g:price>
{%- if SalePrice < BasePrice -%}<g:sale_price>{{ SalePrice  | money_without_currency }} {{ shop.currency }}</g:sale_price>{%-  endif -%}
{%- if PriceAdjustment < 1 -%}<g:sale_price_effective_date>{{ PriceAdjustmentEffectiveDate }}</g:sale_price_effective_date>{%- endif -%}
<g:availability>{% if variant.available %}in stock{% else %}out of stock{% endif %}</g:availability>
<g:image_link>http:{% if variant.image.src %}{{ variant.image.src | product_img_url: 'grande' }}{% else %}{{ product.featured_image.src | product_img_url: 'grande' }}{% endif %}</g:image_link>
<g:gtin>{{ variant.barcode }}</g:gtin>
<g:brand>{{ product.vendor }}</g:brand>
<g:mpn>{{ variant.sku }}</g:mpn>
<g:product_type>{{ product.type | replace: '&', '&' }}</g:product_type>
<g:age_group>{{ AgeGroup }}</g:age_group>
{% unless Color == "" %}<g:color>{{ Color | strip_html | strip_newlines | replace: '&', '&' }}</g:color>{% endunless %}
{% unless Size == "" %}<g:size>{{ Size | strip_html | strip_newlines | replace: '&', '&' }}</g:size><g:size_system>US</g:size_system>{% endunless %}
<g:gender>{{ Gender }}</g:gender>
<g:custom_label_0>{{ product.metafields.mm-google-shopping.custom_label_0 }}</g:custom_label_0>
<g:custom_label_1>{{ product.metafields.mm-google-shopping.custom_label_1 }}</g:custom_label_1>
<g:custom_label_2>{{ product.metafields.mm-google-shopping.custom_label_2 }}</g:custom_label_2>
<g:custom_label_3>{{ product.metafields.mm-google-shopping.custom_label_3 }}</g:custom_label_3>
<g:custom_label_4>{{ product.metafields.mm-google-shopping.custom_label_4 }}</g:custom_label_4>
<g:shipping_weight>{{ variant.weight | weight_with_unit }}</g:shipping_weight>
</item>

  {% endfor %}
  {% else %}

  {% comment %} Calculate Sales vs Base Pricing {% endcomment %} 
  {%- if product.compare_at_price_min == blank -%}
    {%- assign BasePrice = product.price -%}
  {%- else -%}
    {%- assign BasePrice = product.compare_at_price_min -%}
  {%- endif -%}
  {%- assign SalePrice = product.price | times: PriceAdjustment -%}

<item>
<title>{{ product.title | strip_html | strip_newlines | replace: '&', '&' }}</title>
<link>{{ shop.url }}{{ product.url }}</link>
<description>{{ product.title | strip_html | strip_newlines | replace: '&', '&' }} {{ product.description | replace: '</', ' </' | strip_html | strip_newlines | replace: '&', '&' }}</description>
<g:google_product_category>{{ GoogleProductCategory | replace: '&', '&'  }}</g:google_product_category>
<g:item_group_id>{{ product.id }}</g:item_group_id>
<g:id>{{ product.id }}</g:id>
<g:condition>new</g:condition>
<g:price>{{ BasePrice | money_without_currency }} {{ shop.currency }}</g:price>
{%- if SalePrice < BasePrice -%}<g:sale_price>{{ SalePrice  | money_without_currency }} {{ shop.currency }}</g:sale_price>{%-  endif -%}
{%- if PriceAdjustment < 1 -%}<g:sale_price_effective_date>{{ PriceAdjustmentEffectiveDate }}</g:sale_price_effective_date>{%- endif -%}
<g:availability>{% if product.available %}in stock{% else %}out of stock{% endif %}</g:availability>
<g:image_link>http:{{ product.featured_image.src | product_img_url: 'grande' }}</g:image_link>
<g:gtin>{{ product.barcode }}</g:gtin>
<g:brand>{{ product.vendor }}</g:brand>
<g:mpn>{{ product.sku }}</g:mpn>
<g:product_type>{{ product.type }}</g:product_type>
<g:age_group>{{ AgeGroup }}</g:age_group>
<g:gender>{{ Gender }}</g:gender>
<g:custom_label_0>{{ product.metafields.mm-google-shopping.custom_label_0 }}</g:custom_label_0>
<g:custom_label_1>{{ product.metafields.mm-google-shopping.custom_label_1 }}</g:custom_label_1>
<g:custom_label_2>{{ product.metafields.mm-google-shopping.custom_label_2 }}</g:custom_label_2>
<g:custom_label_3>{{ product.metafields.mm-google-shopping.custom_label_3 }}</g:custom_label_3>
<g:custom_label_4>{{ product.metafields.mm-google-shopping.custom_label_4 }}</g:custom_label_4>
<g:shipping_weight>{{ variant.weight | weight_with_unit }}</g:shipping_weight>
</item>
  {% endif %}
{% endfor %}
</channel>
</rss>
{% endpaginate %}

or Download from Github:  Shopify Facebook Product Feed Template

3. Assign products to your Feed

In Step 2 you created your feed template. Now you need to assign products to this feed:

  • In Shopify Admin, go to Products > Collections > Create Collection
  • Enter a Title: “Facebook Product Feed”
  • Add Products to the collection (either manually or using conditions)
  • IMPORTANT! Assign your feed TEMPLATE to this collection.
    In the bottom right column choose collection.fb-product-feed as the Theme Template.
  • Save and Preview the collection. You should see unformatted text on the screen. This is your Facebook feed.
  • Copy the url as you need it in the next step.

4. Upload your Feed to Facebook

  • In Facebook Business Manager go to Assets > Catalogs > Create Catalog.
  • Catalog Type: E-Commerce
  • Click Add ProductsUse Datafeed
  • Enter the feed collection url you copied in step 3 above. Leave the username & password blank. Choose a time for your daily upload to occur (early morning is usually a good time). Choose your currency.
  • Click Start Upload and wait for the feed to be fetched and processed.
  • Fix errors: If there are errors, go back, fix them, re-fetch, and keep doing so until the feed is error free. Sometimes it is necessary to delete and re-create your catalog in Facebook for some changes to appear.
  • If you have more than 1000 product variants, you will need to submit multiple feeds with a ?page=x querystring appended like so: http://mystore.myshopify.com/collections/facebook-product-feed?page=1 (This will send products 1-1000) and http://mystore.myshopify.com/collections/facebook-product-feed?page=2 (This will send products 1001-2000)

5. Prevent the Facebook Feed from Showing on your Store

Depending on how your store is setup, you may need to add some code to prevent your Facebook feed collection from showing up on your store. The exact way to do this may depend on your theme, but generally you will want to have an “unless” statement within the loop that displays your collections:

{% unless collection.title contains "Facebook" %}
... your collection code ...
{% endunless %}

Done!

You are now ready to setup your Dynamic Product Remarketing campaigns!

Related Posts

Categories
Analytics Shopify

Fix Product Performance Reports in Google Analytics with Shopify

By default, Shopify sends transactions to Google Analytics with a unique product title for each product variant. This causes the Product Performance Report to be split on the variant level instead of at the product level as it was intended.

ga-productperformance-productname
This is how Shopify data shows up by default in the Product Performance Report. Notice that the various “Trillium Parka” variants are ungrouped because of the different size and color information in the product name. This makes it difficult to see “Revenue by Product” for all “Trillium Parkas”.

If, for example. you are selling winter boots, and someone buys a size 10 in Black, Shopify will send the product name as “Winter Boots – 10 / Black” instead of just “Winter Boots“. This is a bug as as the variant details are already included in the Google Analytics “Product Variant” column.

The Solution: GA Custom Data Import

The solution to this problem is to overwrite the Shopify data using the Google Analytics Custom Data Import tool.

1: Export your Product Data

First we need to export all our product data – we can accomplish this by creating a custom Collection Template that generates a CSV report instead of the standard HTML.

a. Create a new Collection Template

Call the new collection template csv-ga-product-feed and paste the following code:

{% layout none %}{% paginate collection.products by 1000 %}ga:productSku,ga:productName,ga:productVariant{% for product in collection.products %}{% for variant in product.variants %}
{{ variant.sku }},{{ product.title | replace: ',','' | remove: '"' | remove: "'" | strip_html | strip }},{{variant.title | replace: ',','' | remove: '"' | remove: "'" | strip_html | strip }}{% endfor %}{% endfor %}{% endpaginate %}

(also available on GitHub here)

b. Create a new Collection based on your csv-ga-product-feed Template

Select the products you want to include in this feed (probably all your products). These will be the products whose values will be overwritten in Google Analytics. Call your collection “Google Analytics Product Data Import” or something similar and save it.

c. Download your Product Feed

  • View your new collection in your store (eg: store.myshopify.com/collections/google-analytics-product-data-import)
  • View source in your browser and save as HTML
  • Rename the file with a CSV extension (eg: google-analytics-product-data-import.csv)

2: Setup and Import the data into Google Analytics

WARNING! You can really mess up your Google Analytics data if things go wrong. I highly recommend that you duplicate or backup your Google Analytics view and do a trial run before working with your live data. Once you upload this new data and overwrite there is no UNDO!

a. Setup the Data Feed

  • Go to Google Analytics > Admin > Account > Property > Data Import
  • Click the red “+ NEW DATA SET” button
  • Select “Product Data”
  • Give your Data Import a name: “Product Name Override”
  • Select the Google Analytics Views you want this import to affect
  • Setup your Data Set Schema: Product SKU is the mandatory key, but select Product and Product Variant as the additional fields.
  • Overwrite Hit Data: Choose Yes (but read my warning above)
  • Click Save and Done

b. Upload your data feed

  • Click on “manage uploads” beside your new Data Feed definition
  • Click the blue UPLOAD button
  • Choose your CSV file and click UPLOAD again
  • And now wait for the upload an update to be complete

3: Verify your new data

The data upload will only affect data from this date forward. So your old data will not be fixed. But your future data will be nice and clean… Until you add new products to your store, in which case you will have to repeat this process.

You will need to wait at least a day before you start seeing the new data coming in. If you add new product SKUs to your store, you will also need to regenerate and reupload a new file in order for the new product data to be fixed.

Categories
Shopify

DIY Google Shopping Feed for Shopify

DEPRECATED: This post is no longer supported! Please us the Google Sales Channel App in combination with Merchant Center feed rules to manage your Shopping Campaign.

The custom XML Feed Code is still available here: Shopify XML Shopping Feed Template

Related Posts & Resources

Categories
Shopify

Shopify Cancelled Orders and Google Analytics

By default, when you cancel an order in Shopify, that transaction remains as positive revenue in your Google Analytics.

To “cancel” the transaction in Google Analytics you have to send a negated version of the transaction. To do this in Shopify you have to create a Webhook on Order Cancelled that hits a script (located on the same root domain as your store) that will call server side Google Analytics e-commerce code to negate the transaction.

Webhook Endpoint Dependencies

Details

Place the following code into a file that will act as your Order Cancelled Webhook endpoint (ie: www2.mydomain.com/webhooks/order-cancelled.php).

Make sure you:

  • Update the script to use your GA Account Id and Root Domain.
  • Change the path of autoload.php to point at your php-ga library
<?php
use UnitedPrototype\GoogleAnalytics;
require_once '../includes/autoload.php'; // Update to point at your php-ga install

$GA_AccountId = 'UA-********-1'; // Update with your GA account
$GA_domain = 'mystore.ca'; // Update with your root domain
$webhookContent = '';
// Read the webhook content
$webhook = fopen('php://input' , 'rb');
while (!feof($webhook)) {
  $webhookContent .= fread($webhook, 4096);
}
fclose($webhook);

if (!empty($webhookContent)) {
  // Convert the webhook content into an array
  $shopifyOrder = json_decode($webhookContent, true);

  // START GOOGLE ANALYTICS
  $tracker = new GoogleAnalytics\Tracker($GA_AccountId, $GA_domain);

  $visitor = new GoogleAnalytics\Visitor();
  $visitor->setIpAddress($_SERVER['REMOTE_ADDR']);
  $visitor->setUserAgent($_SERVER['HTTP_USER_AGENT']);
  $visitor->setScreenResolution('1024x768');

  $session = new GoogleAnalytics\Session();

  $page = new GoogleAnalytics\Page($_SERVER['REQUEST_URI']);
  $page->setTitle('Order Cancelled');

  $tracker->trackPageview($page, $session, $visitor);

  $transaction = new GoogleAnalytics\Transaction();
  $transaction->setOrderId($shopifyOrder['name']);
  $transaction->setAffiliation('');
  $transaction->setTotal(-$shopifyOrder['total_price']);
  $transaction->setTax(-$shopifyOrder['total_tax']);
  $transaction->setShipping(-$shopifyOrder['shipping_lines'][0]['price']);
  $transaction->setCity($shopifyOrder['billing_address']['city']);
  $transaction->setRegion($shopifyOrder['billing_address']['province']);
  $transaction->setCountry($shopifyOrder['billing_address']['country']);

  foreach ( $shopifyOrder['line_items'] as $product ) {
    $item = new GoogleAnalytics\Item();
    $item->setOrderId($shopifyOrder['name']);
    $item->setSku($product['sku']);
    $item->setName($product['title']);
    $item->setVariation('');
    $item->setPrice($product['price']);
    $item->setQuantity(-$product['quantity']);
    $item->validate();
    $transaction->addItem($item);
  }
  $transaction->validate(); 

  $tracker->trackTransaction($transaction, $session, $visitor);
  // END GOOGLE ANALYTICS
}
?>

Setup the Webhook in Shopify

In your Admin dashboard go to:

  • Settings > Notifications > Webhooks (at the bottom)
  • Create a Webhook
  • Event: Order Cancellation // Format: JSON // URL: The full url of your php file

Test

  • Google Analytics: Got to the Real Time > Content report
  • Shopify: Click “Send test notification” link beside your webhook.
  • Google Analytics: You should see a page request popup with your script name
  • Google Analytics: Wait a few hours and then (for transactions to register) and then go to Conversions > Ecommerce > Product Performance and you should see a sledge-hammer and wire-cutter products (the Shopify sample data) along with negative quantities and value.

Related Resources

Categories
Shopify

Add Color Swatches to Shopify Collections

NO LONGER SUPORTED: Please note that the code in this post is no longer supported. Use at your own risk.

Product Color Swatches

Below is some code for your Shopify Collection that will display color swatches for each product.

  • Install this on your Collections page within your Product Loop. If your theme has a product-thumbnail.liquid snippet install it there, (or alternatively in your product-loop.liquid snippet).
  • Create your own images for each color swatch and set the filename to the color (ie: black.gif, white.gif, green.gif, etc…)
{% for option in product.options %}
  {% if option == 'Color' %}
    {% assign index = forloop.index0 %}
    {% assign colorlist = '' %}
    {% assign color = '' %}
    {% for variant in product.variants %}
      {% capture color %}{{ variant.options[index] }}{% endcapture %}
      {% unless colorlist contains color %}
        <img src="{{ color | downcase | append: '.gif' | asset_url }}" alt="{{ color }}" width="16" height="16" />
        {% capture tempList %}{{colorlist | append: color | append: ‘ ‘}}{% endcapture %}
        {% assign colorlist = tempList %}
      {% endunless %}
    {% endfor %}
  {% endif %}
{% endfor %}

Also available on GitHub here: Shopify Color Swatches

Thank you to Curt and Mike Thorne for providing a more elegant solution to my initial one.