Define a specific default variant in product page

Store Design
1

Greetings people :waving_hand:

We were wondering if there would be a known way to define a product variant as default?

For example you are selling chocolat cookies and you have sizes: S, M, L. (who said good cookies couldn’t have a size!). How could we define S, M or L to be the default variant when a user opens the product page?

Best!

2

Hi @zendev

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

3

Hi @zendev

Please go to Admin => Online Store => Theme => Edit Code. Then, find global.js file and paste the following code:

if(window.location.pathname.includes('/products/')){
  setTimeout(()=>{
    const productTitle = document.querySelector('.yv-product-detail-title').innerText
    const listVariants = document.querySelectorAll('#swatch-option1 .swatch-view.swatch-view-image .swatch-view-item')
    if(listVariants &&listVariants.length &&productTitle && productTitle == 'your name of custom product you want to set default variant'){
    listVariants.forEach((item,index)=>{
        if(index==1){/// if you want set second variant is default => condition is "index == 1", if you want thirt variant condition is "index ==2" ...v..v
          item.click()
        }
      })
    }
  },0)

I hope that this can help you.