Hi everyone,
I’m trying to add short subtitle description to my product variant swatches in the product page. Here’s a screenshot of what it should look like:
Please let me know how to do it!
Best regards, Charles Lamarre.
Topic summary
Goal: Add short subtitle descriptions beneath product variant swatches (option selectors) on the product page.
Proposed approach:
- Identify the markup that renders variant swatches in the theme’s product template (e.g., Product.liquid or main product template).
- Insert short descriptions as additional HTML elements (e.g., span/div or a p tag) for each variant, positioned under the swatch.
- Style with CSS to control spacing, font size, and color.
Technical details shared:
- Example CSS classes suggested: .variant-swatch and .variant-description with font-size, color, margin adjustments in base.css.
- Placement guidance: add the new HTML right after the label tag within the swatch markup of the main product template.
Latest updates:
- The site uses a custom template; the poster couldn’t find where to place the HTML and shared their site URL for guidance.
- Follow-up advised navigating Theme Editor → Edit Code → locate the main product template and insert descriptions after the label, with an illustrative screenshot.
Status: No confirmation of implementation yet; the solution remains guidance-only. Images (screenshots) are central to understanding placement.
Hello CharlesLamarre,
To add short subtitle descriptions to product variant swatches You need to add this code,
Here’s a general guide on how to achieve this:
__Identify the Markup:__First, you need to identify the HTML markup responsible for rendering the product variant swatches on your product page. This could be within the product template file of your website’s theme.
Add Short Descriptions: Once you’ve identified the markup, you can add short descriptions to each product variant swatch. This can be done by adding additional HTML elements (such as or
) containing the short descriptions.
Style with CSS: After adding the short descriptions, you’ll likely need to style them using CSS to ensure they display properly alongside the swatches. This might involve adjusting the size, position, and styling of the descriptions to fit neatly with the swatches.
Add this HTML to the Product. liquid file
Description for Variant 1
Description for Variant 2
Save Changes.
Now Add this CSS to the base.css file. (in the bottom)
.variant-swatch {
display: inline-block;
margin-right: 10px; /* Adjust spacing between swatches */
}
.variant-description {
display: block;
font-size: 12px; /* Adjust the font size */
color: #555; /* Adjust the text color */
margin-top: 5px; /* Adjust spacing between swatch and description */
}
Save Changes.
Thank you for that solution, I am using a custom template for my website and can’t find where exactly to input the HTML code. Could you please look into it and let me know? Here’s my website url: iceful.com
Thank you!
Best regards, Charles.
Hello CharlesLamarre,
Go to theme editor > Edit Code > Find (Main Product-template)File
I have given you a screenshot Then you clear on how to add a short description of the variant swatches
Add This HTML given in the screenshot After the label tag
/* Add your short description here P tag*/
This is a dummy description of variant productThis is a dummy description of variant productThis is a dummy description of variant product
I hope this is helpful to you.