How can I add color swatches to my product page in the Impact theme?

[yarshimahim]

i am using shopify impact theme . my store is femiroom.com . i want to add color swatches on my product page .please check my attachment and the store language is datch. i try to add this type of color swatches to my product page but i am not able to do it please help me how can i show this type of color swatches. also i need one more help that is When a customer clicks the Add to Cart button, taking them to the checkout page. it means add to cart button link to checkout page directly. so how can i do those 2 things if anyone have solution please help me give me solution as soon as possible 

[EcomGraduates]

Hello there  

you can use a Shopify app or custom code

• In your Shopify admin, go to Online Store > Themes, and click the "Actions" button for the Impact theme. Then, select "Edit code" from the dropdown menu.
• In the left sidebar of the Theme Editor, click on the "Assets" folder to expand it, and then click on the theme.scss.liquid file to open it.
• Scroll to the bottom of the file and add the following code:

.swatch {
  margin-right: 10px;
  display: inline-block;
}

.color-swatch {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  margin-right: 5px;
  margin-bottom: 5px;
}

.color-swatch--red {
  background-color: red;
}

.color-swatch--blue {
  background-color: blue;
}

.color-swatch--green {
  background-color: green;
}

• This code sets up some basic styles for the color swatches. You can customize the styles as needed to match your store's design.
• Next, you'll need to add the color swatches to your product page. In the Theme Editor, click on the product-template.liquid file to open it.
• Find the product-form element in the file, which will look something like this:

<form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form product-form--stacked">
  ...
</form>

• Add the following code immediately after the product-form element:

{% if product.options contains 'Color' %}
  {% assign option_index = 0 %}
  {% for option in product.options %}
    {% assign option_index = option_index | plus: 1 %}
    {% if option == 'Color' %}
      <div class="swatch">
        {% for value in product.variants[0].options[option_index] %}
          <div class="color-swatch color-swatch--{{ value | handle }}">
          </div>
        {% endfor %}
      </div>
    {% endif %}
  {% endfor %}
{% endif %}

• This code checks if the product has a color option (assuming the option is named "Color"). If it does, it displays a set of color swatches for the available colors.
• Save the theme.scss.liquid and product-template.liquid files, and then preview your product page to see the color swatches.

[Curvo_hylleberg]

What if it is individual product you want to set it up with