Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hi,
I want a custom option for my products. We are selling photographic prints in three different styles - poster, frame and mounted frame. Sizes are different and frame color are also different.
So is there any way to let the customer choose styles, then size and then frame color. Not showing that particular size is not available in posters.
Can anyone help me?
Please share your store URL so i can provide you a solution.
Thanks!
Take a backup of your store before implementing the solution below.
1. Go into Online Store> Themes> Actions> Select "Edit Code".
2. Go to the Product-card-list.liquid file.
3. Create three another div.
<div class="product-card__image-with-placeholder-wrapper" data-image-loading-animation>
<div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
<div style="padding-top:{% unless preview_image == blank %}{{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">
<img id="{{ img_id }}"
class="grid-view-item__image lazyload"
alt="{{ preview_image.alt }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ preview_image.aspect_ratio }}"
data-sizes="auto"
data-image>
</div>
</div>
</div>
Thanks!
It doesn't work
Could this just not be done by adding in extra variants? One for sizes, one for colors and one for style? And then attach prices to those variants.