Moving Variants Location

[bigjimmy15]

Hi, I am having trouble getting the variant choices to the other side (I want it above the product quantity). Can anyone help me with this?

[akshay_bhatt]

Hey @bigjimmy15 Hope you are doing well,

To move the variant choices (color options) above the product quantity on your Shopify product page, you will need to edit your Shopify theme’s code. Here’s how you can do it:

1. Find the Product Template

• In your Shopify admin, go to Online Store > Themes.

• Find your active theme and click Customize to confirm the section.

• Then click Actions > Edit code.

2. Edit the Product Form

• In the code editor, open:

Sections/product-template.liquid

or

Main-product.liquid

Depending on your theme, it could be under Sections or Snippets.

3.Move the Variant Picker Above the Quantity Input:

• Find the section in the code for variants, usually something like:

{% for option in product.options_with_values %}
  
    {{ option.name }}
    {% for value in option.values %}
      
    {% endfor %}
  

{% endfor %}

• Locate the section for quantity input:

• Move the variants code above the quantity code so it looks like this:

{% for option in product.options_with_values %}
  
    {{ option.name }}
    {% for value in option.values %}
      
    {% endfor %}
  

{% endfor %}

  
  

Its hard to implement the logic for this implementation please feel free to reach out me any time.
Best Regards
Akshay

[bigjimmy15]

Hi,

Does this work if I am using Swatch King? And i did not have that code in main–product.liquid

[Dan-From-Ryviu]

Hi @bigjimmy15

I am sure you will need to edit your product’s liquid file or the javascript code to move the quantity option. Could you share your store link so I can check?