Migrating Theme: What Happens - Apps and Code - Need Some Help

RyanAnderson · ‎03-23-2024

Hi Shopify users and team!

I am migrating my legacy Brooklyn theme store to Ride. It has been a long journey. I was worried about what would and would not transition over. I learned that my apps will transition as will code applied within the admin panel (outside the code page). However code placed inside the code page manually will not. Can someone please help me identify what code I will need to paste over? It can have a general idea, but want to be cautious and get a second pair of eyes if possible. Any help in calling out what I would need to paste over would be very appreciated. Here is my theme.liquid:

<!doctype html>
<html class="no-js" lang="{{ shop.locale }}">

<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "lazr4vdtc7");
</script>
  
<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9HT4LJ4DKM"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

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

  gtag('config', 'AW-655857502');
</script>
<!-- Event snippet for Google Shopping App Add Payment Info conversion page -->
<script>
  gtag('event', 'conversion', {
      'send_to': 'AW-655857502/GU0MCLeOwNsBEN6u3rgC',
      'value': 0.0
  });
</script>

<meta name="google-site-verification" content="K9uvgX20fbqLmBkE5AYdC9Rv1R7x52BEuz7RKZegyLQ" />
  <!-- Basic page needs ================================================== -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  {% if settings.favicon %}
    <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png" />
  {% endif %}

  <!-- Title and description ================================================== -->
  

  <!-- Avada Size Chart Script -->
 {% include 'avada-sc-setting' %}
  <!-- /Avada Size Chart Script -->

<title>
  {{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
  </title>

  {% if page_description %}
  <meta name="description" content="{{ page_description | escape }}">
  {% endif %}

  <!-- Helpers ================================================== -->
  {% include 'social-meta-tags' %}
  <link rel="canonical" href="{{ canonical_url }}">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  <meta name="theme-color" content="{{ settings.color_primary }}">

  <!-- CSS ================================================== -->
  {{ 'timber.scss.css' | asset_url | stylesheet_tag }}
  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}

  <!-- Sections ================================================== -->
  <script>
    window.theme = window.theme || {};
    theme.strings = {
      zoomClose: {{ "products.zoom.close" | t | json }},
      zoomPrev: {{ "products.zoom.prev" | t | json }},
      zoomNext: {{ "products.zoom.next" | t | json }},
      moneyFormat: {{ shop.money_format | json }},
      addressError: {{ 'home_page.map.address_error' | t | json }},
      addressNoResults: {{ 'home_page.map.address_no_results' | t | json }},
      addressQueryLimit: {{ 'home_page.map.address_query_limit_html' | t | json }},
      authError: {{ 'home_page.map.auth_error_html' | t | json }},
      cartEmpty: {{ 'cart.general.empty' | t | json }},
      cartCookie: {{ 'cart.general.cookies_required' | t | json }},
      cartSavings: {{ 'cart.general.savings_html' | t: savings: '[savings]' | json }}
    };
    theme.settings = {
      cartType: {{ settings.cart_type | json }},
      gridType: {{ settings.collection_products_grid | json }}
    };
  </script>

  {{ 'jquery-2.2.3.min.js' | asset_url | script_tag }}

  <script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>

  <script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>

  <!-- Header hook for plugins ================================================== -->
  {{ content_for_header }}

  {{ 'modernizr.min.js' | asset_url | script_tag }}

  {% comment %}
    If you store has customer accounts disabled, you can remove the following JS file
  {% endcomment %}
  {% if request.page_type contains 'customers/' %}
    {{ 'shopify_common.js' | shopify_asset_url | script_tag }}
  {% endif %}

</head>

{% comment %}
  Add the page template as a class for easy page or template specific styling.
{% endcomment %}
<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ request.page_type | handle }}">

  {% section 'header' %}

  <div id="CartDrawer" class="drawer drawer--right drawer--has-fixed-footer">
    <div class="drawer__fixed-header">
      <div class="drawer__header">
        <div class="drawer__title">{{ 'cart.general.title' | t }}</div>
        <div class="drawer__close">
          <button type="button" class="icon-fallback-text drawer__close-button js-drawer-close">
            <span class="icon icon-x" aria-hidden="true"></span>
            <span class="fallback-text">{{ 'cart.general.close_cart' | t }}</span>
          </button>
        </div>
      </div>
    </div>
    <div class="drawer__inner">
      <div id="CartContainer" class="drawer__cart"></div>
    </div>
  </div>

  <div id="PageContainer" class="page-container">
    <main class="main-content" role="main">
      {% unless request.page_type == "index" %}
        <div class="wrapper">
      {% endunless %}
        {{ content_for_layout }}
      {% unless request.page_type == "index" %}
        </div>
      {% endunless %}
    </main>

    <hr class="hr--large">

    {% section 'footer' %}

  </div>

  {% comment %}
    Template-specific js
  {% endcomment %}
  <script>
    {% if resetPassword %}
      $(function() {
        timber.initCache();
        timber.resetPasswordSuccess();
      });
    {% endif %}
  </script>

  {% comment %}
    Ajaxify your cart with this plugin.
    Documentation:
      - http://shopify.com/timber#ajax-cart
  {% endcomment %}
  {% if settings.cart_type == 'drawer' %}
    {% include 'ajax-cart-template' %}
  {% endif %}

  {% if request.page_type == 'product' or request.page_type == 'index' %}
      <script>
        // Override default values of shop.strings for each template.
        // Alternate product templates can change values of
        // add to cart button, sold out, and unavailable states here.
        theme.productStrings = {
          addToCart: {{ 'products.product.add_to_cart' | t | json }},
          soldOut: {{ 'products.product.sold_out' | t | json }},
          unavailable: {{ 'products.product.unavailable' | t | json }}
        }
      </script>
    {% endif %}

  <div id="SearchModal" class="mfp-hide">
    {% include 'search-bar', search_btn_style: 'btn', search_bar_location: 'search-bar--modal' %}
  </div>
  <ul hidden>
    <li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li>
    <li id="a11y-selection-message">{{ 'general.accessibility.selection_help' | t }}</li>
    <li id="a11y-slideshow-info">{{ 'home_page.slideshow.navigation_instructions' | t }}</li>
  </ul>
  <script src="https://apis.google.com/js/platform.js?onload=renderBadge" async defer></script>

