How to fix Printful estimated delivery gone after Shopify theme update

const section1 = 

 

`

 

Printful estimated delivery feature is awesome but it is hardcoded in Shopify liquid files and if you upgrade your theme it will disappear which happened to this store now. 


Let's try to fix it modifying code. 👉

`;

 

const section_2  = 

 

`

 

1.  Copy the inserted JavaScript AS FOLLOWS by Printful app installed from your current (old) "theme.liquid" in [Online Store] > [Theme] > [Edit Codes] in Shopify admin.


2.  Paste (Insert) the code above to to "theme.liquid" of your new version 

  (before "</body></html>") of the theme in the same menu above (code editor).


3.  Down load the current (old) theme as a zip file to extract in your local PC.


4. Go to "Assets" in the new theme in the code editor above and click "Add a new asset".

5. Choose 14 SVG files of each country to upload from your extracted theme directory in your local PC above.


6. Publish your new version theme. 🍺

 

`;

const INSERTED_JAVASCRIPT = 

 

`

<!-- PF EDT START -->
<script type='text/javascript'>
  {%- if content_for_header contains 'shopify-product-customizer' -%}
    {%- if product -%}
      {%- if product.first_available_variant -%}
          var pfProductId = {{ product.metafields.printful.is_synced | json }};
          var pfEdt = {{ shop.metafields.printful.is_edt_enabled | json }};
         var pfEdtTextColor = {{ shop.metafields.printful.edt_text_color | json }};
         var pfEdtBackgroundColor = {{ shop.metafields.printful.edt_background_color | json }};
         var pfEdtBorderColor = {{ shop.metafields.printful.edt_border_color | json }};
         var pfEdtUseDefaultStyling = {{ shop.metafields.printful.edt_default_style | json }};
        var pfEdtTextAlignment = {{ shop.metafields.printful.edt_text_alignment | json }};
       var pfEdtFlags = {
US: "{{ 'US.svg' | asset_url }}",CA: "{{ 'CA.svg' | asset_url }}",ES: "{{ 'ES.svg' | asset_url }}",LV: "{{ 'LV.svg' | asset_url }}",GB: "{{ 'GB.svg' | asset_url }}",DE: "{{ 'DE.svg' | asset_url }}",FR: "{{ 'FR.svg' | asset_url }}",AU: "{{ 'AU.svg' | asset_url }}",JP: "{{ 'JP.svg' | asset_url }}",NZ: "{{ 'NZ.svg' | asset_url }}",IT: "{{ 'IT.svg' | asset_url }}",BR: "{{ 'BR.svg' | asset_url }}",KR: "{{ 'KR.svg' | asset_url }}",NL: "{{ 'NL.svg' | asset_url }}",GB: "{{ 'GB.svg' | asset_url }}",US: "{{ 'US.svg' | asset_url }}",
};
      {%- else -%}
         var pfEdt = 0;
      {%- endif -%}
   {%- endif -%}
  {%- endif -%}
</script>
<!-- PF EDT END -->

 

 

`;

 



section_2.replace('AS FOLLOWS',  INSERTED_JAVASCRIPT);

 

document.append(document.

createElement(`<p>${section_1}</p>`));

document.append(document.

createElement(`<p${section_2}></p> `));

 

const raw_img_1 =  

 

;

 

const raw_img_2 = 

;

 

const raw_img_3  = 

;

 

const raw_img_4 = 

;

 

document.append(document.

createElement(`<h2>Here are some screenshots which might help you. 😉</2>`));

 

document.append(document.

createElement(`<img src=${raw_img_1}>`));

document.append(document.

createElement(`<img src=${raw_img_2}>`));

document.append(document.

createElement(`<img src=${raw_img_3}>`));

document.append(document.

createElement(`<img src=${raw_img_4}>`));

Back to blog