I inherited this code on a Shopify site. Moving it and some related code into a new theme based on Dawn. Don't think the theme is the issue at all but rather this code which is now triggering a "$" is not a function error. Here's an example of that code:

$('.section__choose-texture').on('click', '.content', function ( ){
  var current = $(this);

  $('.content').removeClass('active');
  current.addClass('active');

  $('#prodTextureItem').val(current.data('texture'));
  $('#productTexture').text(current.find('h3').text());
  $('.section__choose-coffee').show();

  var header_height = $('.site-header').height(),
      offset_top = $('.section__choose-coffee').offset().top,
      res = offset_top - header_height;

  $('html, body').animate({ scrollTop: res }, 'slow');
});

I added a "function stepOne() {" to the top and then closed it with a } followed by a call to the function but Shopify's editor says it is bad code. I think that's because function is listed on line one of my example.

So how can I make this function work properly? Does the code need to be completely rewritten? Or was I on the correct path on my idea?