Commerce Kickstart 2 Display color as visual colour

Question

In the 'Tops' Content type/Product Variation, the color selection in the 'catalog' shows up as multiple color blocks below the 'From $00.00' price information.

I've made up a new Content type and Product Variation, also with color. How do I get all the available product variation colors to show up as blocks of color below the price instead of just a single link to the first variations colour?

Answer 1

Go to Store setting -> Product settings -> Variation types -> your content type -> manage fields -> edit color(term reference) enable the settings under "ATTRIBUTE FIELD SETTINGS"

Answer 2

You go into the Content Type and in the "Manage Display" -> "Product List" mode, you add a Field Extractor to get the color field and use view mode of 'Add to cart form' for view mode

Answer 3

Navigate: Content > Content types

Click Link: (your type) > Manage display

Select Button: Manage display > Product list

If it's not there, be sure to add it to the visible area:

Product variations

Select: < Hidden >

Select: Field Extractor

Click Button: Settings

Enter the following:

Field: field_color

Formatter: Rendered entity

View mode: Add to Cart form - Attribute

Click Button: Update

Click Button: Save