You didn't close the string literal that was being mapped from object:

const test = `<div class="modalWrap">
<h2 class="modalHeader">Shop The Look</h2>
<div class="modalContent">${object.map(
    (el) =>
        `<div class="prodDetails">
  <img class="prodImg" alt="prodImage" src = ${el.primaryImage.url}></img>
  <p class="prodName">${el.name}</p>
  <p class="prodPrice">${el.price.value}</p>
  <div class = "selectWrapper">
<div class="selectNumber">
<div class="numberWrapper"> 
${el.sizeOptions
    .map(
        (option) => `
<p class="selectSize" >${option.value}</p>`
    )
    .join('')}
</div>
</div>
</div>
</div>
</div>`
)}

</div>`;

Less of an answer than a rant with good intentions.

This code is illegible, and because of that, finding the missing backtick is extremely tedious. Here's how to make it less awful. ^{* Edited for brevity.}

Step 1: Indent. We're not savages.

This step alone is enough to resolve the issue.

`
<div class="modalWrap">
  <h2 class="modalHeader">Shop The Look</h2>
  <div class="modalContent">
    ${object.map(el => `
      <div class="prodDetails">
        <img class="prodImg" alt="prodImage" src = ${el.primaryImage.url}></img>
        <p class="prodName">${el.name}</p>
        <p class="prodPrice">${el.price.value}</p>
        <div class = "selectWrapper">
          <div class="selectNumber">
            <div class="numberWrapper"> 
              ${el.sizeOptions.map(option => `
                <p class="selectSize" >${option.value}</p>
              `).join('\n')}
            </div>
          </div>
        </div>
      </div>
    `).join('\n')}
  </div>
</div>
`

Step 2: Don't do so much at once. Let your code breathe.

There are two pseudo-"components" to pull out, both functions to map. This clarifies their intent and reduces the surface area of the mainline code.

The inner one is simple:

const makeOption = opt => `<p class="selectSize">${option.value}</p>`

The outer one is incrementally more complex, but by maintaining indentation, adding some clarifying whitespace, and using the inner "component", it's much cleaner:

const makeProdDetail = el => `
  <div class="prodDetails">
    <img class="prodImg" alt="prodImage" src=${el.primaryImage.url}></img>

    <p class="prodName">${el.name}</p>

    <p class="prodPrice">${el.price.value}</p>

    <div class="selectWrapper">
      <div class="selectNumber">
        <div class="numberWrapper"> 
          ${el.sizeOptions.map(makeOption).join('\n')}
        </div>
      </div>
    </div>
  </div>
`

The smaller the functional chunks are the easier spotting and mitigating mistakes is. It's also easier to modify/update/parameterize/etc.

Step 3: Tie it all together

Now the overall component is wee:

`
<div class="modalWrap">
  <h2 class="modalHeader">Shop The Look</h2>

  <div class="modalContent">
    ${object.map(makeProdDetail).join('\n')}
  </div>
</div>
`

_{All untested, but roughly correct.}

Step 4: Give things meaningful names.

• object => products
• el => product