1. Create Separate Pages for Each Variant
You will need to create individual product pages for each color variant. In Shopify, you can duplicate the main product page and customize the URL for each variant (e.g., /oversized-red-t-shirt, /oversized-black-t-shirt).
2. Link These Pages in the Product Variant Selector
Once you’ve created separate pages for each color, the next step is to modify the variant selection so that selecting a color redirects to the appropriate URL.
Here’s how you can achieve this:
Steps to Modify the Theme Code:
- Go to the Shopify Admin:
- Navigate to your Shopify admin panel and go to Online Store > Themes.
- Edit the Product Page Code:
- Click on Actions > Edit Code under your current theme.
- Locate the product-template.liquid or product-form.liquid file (depending on your theme, it might be in the Sections or Snippets folder).
- Modify the JavaScript for the Variant Selector:
- Inside the product form template, look for the code that handles the variant selection dropdown or buttons.
- Add a JavaScript snippet that redirects users to the corresponding URL when they select a variant.