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

Store Design
,
1

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

2

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:
  • 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' %}
      
        {% for value in product.variants[0].options[option_index] %}
          

          

        {% endfor %}
      

    {% 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.
3

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