How to Display Sizing Variant on Homepage featured collection

[lemonstreet]

Hello,

How would I be able to display the size variant within the featured collection homepage? Right now, it displays the name and pricing but I would like to add a third variant. I only have one size, not a collection on sizes. How or what code would I need to change? Thanks!

[JakeJ]

To display the size variant in the featured collection on your homepage, follow these steps:

1. Locate the featured collection section: Go to Online Store > Themes > Actions > Edit Code and find the relevant template (e.g., featured-collection.liquid).

2. Add the size variant: Inside the product loop, add this code to show the size:{% for product in collection.products %}
   <div class="product-info">
   <h2>{{ product.title }}</h2>
   <p class="price">{{ product.price | money }}</p>
   <p class="size">Size: {{ product.variants.first.options[0] }}</p>
   </div>
   {% endfor %}

3. 1. Save & Test: Save your changes and preview your homepage. The size should now appear with the product name and price.

   Let me know if It was clear enough

[CodingFifty]

Hey! @lemonstreet,

Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?

[PaulNewton]

Hi @lemonstreet 👋

 I only have one size

---

The simplest solution is to just put the size in the product name when there is only one size for products.

Use the bulk editor, or product CSV export/import to do it fast.

Otherwise a theme customization is needed and some styling which can vary wildly by theme which you omitted.

If you need this customization then contact me by my email for services

Or if you have access use a private message by clicking here (sloooower).
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

[lemonstreet]

I'm working in card-product.liquid and pulling variables. However, I’m not sure which variable to use to correctly pull the size. Right now, it shows as "0," which isn’t accurate.

I’ve already added the sizing variant in the product setup, but I’m not sure if it's properly connected from the backend to the frontend. If this isn’t possible to fix, I could add the size to the product title as a workaround, but I’d prefer not to.

 

Thanks!!

[lemonstreet]

@JakeJ @PaulNewton @CodingFifty please refer to message above. Thanks!!

[PaulNewton]

The quantity breaks has nothing to do with the stated goal.

If using chatgpt etc avoid doing that they spit out nonsense that just complicates things if you don't already know what your doing.

Either go through the variants options or other properties on the variant object your getting through the select_or_first_available_variant product property.

e.g variant.options.first

See the liquid docs for that property and others, or the product option object to not even go into the variants.

https://shopify.dev/docs/api/liquid/objects/variant#variant-options 

https://shopify.dev/docs/api/liquid/objects/product_option 

[Easify-Jennifer]

Hi @lemonstreet 

Looks like you're trying to show a size option right on your featured collection section. I’d recommend giving Easify Product Options a try — it’s super easy to set up and doesn’t require any code. Definitely a simple way to get what you need working smoothly. Here's how it works: 

• This is the result: 

• This is the app setting: You can set your size variants as dropdown, button, radio button, etc.

To display the option on the homepage and collection page, simply select them under the 'Other pages' section in the App Settings.

This app is very beginner-friendly, I hope you will try it. If you need any further assistance setting this up, please let me know or reach out to Easify!