title: How to Style H1 Tag with Javascript in Squarespace Template
body: <p>Our Squarespace site has a catalogue containing products from multiple brands. I'm trying to ensure the brand name stands out by making it bold but given the way Squarespace works, I need to add Javascript into the page to manipulate the html.</p>
  
  <p>Using Chrome Dev tools on the product titles, I can see the html class is called '.ProductList h1.ProductList-title'. </p>
  
  <p>I've tried implementing the below, but haven't had much luck so far - am I even on the right track?</p>
  
  <pre><code>function changeBrandName() 
  {
    var prodList = document.getElementsByClassName(".ProductList h1.ProductList-title");
    for (i = 0, len = prodList.length; i &lt; len; i++) 
    {
      prodList[i].style.color = 'red';
    }
  }
  
  window.onload = changeBrandName();
  </code></pre>
  
  <p>Squarespace class structure:</p>
  
  <pre><code>&lt;section class="ProductList-overlay"&gt;
            &lt;div class="ProductList-meta"&gt;
              &lt;h1 class="ProductList-title"&gt;Vifa - Pebble Grey Oslo Loudspeaker&lt;/h1&gt;&lt;style&gt;&lt;/style&gt;                                                 
              &lt;div class="product-price"&gt;
  &lt;span class="sqs-money-native"&gt;0.00&lt;/span&gt;
  &lt;/div&gt;
            &lt;/div&gt;
          &lt;/section&gt;
  </code></pre>
  
  <p>(this is one of the pages we're displaying products <a href="https://www.manilva.co/catalogue-electronics/" rel="nofollow noreferrer">https://www.manilva.co/catalogue-electronics/</a>).</p>