Fixing & Troubleshooting Conflicts with Atlantic Theme

Atlantic Theme is a great, good looking theme.

It has several interactive elements that may cause conflicts with Custom Product Builder plugin.

Here is a step-by-step guide on how to fix conflicts. As well as a downloadable copy of the assets/site.js.liquid file that you can try replacing in your store to see if it will fix the problems at once. Please note that if you have any other customizations in this file, you will need to consider moving them as well.

• Open Themes
• Duplicate published theme to make a backup
• Work in the copied theme so that the live store doesn't get affected.
• Find file: 'assets/site.js.liquid'
• Find line 1096:

  if (this.mainHeaderWrap.attr('data-header-alignment') === 'true') {'

• Paste the following code right before the line above:

      // CPB Customization - Custom Product Builder Page
    	if ($('#custom-product')) {
        this.body.addClass('header-centered');
      }
  

  It will add the header back to your custom product pages.
• Next step is to resolve some of the errors that come up when site.js.liquid file doesn't find the elements on the custom product builder page its expecting.
• Find the following code near line 2370:

      ProductView = (function(superClass) {
      extend(ProductView, superClass);
    
        function ProductView() {
          this.onScroll = bind(this.onScroll, this);
          return ProductView.__super__.constructor.apply(this, arguments);
        }

• After the last line from the above snippet (line 2378), add the following line of code:

    // Custom Product Builder -  Launch default scripts only on default product pages.
    if ( $('#product-area').length > 0 ) {

• The end result will look like this:

• The last step is to close the if statement that we created above at the end of the ProductView logic.
• Find the following code (around line 2998) :

           
      ProductView.prototype.update = function($el) {
          this.$el = $el;
          return this._validate();
        };
      return ProductView;
      

• Add a closing tag right before the line 'return ProductView;'. The end result should look like this:

         ProductView.prototype.update = function($el) {
            this.$el = $el;
            return this._validate();
         };
      }
      return ProductView;

  
  

This is it. Now your Custom Product Builder page should load without any issues. If you are still experiencing any problems - please reach out to us to [e-mail] so that we can help you.