How to Add a Size Guide to Shopify?

Adding a size guide to your Shopify store can significantly reduce return rates and improve customer satisfaction. This comprehensive tutorial will walk you through the process of implementing a professional size guide with custom Liquid code that seamlessly integrates with your product pages.

Why Add a Size Guide?

Before diving into the implementation, it's worth understanding the benefits:

• Reduces return rates by helping customers choose the right size
• Improves customer shopping experience
• Boosts customer confidence when making purchasing decisions
• Decreases support inquiries about sizing
• Can increase conversion rates by removing purchase hesitation

Method 1: Simple Size Guide Modal

This method creates a clickable "Size Guide" link that opens a modal window displaying your size chart.

Step 1: Add the Custom Liquid Code

1. Log in to your Shopify admin panel
2. Go to Online Store > Themes
3. Find your active theme and click on Actions > Edit code
4. In the Templates directory, locate and click on product.liquid (or your product template file if using a different one)
5. Find a suitable location to add your size guide button (typically near the variant/size selector)
6. Add the following code:

liquid

<div class="size-guide-container">
  <a href="#" class="size-guide-trigger">Size Guide</a>
  
  <!-- Size Guide Modal -->
  <div id="size-guide-modal" class="size-guide-modal">
    <div class="size-guide-content">
      <span class="size-guide-close">&times;</span>
      <h2>Size Guide</h2>
      
      <!-- Size Guide Table -->
      <div class="size-guide-table-container">
        <table class="size-guide-table">
          <thead>
            <tr>
              <th>Size</th>
              <th>Chest (in)</th>
              <th>Waist (in)</th>
              <th>Hips (in)</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>XS</td>
              <td>32-34</td>
              <td>24-26</td>
              <td>34-36</td>
            </tr>
            <tr>
              <td>S</td>
              <td>34-36</td>
              <td>26-28</td>
              <td>36-38</td>
            </tr>
            <tr>
              <td>M</td>
              <td>36-38</td>
              <td>28-30</td>
              <td>38-40</td>
            </tr>
            <tr>
              <td>L</td>
              <td>38-40</td>
              <td>30-32</td>
              <td>40-42</td>
            </tr>
            <tr>
              <td>XL</td>
              <td>40-42</td>
              <td>32-34</td>
              <td>42-44</td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <!-- Measurement Guide -->
      <div class="measurement-guide">
        <h3>How to Measure</h3>
        <p><strong>Chest:</strong> Measure around the fullest part of your chest, keeping the measuring tape horizontal.</p>
        <p><strong>Waist:</strong> Measure around your natural waistline, keeping the tape comfortably loose.</p>
        <p><strong>Hips:</strong> Measure around the fullest part of your hips.</p>
      </div>
    </div>
  </div>
</div>

‍

Step 2: Add the CSS

Next, you'll need to add some CSS to style your size guide. In your theme editor:

1. Navigate to Assets folder
2. Open your main CSS file or create a new one (e.g., size-guide.css)
3. Add the following CSS:

css

/* Size Guide Styles */
.size-guide-container {
  margin: 15px 0;
}

.size-guide-trigger {
  display: inline-block;
  text-decoration: underline;
  color: #333;
  cursor: pointer;
  font-size: 14px;
}

.size-guide-trigger:hover {
  color: #000;
}

/* Modal Styles */
.size-guide-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

.size-guide-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 5px;
  width: 80%;
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
}

.size-guide-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.size-guide-close:hover {
  color: #000;
}

/* Table Styles */
.size-guide-table-container {
  margin: 20px 0;
  overflow-x: auto;
}

.size-guide-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.size-guide-table th, 
.size-guide-table td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: center;
}

.size-guide-table th {
  background-color: #f8f8f8;
  font-weight: bold;
}

