Step 1: From the EcomSolid Dashboard, head to the Theme Editor.
Step 2: Skip this step if you’ve already had a Product Details section on your page.
Access the Library from the top bar of the Editor Page.
Next, navigate to Section > Product. Select your preferred Product Details section and hit “Insert” to add it to your Editor.
Step 3: Configure the Product Details section's settings.
Depending on the Product Details preset in use, the left sidebar settings will display differently. Below are the most common settings layout of all Product Details presets.
Click on the Product Details section to reveal the configuration options in the left sidebar. Navigate to the Design tab.
Scroll down to the Color section and click on “More settings.”
Scroll down to the bottom and hit “Setting Advanced.” After that, you will see the Border Variant Active Color option. Choose your preferred color or enter the hex color code for the border color of your selected variant.
New version preset:
New version presets are presets that offer a hierarchy atom tree on the left sidebar settings. For more information, visit the Advanced mode article.
Step 1: Click on the Product Details section to see the left sidebar configurations. If there is a detailed atom tree when you scroll down to the bottom. Proceed to step 2.
Step 2: Find the Variant atom and click on it. You will enter its granular configurations.
Step 3: Scroll down to the Border option, toggle on Selected Variant Border Color.
Here, you can change the color of the border of the selected swatch and preview the result on the right-hand side editor using the provided color palette or hex color code.
Lastly, don't forget to hit "Save" > "Publish Theme" > "Yes, Publish" to bring all the changes to your front store!