Variant sections duplicate on Dawn Theme

[LisaKK]

Hi Shopify Experts,

I’m reaching out for assistance with two issues on my Shopify store using the Dawn theme 15.3.0.

1. Duplicate Variant Sections Bug
I followed this tutorial video to add image swatches to product pages. While the feature works initially, a bug causes variant sections to duplicate under certain conditions:

• Works:
  • Products with a single variant (e.g., “Color”).
  • Products with two variants (e.g., “Color + Pattern”).
• Fails:
  • Products with a single variant (e.g., “Size”).
  • Products with two similar variants (e.g., “Size + Length”).

I’ve attached screenshots/files for reference. Could someone help troubleshoot this? I suspect it relates to how the theme handles variant naming conventions.

2. Remove HTML Sitemap from Search Results
Additionally, I’d like to exclude the sitemap page (file attached) from appearing in search results. What’s the best way to achieve this?

I’m not technically experienced, so clear step-by-step guidance would be greatly appreciated.

Thank you in advance for your support!

[goldi07]

Hello @LisaKK

Issue 1: Duplicate Variant Sections Bug in Dawn 15.3.0
Since the variant swatches duplicate under certain conditions, the issue likely stems from how the JavaScript controlling variants is applied.

Possible Causes:

1. Incorrect Event Listeners – If your code applies event listeners multiple times, it may duplicate variant sections.
2. Theme’s Default Variant Rendering Conflicts – Dawn’s default variant code might be interfering with your custom swatch script.
3. Issue with Variant Naming – Shopify’s handling of option.name could cause problems when similar options exist (like “Size” and “Length”).

Fix:
You’ll need to check where your JavaScript creates new variant elements and ensure it doesn’t append them more than once. Try this:

1.Locate Your Swatch Script
Find where you added JavaScript for the swatches (usually in theme.js or global.js).

2.Prevent Duplicates
Add this check before appending elements:

document.querySelectorAll('.variant-section').forEach(section => {
    if (section.dataset.processed) return; // Prevent duplicate processing
    section.dataset.processed = true;
});

3.Verify Theme’s Default Code Isn’t Overwriting Changes
If your script dynamically appends swatches, make sure the theme’s built-in variant script isn’t duplicating them.

4.Test With Different Variants
Try adding dummy products with multiple variants (e.g., “Color + Size” vs. “Size + Length”) and see if duplication happens consistently.

If the issue persists, I can review your theme.js file if you share it.

Issue 2: Remove HTML Sitemap from Search Results
To prevent the sitemap from appearing in search results, you can hide it from Shopify’s search index.

Solution: Add noindex Meta Tag

1. Go to Online Store > Themes > Edit Code

2. Open theme.liquid

3. Add this code inside the section:

{% if template == 'page.sitemap' %}

{% endif %}

Replace page.sitemap with the actual template file name (check in Templates).

4. Save & Test

Wait a few days for Google to update its index.
You can also request URL removal via Google Search Console.

Thank you

[TheUntechnickle]

Hey @LisaKK ,

I hope you’re doing fantastic! Thank you for sharing these details about your Shopify store issues. I’ve analyzed both problems and can provide solutions:

1. Fixing the Duplicate Variant Sections Bug

The issue stems from how your color swatch implementation identifies variant types. The code is currently only looking for variants named “Color” but not properly handling other variant types like “Size” or “Length”. Here’s how to fix it:

1. Go to Themes → Edit code → Config → settings_schema.json

2. Find the “optionName” field (around line 17-21) in the Color Swatches section

3. Change this line:

   {
     "type": "text",
     "id": "optionName",
     "label": "Swatch option name",
     "default": "Color",
     "info": "Make sure capitalization is same as variant for e.g Color not color "
   }
   

4. To this multi-select approach:

   {
     "type": "select",
     "id": "swatchVariantType",
     "label": "Which variant type should use swatches?",
     "options": [
       {
         "value": "first",
         "label": "First variant type only (usually Color)"
       },
       {
         "value": "all",
         "label": "All variant types"
       },
       {
         "value": "custom",
         "label": "Custom selection (specify below)"
       }
     ],
     "default": "first"
   },
   {
     "type": "text",
     "id": "optionName",
     "label": "Custom swatch option names",
     "default": "Color",
     "info": "For custom selection only. Separate multiple names with commas (e.g., Color, Size)"
   }
   

5. Then locate your Snippets → product-variant-picker.liquid file and modify the beginning of it to:

   <fieldset class="js product-form__input product-form__input--pill">
     {%- liquid
       assign useColor = false
    
       if settings.swatchVariantType == "first" and forloop.first
         assign useColor = true
       elsif settings.swatchVariantType == "all"
         assign useColor = true
       elsif settings.swatchVariantType == "custom"
         assign optionNames = settings.optionName | split:","
         for optionColor in optionNames
           if optionColor == option.name
             assign useColor = true
             break
           endif
         endfor
       endif
     -%}
     {%- if useColor -%}
       <legend class="form__label">{{ option.name }}:<span id="selected-{{ option.name }}"> {{ option.selected_value }}</span></legend>
       {% render 'color-option', product: product, option: option, block: block %}
     {%- else -%}
       <legend class="form__label">{{ option.name }}</legend>
       {% render 'product-variant-options', product: product, option: option, block: block, picker_type: picker_type %}
     {%- endif -%}
   </fieldset>
   

This gives you three options for how variant swatches appear:

• First variant only (typically “Color”)
• All variants use swatches
• Custom selection where you specify exactly which variant types use swatches

2. Removing HTML Sitemap from Search Results

To exclude your sitemap pages from search results:

1. Go to Theme → Edit code → Templates

2. Open your HTML sitemap template file (likely page.sitemap.liquid)

3. Add this line at the top of the file:

   {% layout 'theme.no-robots' %}
   

4. Create a new Layout file:

   • Go to Layouts folder
   • Create a new file named theme.no-robots.liquid
   • Copy the content from your theme.liquid file
   • Add this between the tags:

   <meta name="robots" content="noindex, nofollow">
   

This will prevent search engines (including Shopify’s internal search) from indexing your sitemap pages.

Please let me know if you need any clarification or have questions about implementing these solutions.

Best regards,
Shubham | Untechnickle

[LisaKK]

Hi, thanks for the guidance! I’ve tried the steps, but here are the remaining issues:

1. Variant Picker Bug

Step 5 Clarification:
You mentioned: “modify the beginning of it to…”

• Did you mean I should copy and paste the code to the very top of the product-variant-picker.liquid file ?
• If yes, I did this, but the bug still persists . Could there be another step or adjustment needed?

2. Removing HTML sitemap

Issue:

• When I checked the Templates folder , I could not find a page.sitemap.liquid file .
• I’ve attached screenshots of my folder structure for your reference. Could you review them to confirm where the sitemap is located in my theme?

Let me know if you need further details!