.size-guide-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Measurement Guide */
.measurement-guide {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.measurement-guide h3 {
  margin-bottom: 10px;
}

/* Responsive adjustments */
@media screen and (max-width: 600px) {
  .size-guide-content {
    width: 95%;
    margin: 5% auto;
    padding: 15px;
  }
  
  .size-guide-table th, 
  .size-guide-table td {
    padding: 6px 8px;
    font-size: 13px;
  }
}

‍

Step 3: Add the JavaScript

Finally, add the JavaScript to make the modal functional:

1. Open your theme.liquid file or create a custom JavaScript file
2. Add the following JavaScript code:

javascript

// Size Guide Modal Functionality
document.addEventListener('DOMContentLoaded', function() {
  const sizeGuideTrigger = document.querySelector('.size-guide-trigger');
  const sizeGuideModal = document.querySelector('#size-guide-modal');
  const sizeGuideClose = document.querySelector('.size-guide-close');
  
  if (sizeGuideTrigger && sizeGuideModal) {
    // Open modal
    sizeGuideTrigger.addEventListener('click', function(e) {
      e.preventDefault();
      sizeGuideModal.style.display = 'block';
      document.body.style.overflow = 'hidden'; // Prevent scrolling when modal is open
    });
    
    // Close modal when clicking X
    if (sizeGuideClose) {
      sizeGuideClose.addEventListener('click', function() {
        sizeGuideModal.style.display = 'none';
        document.body.style.overflow = ''; // Re-enable scrolling
      });
    }
    
    // Close modal when clicking outside of content
    window.addEventListener('click', function(e) {
      if (e.target === sizeGuideModal) {
        sizeGuideModal.style.display = 'none';
        document.body.style.overflow = ''; // Re-enable scrolling
      }
    });
  }
});

‍

Method 2: Product-Specific Size Guides

For more advanced shops with different size guides for different products, you can use metafields to create product-specific size guides.

Step 1: Set Up Product Metafields

1. Go to Shopify Admin > Settings > Custom data
2. Click Add definition
3. For namespace, enter "product_info"
4. For key, enter "size_guide"
5. Choose "Rich text" as the type
6. Save the definition

Step 2: Add Size Guide Content to Products

1. Go to a product you want to add a size guide to
2. Scroll down to the "Metafields" section
3. Find your "product_info.size_guide" field
4. Enter your HTML size guide content (you can use tables similar to the ones in Method 1)
5. Save the product

Step 3: Add Custom Liquid Code to Your Product Template

liquid

{% if product.metafields.product_info.size_guide %}
  <div class="size-guide-container">
    <a href="#" class="size-guide-trigger">Size Guide</a>
    
    <!-- Size Guide Modal -->
    <div id="size-guide-modal" class="size-guide-modal">
      <div class="size-guide-content">
        <span class="size-guide-close">&times;</span>
        <h2>Size Guide for {{ product.title }}</h2>
        
        <!-- Size Guide Content from Metafields -->
        <div class="size-guide-custom-content">
          {{ product.metafields.product_info.size_guide }}
        </div>
      </div>
    </div>
  </div>
{% endif %}

Add the same CSS and JavaScript from Method 1 to make this work.

‍

Method 3: Using Product Tags for Conditional Size Guides

If you have different categories of products that need different size guides (e.g., shirts, pants, shoes), you can use product tags to show the right guide.

Step 1: Tag Your Products

Add appropriate tags to your products like "shirts", "pants", "shoes", etc.

Step 2: Create Conditional Size Guide Code

Add this code to your product template:

liquid

<div class="size-guide-container">
  <a href="#" class="size-guide-trigger">Size Guide</a>
  
  <!-- Size Guide Modal -->
  <div id="size-guide-modal" class="size-guide-modal">
    <div class="size-guide-content">
      <span class="size-guide-close">&times;</span>
      <h2>Size Guide</h2>
      
      {% if product.tags contains 'shirts' %}
        <!-- Shirts Size Guide -->
        <div class="size-guide-table-container">
          <h3>Shirts Size Chart</h3>
          <table class="size-guide-table">
            <thead>
              <tr>
                <th>Size</th>
                <th>Chest (in)</th>
                <th>Sleeve (in)</th>
                <th>Length (in)</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>S</td>
                <td>36-38</td>
                <td>32</td>
                <td>28</td>
              </tr>
              <tr>
                <td>M</td>
                <td>38-40</td>
                <td>33</td>
                <td>29</td>
              </tr>
              <tr>
                <td>L</td>
                <td>40-42</td>
                <td>34</td>
                <td>30</td>
              </tr>
              <!-- Add more sizes as needed -->
            </tbody>
          </table>
        </div>
        
      {% elsif product.tags contains 'pants' %}
        <!-- Pants Size Guide -->
        <div class="size-guide-table-container">
          <h3>Pants Size Chart</h3>
          <table class="size-guide-table">
            <thead>
              <tr>
                <th>Size</th>
                <th>Waist (in)</th>
                <th>Hip (in)</th>
                <th>Inseam (in)</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>S</td>
                <td>28-30</td>
                <td>36-38</td>
                <td>30</td>
              </tr>
              <tr>
                <td>M</td>
                <td>30-32</td>
                <td>38-40</td>
                <td>31</td>
              </tr>
              <tr>
                <td>L</td>
                <td>32-34</td>
                <td>40-42</td>
                <td>32</td>
              </tr>
              <!-- Add more sizes as needed -->
            </tbody>
          </table>
        </div>
        
      {% elsif product.tags contains 'shoes' %}
        <!-- Shoes Size Guide -->
        <div class="size-guide-table-container">
          <h3>Shoes Size Chart</h3>
          <table class="size-guide-table">
            <thead>
              <tr>
                <th>US Size</th>
                <th>EU Size</th>
                <th>UK Size</th>
                <th>Foot Length (cm)</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>7</td>
                <td>40</td>
                <td>6.5</td>
                <td>25</td>
              </tr>
              <tr>
                <td>8</td>
                <td>41</td>
                <td>7.5</td>
                <td>26</td>
              </tr>
              <tr>
                <td>9</td>
                <td>42</td>
                <td>8.5</td>
                <td>27</td>
              </tr>
              <!-- Add more sizes as needed -->
            </tbody>
          </table>
        </div>
        
      {% else %}
        <!-- Default Size Guide -->
        <div class="size-guide-table-container">
          <h3>General Size Chart</h3>
          <table class="size-guide-table">
            <thead>
              <tr>
                <th>Size</th>
                <th>XS</th>
                <th>S</th>
                <th>M</th>
                <th>L</th>
                <th>XL</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>US Size</td>
                <td>0-2</td>
                <td>4-6</td>
                <td>8-10</td>
                <td>12-14</td>
                <td>16-18</td>
              </tr>
              <!-- Add more measurements as needed -->
            </tbody>
          </table>
        </div>
      {% endif %}
      
      <!-- Measurement Instructions -->
      <div class="measurement-guide">
        <h3>How to Measure</h3>
        <p>For the most accurate sizing, we recommend taking your measurements as follows:</p>
        <p><strong>Chest:</strong> Measure around the fullest part of your chest, keeping the measuring tape horizontal.</p>
        <p><strong>Waist:</strong> Measure around your natural waistline, keeping the tape comfortably loose.</p>
        <p><strong>Hips:</strong> Measure around the fullest part of your hips.</p>
      </div>
    </div>
  </div>
</div>

‍

Method 4: App-Free Size Guide with Collection-Based Approach

This method lets you create different size guides for different collections.

liquid

<div class="size-guide-container">
  <a href="#" class="size-guide-trigger">Size Guide</a>
  
  <!-- Size Guide Modal -->
  <div id="size-guide-modal" class="size-guide-modal">
    <div class="size-guide-content">
      <span class="size-guide-close">&times;</span>
      <h2>Size Guide</h2>
      
      {% for collection in product.collections %}
        {% case collection.handle %}
          {% when 'mens-apparel' %}
            <!-- Men's Apparel Size Guide -->
            <div class="size-guide-table-container">
              <h3>Men's Apparel Size Chart</h3>
              <table class="size-guide-table">
                <!-- Men's size chart content -->
                <thead>
                  <tr>
                    <th>Size</th>
                    <th>Chest (in)</th>
                    <th>Waist (in)</th>
                    <th>Hips (in)</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>S</td>
                    <td>35-37</td>
                    <td>29-31</td>
                    <td>35-37</td>
                  </tr>
                  <tr>
                    <td>M</td>
                    <td>38-40</td>
                    <td>32-34</td>
                    <td>38-40</td>
                  </tr>
                  <!-- Add more sizes -->
                </tbody>
              </table>
            </div>
            {% break %}
            
          {% when 'womens-apparel' %}
            <!-- Women's Apparel Size Guide -->
            <div class="size-guide-table-container">
              <h3>Women's Apparel Size Chart</h3>
              <table class="size-guide-table">
                <!-- Women's size chart content -->
                <thead>
                  <tr>
                    <th>Size</th>
                    <th>Bust (in)</th>
                    <th>Waist (in)</th>
                    <th>Hips (in)</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>S</td>
                    <td>33-35</td>
                    <td>25-27</td>
                    <td>35-37</td>
                  </tr>
                  <tr>
                    <td>M</td>
                    <td>36-38</td>
                    <td>28-30</td>
                    <td>38-40</td>
                  </tr>
                  <!-- Add more sizes -->
                </tbody>
              </table>
            </div>
            {% break %}
            
          {% when 'footwear' %}
            <!-- Footwear Size Guide -->
            <div class="size-guide-table-container">
              <h3>Footwear Size Chart</h3>
              <table class="size-guide-table">
                <!-- Footwear size chart content -->
                <thead>
                  <tr>
                    <th>US</th>
                    <th>EU</th>
                    <th>UK</th>
                    <th>CM</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>7</td>
                    <td>40</td>
                    <td>6.5</td>
                    <td>25</td>
                  </tr>
                  <tr>
                    <td>8</td>
                    <td>41</td>
                    <td>7.5</td>
                    <td>26</td>
                  </tr>
                  <!-- Add more sizes -->
                </tbody>
              </table>
            </div>
            {% break %}
            
          {% else %}
            {% if forloop.last %}
              <!-- Default Size Guide when no specific collection matches -->
              <div class="size-guide-table-container">
                <h3>General Size Chart</h3>
                <table class="size-guide-table">
                  <!-- Default size chart content -->
                  <thead>
                    <tr>
                      <th>Size</th>
                      <th>XS</th>
                      <th>S</th>
                      <th>M</th>
                      <th>L</th>
                      <th>XL</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>US Size</td>
                      <td>0-2</td>
                      <td>4-6</td>
                      <td>8-10</td>
                      <td>12-14</td>
                      <td>16-18</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            {% endif %}
        {% endcase %}
      {% endfor %}
      
      <!-- General measurement instructions -->
      <div class="measurement-guide">
        <h3>How to Take Your Measurements</h3>
        <p>For the most accurate fit, we recommend you take your measurements as follows:</p>
        <ul>
          <li><strong>Chest/Bust:</strong> Measure around the fullest part, keeping the tape horizontal.</li>
          <li><strong>Waist:</strong> Measure around your natural waistline.</li>
          <li><strong>Hips:</strong> Measure around the fullest part of your hips.</li>
          <li><strong>Inseam:</strong> Measure from the crotch to the bottom of the leg.</li>
        </ul>
      </div>
    </div>
  </div>
</div>

‍

Mobile Optimization Tips

To ensure your size guide works well on mobile devices:

1. Make the tables horizontally scrollable on small screens
2. Increase the size of the close button for better touch interaction
3. Make the modal content take up more of the screen on mobile
4. Add this additional CSS:

css

@media screen and (max-width: 480px) {
  .size-guide-content {
    width: 95%;
    margin: 5% auto;
    padding: 12px;
  }
  
  .size-guide-close {
    font-size: 32px;
    padding: 5px;
  }
  
  .size-guide-table th, 
  .size-guide-table td {
    padding: 5px;
    font-size: 12px;
  }
  
  /* Make the table scroll horizontally on small screens */
  .size-guide-table-container {
    overflow-x: auto;
  }
}

‍

Best Practices for Size Guides

1. Be accurate: Ensure your measurements are accurate and consistent
2. Use visuals: Consider adding diagrams showing how to take measurements
3. Include international sizing: If you sell globally, include conversions for different regions
4. Keep it simple: Don't overwhelm customers with too much information
5. Update regularly: Review and update your size guides as your products change

Troubleshooting Common Issues

Size Guide Not Showing

• Check that your JavaScript is properly included in your theme
• Verify that the class names in your CSS match those in your HTML
• Ensure jQuery is loaded before your custom script (if using jQuery)

Modal Opens But Tables Look Wrong

• Check your CSS for conflicts with the theme
• Verify all opening and closing tags in your HTML tables
• Test on multiple browsers and devices

Size Guide Doesn't Close

• Check that your JavaScript event listeners are properly set up
• Verify that the close button has the correct class name
• Test your z-index values to ensure the modal is on top

Conclusion

Adding a size guide to your Shopify store is a simple but effective way to enhance the shopping experience and reduce returns. By following this tutorial, you'll be able to implement a professional-looking size guide that helps your customers make informed purchase decisions.

Remember to customize your size charts to match your specific products and measurements. For best results, consider using actual measurements from your products rather than standard size charts whenever possible.