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:
- From your Shopify admin, go to Online Store > Themes.
- Find chord theme that you want to edit, and then click Customize.
- You need to open up any product, from inside the theme editor area, or select the product page from the dropdown at the top.
- Add block by selecting [+] Add block.
- Select Custom option.
Custom option block
| Setting | Description |
|---|---|
| Type | Choose a option type from the drop-down menu:
|
| 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