Creating and Managing Swatches

1. Enable the OSCP Swatch Widget Block

  • In your Shopify admin, go to Online Store > Themes.
  • Click Customize.
  • From the top dropdown, select the Default Product template.
  • In the product section, click Add Block.
  • Select OSCP Swatches App from the list of blocks.
  • Click Save to apply the changes.

2. Access Swatch Settings

  • In your Shopify admin, go to Settings > Custom Data.
  • Locate and click on the metaobject named osc_sw (created by the app).
  • Add a new swatch entry by clicking Add Entry.
access-swatch-settings

3. Add a Swatch Entry

  • In the Swatch Name field, enter your desired label (e.g., “Color Options”).
  • Copy the same value and paste it into the Handle field.
  • Under Associated Products, add the products that should appear as swatch options.
add-a-swatch-entry

4. Refer Metaobject Reference in Swatch metafields

  • In your Shopify admin, go to Settings > Custom Data > Products
  • Locate and click on the metafields named Swatch Product (created by the app).
refer-metaobject-reference-in-swatch-metafields
product-admin-page-to-assign-swatch

This metafield is displayed on the product admin page to assign swatch.

5. Assign a Swatch to Other Products

  • Navigate to the Products section in Shopify admin.
  • Select the product you want to display the swatch on.
  • Scroll down to the Metafields section.
  • In the Swatch Product field, select the swatch you created earlier from the dropdown.
  • Click Save.
assign-a-swatch-to-other-products

6. Set the Swatch Item Sort Order

  • Go to the product pages of the Associated Products (products added in your swatch entry).
  • Scroll down to the Metafields section.
  • In the Sort Order field, enter a number indicating the desired display order for each product.
  • Lower numbers appear first. Click Save after updating.
set-the-swatch-item-sort-order

7. Test the Swatches on the Storefront

  • Go to the storefront product page where the swatch is applied.
  • Confirm that the swatches are displaying correctly.