Screenshot 17 shows attribute labels on the product, in order to enable it, enter an attribute and enable “Show attribute label on products”
In order to show variables images in colors, enable this option in the Theme Settings > Shop > Attribute swatches > chose the attribute in the Grid and enable “Use images from product variations” Besides you need to images into product variations.
i have a product with 5 colors this colors for same have design like screenshot 17. my customer wants buy black one and enter black one’s product page and she see other colors i want that my customers can see other colors in shop page and also in product page
If you want each color has a separate page you would better go to the simple product. If you want to enter a page, chose the color and see other colors available, you would better go to the variable product.