<script>
  window.renderBadge = function() {
    var ratingBadgeContainer = document.createElement("div");
    document.body.appendChild(ratingBadgeContainer);
    window.gapi.load('ratingbadge', function() {
      window.gapi.ratingbadge.render(ratingBadgeContainer, {"merchant_id": 198289595no,"position": "BOTTOM_LEFT"});
    });
  }
</script>
</body>
</html>

Keshan97 · ‎03-24-2024

Based on your provided theme.liquid file, here are some key pieces of code that you'll need to ensure are migrated to your new theme:

Clarity Analytics Script:

<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "lazr4vdtc7");
</script>

Google Analytics Script:

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

  gtag('config', 'G-9HT4LJ4DKM');
</script>

Google Ads Script:

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

  gtag('config', 'AW-655857502');
</script>

Google Shopping App Conversion Event Snippet:

<!-- Event snippet for Google Shopping App Add Payment Info conversion page -->
<script>
  gtag('event', 'conversion', {
      'send_to': 'AW-655857502/GU0MCLeOwNsBEN6u3rgC',
      'value': 0.0
  });
</script>

Google Site Verification Meta Tag:

<meta name="google-site-verification" content="K9uvgX20fbqLmBkE5AYdC9Rv1R7x52BEuz7RKZegyLQ" />

Google Review Badge Script:

<script src="https://apis.google.com/js/platform.js?onload=renderBadge" async defer></script>
<script>
  window.renderBadge = function() {
    var ratingBadgeContainer = document.createElement("div");
    document.body.appendChild(ratingBadgeContainer);
    window.gapi.load('ratingbadge', function() {
      window.gapi.ratingbadge.render(ratingBadgeContainer, {"merchant_id": 198289595no,"position": "BOTTOM_LEFT"});
    });
  }
</script>

Ensure these codes are properly integrated into your new Ride theme for continuity in functionality and analytics tracking.

Best Regards,
Keshan Vishwajith
Shopify Certified Theme Developer
Feel free to drop me an email
www.loomod.com

View solution in original post

Keshan97 · ‎03-24-2024

Based on your provided theme.liquid file, here are some key pieces of code that you'll need to ensure are migrated to your new theme:

Clarity Analytics Script:

<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "lazr4vdtc7");
</script>

Google Analytics Script:

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

  gtag('config', 'G-9HT4LJ4DKM');
</script>

Google Ads Script:

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

  gtag('config', 'AW-655857502');
</script>

Google Shopping App Conversion Event Snippet:

<!-- Event snippet for Google Shopping App Add Payment Info conversion page -->
<script>
  gtag('event', 'conversion', {
      'send_to': 'AW-655857502/GU0MCLeOwNsBEN6u3rgC',
      'value': 0.0
  });
</script>

Google Site Verification Meta Tag:

<meta name="google-site-verification" content="K9uvgX20fbqLmBkE5AYdC9Rv1R7x52BEuz7RKZegyLQ" />

Google Review Badge Script:

<script src="https://apis.google.com/js/platform.js?onload=renderBadge" async defer></script>
<script>
  window.renderBadge = function() {
    var ratingBadgeContainer = document.createElement("div");
    document.body.appendChild(ratingBadgeContainer);
    window.gapi.load('ratingbadge', function() {
      window.gapi.ratingbadge.render(ratingBadgeContainer, {"merchant_id": 198289595no,"position": "BOTTOM_LEFT"});
    });
  }
</script>

Ensure these codes are properly integrated into your new Ride theme for continuity in functionality and analytics tracking.

Best Regards,
Keshan Vishwajith
Shopify Certified Theme Developer
Feel free to drop me an email
www.loomod.com

RyanAnderson · ‎03-24-2024

Thank you Keshan! Not only for your prompt reply but straightforward answer! I will implement this change tonight and fingers crossed!! Very exciting.

Migrating Theme: What Happens - Apps and Code - Need Some Help

Migrating Theme: What Happens - Apps and Code - Need Some Help

Community Blog Articles