Print swatch

[Shani-Swim]

I am having a difficult time uploading print as swatch and diferent swimwear.
I would like like many shops where visitor can
click on a print on the products page and it will change the photo to the exact swimwear.

I use Dawn.
this is what it look like right now

this pink color appear as picture and not as swatch also

Please guide me

Products

[WebsiteDeveloper]

Hi,

The pink square is appearing as the main product image because it has likely been assigned as the variant image. The fabric swatch and the swimsuit photo need to be set up separately.

To fix it:

1. Assign the relevant swimwear product category.
2. Connect the Colour name variant option to Shopify’s Colour category metafield.
3. Add each fabric print—Pink, Floral, Stripe, White—as a colour entry and upload the fabric pattern as its swatch image.
4. Assign the actual swimsuit photo to each corresponding variant.
5. In Online Store → Customize → Product template → Variant picker, select Swatch as the display style.

This way, customers will click the small fabric-print swatch, while the main product image changes to the correct swimsuit—not to a large colour square. Shopify’s native swatches require the option to be connected to the colour category metafield, and the latest Dawn version is recommended.

[Maximus3]

Connecting Color. Good. Pink is still pink not print.

Variant image assignment, NOT color picker.

As mentioned, variant image should be VARIANT IMAGE

Swatches on product cards is not a Dawn theme feature (at least not currently).

[Easify-Jennifer]

Hi @Shani-Swim

If you’d like customers to click on a print swatch and automatically see the corresponding swimwear image, rather than using the default variant picker in Dawn, you might want to take a look at Easify Custom Product Options

I’ve created a similar setup to help demonstrate how it works.

• This is the result:

• This is the app setup:

With Easify, you can create an option using the Image Swatches type and upload an image for each print or pattern. These images are displayed as visual swatches, making it much easier for customers to browse different designs compared to a standard text dropdown.

You can then link each swatch to its corresponding product image. When a customer clicks a specific print, the main product image automatically updates to show the matching swimwear design, creating the experience you’re looking for where visitors can visually switch between prints and instantly see the correct product.

In addition, if you’d like the Image Swatches to appear on both the Product Page and Collection Page, simply go to Settings → Advanced Settings, scroll down to the Other pages section, and enable Show options on → Collection page. Once enabled, the swatches will be displayed directly on your collection pages, allowing customers to browse and select prints or patterns without having to open each product first.

This approach is especially useful for swimwear stores with lots of patterns or seasonal collections, since customers can quickly compare designs and jump straight to the one they like.

The setup is quite straightforward, and if you run into any issues while configuring the swatches or linking the images, the support team is always happy to help .

[ajaycodewiz]

Your swatches are already working. Three of your four prints do show the fabric print. The problem is the photos.

I checked the 14 products on 036fa1-f4.myshopify.com that have a Colour option. Between them they have 35 colours, and 31 of those 35 have no photo attached. Only 4 do.

So when someone clicks a print, there is nothing for Shopify to switch to, and the photo stays where it was.

Fix, one product at a time:

• Open the product, go to Media, upload one photo per print.
• Scroll down to Variants and set Group by to Colour.
• Click the small square next to each colour and pick that colour’s photo.
• Save.

The big pink square:

• On Rio Top there is a plain pink image sitting in the product’s photos, set as the Pink variant image.
• Delete it from Media. Upload a photo of the pink swimsuit and assign that instead.
• A flat colour file should never be in the product photos.

To make Pink show a print instead of a plain circle:

• In Variants, click the Pink chip in the Colour row, then Edit.
• Upload your pink fabric image into the Image field and save.
• That entry is shared across your whole store, so every product using Pink gets the same swatch.

The blank circles on your collection page:

• Those are Shopify’s “no image” placeholder, same cause.
• Dawn has no built-in swatches on product cards. Yours come from custom code on your theme (card-product-variant-selection-custom.js), and it draws each circle from the variant photo.
• They fill in by themselves once every colour has a photo.

[ai-theme-code-editor]

HI @Shani-Swim

From your screenshots, it look like you’re mixing two different Shopify Features:

• Color Swatches (Soldid color like pink)
• Image swatches (print like wilk, floral, Shell)

the reason Pink is showing as the main product immage is becasue Shopify is treating it as a normal variant immmage instead of color swatch.

If you goalis what many fashion stores do. Click a print swatch and have the product gallery switch to that exact bikini/top.
Here’s the setup

1. Creat Color as your variant option (Wild, Floral, Shell, Pink)

2. Assign all images for each print to the corresponding color variant

3. In Dawn’s theme settings, enable Hide other variant images (or similar wording). This makes the gallery update when a customer select a different print.
4. For solid colors like Pink, upload a swatch image or use Shopify’s built-in color swatch instead of relying on the product image.

From your screenshots, it looks like the printed variants already have image swatches, but Pink only has a plain image, so Dawn is displaying that as the product photo rather than as a swatch.

[Steve_TopNewYork]

Hey @Shani-Swim ,

From your screenshots, it looks like the swatches are mostly configured correctly. The printed options Wild, Shell, and Floral appear to be working, but the Pink option is falling back to the variant image instead of displaying as a color swatch.

Here are a few things to check:

Open the Pink variant in the Shopify admin and verify whether the swatch is configured as a Color or an Image.

If you want a simple color circle set the swatch type to Color and assign a hex value for example, #F7B6C2 instead of using a product image.

If you want to display the fabric pattern, use an Image swatch with a small square swatch image rather than the full product photo.

Make sure each variant has its own assigned media image. In Dawn selecting a swatch should automatically switch the product gallery to that variant’s image when the media is linked correctly.

If only the Pink variant is affected, try removing and recreating that swatch as it may be using the variant image as a fallback.

Based on your screenshots this looks more like a swatch configuration issue than a limitation of the Dawn theme.

Thank You !

[claire838]

Everyone here is spot on. It’s almost always that single Pink variant setting falling back to the full product photo. Fix the hex color or upload a small cropped swatch image for Pink and you should be good to go!