Display one colour option on Shopify product page

Question

I'm trying to display only one colour variant of my product at any time when one is selected.

I can get it to work when I manually assign an image to each of the product colours, but when I upload a new .CSV, this is overwritten. Since there are going to be hundreds of products on this store, this isn't a viable solution.

Any help would be greatly appreciated. Thank you.

Link to .CSV

https://docs.google.com/spreadsheets/d/1trq0X3MjR-n2THFnT8gYYlwKscnQavCeeZ8L-ifYaHw/edit?usp=sharing

Link to Product page

https://tomgarrad.myshopify.com/products/lightweight-trainers?variant=37878137356461

There is a password on the store, would you mind sharing it so I could take a look? — Insula
Please see below a pastebin to all of the code I've edited - If you need anything else, just let me know or I can give you access. product-template.liquid pastebin.com/Bt7VxTKZ theme.js pastebin.com/MnkMEWeA — Tom

Insula Insula · Accepted Answer · 2021-01-19T09:42:06

Use the Shopify API instead of uploading from a spreadsheet. It allows you to do a lot of things, the following code would upload a product:

POST /admin/api/2021-01/products.json
{
  "product": {
    "title": "Lightweight Trainers",
    "body_html": "<strong>Great trainers!</strong>", #Description
    "vendor": "Tom", #The name of the products vendor
    "product_type": "Trainer",
    "variants": [
      {
        "option1": "Blue",
        "price": "10.00",
        "sku": "123" #code
      },
      {
        "option2": "Red",
        "price": "10.00",
        "sku": "123" 
      }
    ],
    "images": [
      {
        "attachment": "R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\n"
      }
    ]
  }
}

The image attachment is base64 encoded so keep that in mind when uploading images. Shopify has a very detailed documentation of their API and it's easy to setup. Hopefully this will work for you.

Display one colour option on Shopify product page

1 Answers