Overview

Create product options with text, drop-down, button, swatches, long text for any products.

Note: When adding custom options, the dynamic checkout button should be hidden.

Guidelines

Customize section

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find chord theme that you want to edit, and then click Customize.
3. You need to open up any product, from inside the theme editor area, or select the product page from the dropdown at the top.
4. Add block by selecting [+] Add block.
5. Select Custom option.

Custom option block

Setting	Description
Type	Choose a option type from the drop-down menu: Block list Dropdown Image list Text Long text
Name	Sets the option name.
Property is required	Checked the checkbox to ensure users select or enter the option before adding to cart.
VALUES	Visible when Type is Block list, Dropdown or Image list.
Values	Separate each value by a comma.
Image name prefix	Visible when Type is Image list. Differentiate pictures between multiple product templates.
First value is selected	Checked the checkbox to set the first value as the default.

 

Option type - Image list

Format the filename to match option value name

The image must be named after the color option in lowercase and formatted as a PNG or JPG.

 

For one-word names, the formatting is the most straightforward:

If the option value is Black, then name your image black.png or black.jpg.

If the image name prefix is Color, then name your image color-black.png or color-black.jpg

 

For multiple-word names, use hyphens to separate each word:

If your option value is named Dark Blue, name the image dark-blue.png or dark-blue.jpg.

If the image name prefix is Color, then name your image color-dark-blue.png or color-dark-blue.jpg

 

Like spaces, slashes and most other special characters are replaced with hyphens:

If your option value is Blue/Gray, then name your image blue-gray.png or blue-gray.jpg.

If the image name prefix is Color, then name your image color-blue-gray.png or color-blue-gray.jpg

 

Upload the files

To do that, you will first need to upload an image in the Files section of Shopify. You can learn more about how to do that here: https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads