Variant Images instead of Pills or Dropdown Menu

Shopify Apps
,
1

Hi, I use Craft theme and when i have variants (say for a scooter that comes in various colours) it gives me the option of a Pill or a drop down. I would much rather this show as a little image on both the product page and the collection page.

I have tried several apps but they seem so overly complicated. The images are already there attached to the variant so i just want this shown in a little circle or square without re-doing it all in another app

Anyone able to help?

2 Likes
2

Hi @OnlineToyShop

We have created a FREE color swatch and you can also use images on this.

3

Thanks, a little too complicated for me. Happy to use an app but they seem overly complicated! Any recommendations?

1 Like
4

I don’t know of any app unfortunately. If you want your variant images to be the image for the pills, we have created a simpler approach but it is not free. You can message us or visit our website if you want more information.

5

To display variant images as little circles or squares without using additional apps, you can customize your Craft theme. Follow these steps:

  1. Access your Shopify Admin: Log in to your Shopify admin and navigate to “Online Store” > “Themes.”

  2. Theme Editor: In the Themes section, click on “Customize” next to your Craft theme.

  3. Product Page: Look for the “Product Page” section in the Theme Editor.

  4. Variant Images: Check if there is an option to select the variant image display. If not, look for a setting related to product variants.

  5. Edit Code: If the theme customization options don’t provide the desired feature, you may need to edit the theme code. In the Theme Editor, look for an option like “Edit Code” or “Theme Actions” and select it.

  6. Locate Product Template: Navigate to the product template file. This is usually named product.liquid or similar. Look for the section that handles variant display.

  7. Update Code: Within the code, find the section responsible for displaying variant options. Modify it to include images in circles or squares. You’ll likely need to use HTML and CSS to achieve this.

    1. Save Changes: Save your changes and preview the product page to ensure that variant images are now displayed as desired.

    Remember, making changes to the code may require some knowledge of HTML and Liquid, so proceed with caution. If you’re not comfortable doing this yourself, consider reaching out to a Shopify expert or your theme’s support for assistance. Always backup your theme before making significant changes

{% for variant in product.variants %}
  
    
  

{% endfor %}
6

Here is the code according to the latest updated code: