Product Page Customize

In this tutorial, we’ll walk through modifying a Shopify theme to:

1. Replace the standard variant picker with icon-based buttons.
2. Display additional product info using metafields.

---

Prerequisites

• Basic understanding of HTML, CSS, and Liquid.
• A Shopify store with access to the theme editor.
• Familiarity with Shopify metafields.

---

🔧 Task 1: Icon-Based Variant Picker

Step 1: Understand Default Variant Picker

Most Shopify themes use a <select> dropdown to allow customers to choose product variants.

We will replace it with clickable buttons that represent each variant option (e.g., color icons).

Step 2: Add Icons or Swatches

You can use SVGs or font icons (like Font Awesome) to represent each variant.

Example: For color variants, assign an icon or colored circle.

<div class="variant-picker">
  {% for option in product.options_with_values %} e
    <div class="variant-option">
      <label>{{ option.name }}</label>
      <div class="variant-values">
        {% for value in option.values %}
          <button 
            class="variant-button" 
            data-value="{{ value | escape }}">
            {{ value }}
          </button>
        {% endfor %}
      </div>
    </div>
  {% endfor %}
</div>