Hi everyone,
After assessing my product page, I think that using button for Size is not a good idea. I have tried to create a dropdown for it and I made it. However, I could not select any size but S. Additionally, when I added the dropdown, the product image doesn’t change when I picks another option in Color and Style categories.
I have a photo here so that I hope you can understand how is it look like.
I also have the original code of my product page in case you need further information.
{% comment %}theme-check-disable TemplateLength{% endcomment %}
{{ 'section-main-product.css' | asset_url | stylesheet_tag }}
{{ 'component-accordion.css' | asset_url | stylesheet_tag }}
{{ 'component-badge.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-rte.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'slick.css' | asset_url | stylesheet_tag }}
{{ 'slick-theme.css' | asset_url | stylesheet_tag }}
{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
{%- if first_3d_model -%}
{{ 'component-product-model.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{% javascript %}
class ProductModal extends ModalDialog {
constructor() {
super();
}
hide() {
super.hide();
window.pauseAllMedia();
}
show(opener) {
super.show(opener);
this.showActiveMedia();
}
showActiveMedia() {
this.querySelectorAll(`[data-media-id]:not([data-media-id="${this.openedBy.getAttribute("data-media-id")}"])`).forEach((element) => {
element.classList.remove('active');
})
const activeMedia = this.querySelector(`[data-media-id="${this.openedBy.getAttribute("data-media-id")}"]`);
activeMedia.classList.add('active');
activeMedia.scrollIntoView();
if (activeMedia.nodeName == 'DEFERRED-MEDIA' && activeMedia.querySelector('template')?.content?.querySelector('.js-youtube'))
activeMedia.loadContent();
}
}
customElements.define('product-modal', ProductModal);
{% endjavascript %}
{%- if first_3d_model -%}
{%- endif -%}
{% schema %}
{
"name":"t:sections.main-product.name",
"tag":"section",
"class":"product-section spaced-section",
"blocks":[
{
"type":"@app"
},
{
"type":"text",
"name":"t:sections.main-product.blocks.text.name",
"settings":[
{
"type":"text",
"id":"text",
"default":"Text block",
"label":"t:sections.main-product.blocks.text.settings.text.label"
},
{
"type":"select",
"id":"text_style",
"options":[
{
"value":"body",
"label":"t:sections.main-product.blocks.text.settings.text_style.options__1.label"
},
{
"value":"subtitle",
"label":"t:sections.main-product.blocks.text.settings.text_style.options__2.label"
},
{
"value":"uppercase",
"label":"t:sections.main-product.blocks.text.settings.text_style.options__3.label"
}
],
"default":"body",
"label":"t:sections.main-product.blocks.text.settings.text_style.label"
}
]
},
{
"type":"title",
"name":"t:sections.main-product.blocks.title.name",
"limit":1
},
{
"type":"price",
"name":"t:sections.main-product.blocks.price.name",
"limit":1
},
{
"type":"quantity_selector",
"name":"t:sections.main-product.blocks.quantity_selector.name",
"limit":1
},
{
"type":"variant_picker",
"name":"t:sections.main-product.blocks.variant_picker.name",
"limit":1,
"settings":[
{
"type":"select",
"id":"picker_type",
"options":[
{
"value":"dropdown",
"label":"t:sections.main-product.blocks.variant_picker.settings.picker_type.options__1.label"
},
{
"value":"button",
"label":"t:sections.main-product.blocks.variant_picker.settings.picker_type.options__2.label"
}
],
"default":"button",
"label":"t:sections.main-product.blocks.variant_picker.settings.picker_type.label"
}
]
},
{
"type":"buy_buttons",
"name":"t:sections.main-product.blocks.buy_buttons.name",
"limit":1,
"settings":[
{
"type":"checkbox",
"id":"show_dynamic_checkout",
"default":true,
"label":"t:sections.main-product.blocks.buy_buttons.settings.show_dynamic_checkout.label",
"info":"t:sections.main-product.blocks.buy_buttons.settings.show_dynamic_checkout.info"
}
]
},
{
"type":"description",
"name":"t:sections.main-product.blocks.description.name",
"limit":1
},
{
"type":"share",
"name":"t:sections.main-product.blocks.share.name",
"limit":1,
"settings":[
{
"type":"paragraph",
"content":"t:sections.main-product.blocks.share.settings.featured_image_info.content"
},
{
"type":"paragraph",
"content":"t:sections.main-product.blocks.share.settings.title_info.content"
}
]
},
{
"type":"collapsible_tab",
"name":"t:sections.main-product.blocks.collapsible_tab.name",
"settings":[
{
"type":"text",
"id":"heading",
"default":"Collapsible tab",
"info":"t:sections.main-product.blocks.collapsible_tab.settings.heading.info",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.heading.label"
},
{
"type":"richtext",
"id":"content",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.content.label"
},
{
"type":"page",
"id":"page",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.page.label"
},
{
"type":"select",
"id":"icon",
"options":[
{
"value":"none",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label"
},
{
"value":"box",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label"
},
{
"value":"chat_bubble",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__3.label"
},
{
"value":"check_mark",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__4.label"
},
{
"value":"dryer",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__5.label"
},
{
"value":"eye",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__6.label"
},
{
"value":"heart",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__7.label"
},
{
"value":"iron",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__8.label"
},
{
"value":"leaf",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__9.label"
},
{
"value":"leather",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__10.label"
},
{
"value":"lock",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__11.label"
},
{
"value":"map_pin",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__12.label"
},
{
"value":"pants",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__13.label"
},
{
"value":"plane",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__14.label"
},
{
"value":"price_tag",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__15.label"
},
{
"value":"question_mark",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__16.label"
},
{
"value":"return",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__17.label"
},
{
"value":"ruler",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__18.label"
},
{
"value":"shirt",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__19.label"
},
{
"value":"shoe",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__20.label"
},
{
"value":"silhouette",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__21.label"
},
{
"value":"star",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__22.label"
},
{
"value":"truck",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__23.label"
},
{
"value":"washing",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.options__24.label"
}
],
"default":"check_mark",
"label":"t:sections.main-product.blocks.collapsible_tab.settings.icon.label"
}
]
},
{
"type":"popup",
"name":"t:sections.main-product.blocks.popup.name",
"settings":[
{
"type":"text",
"id":"link_label",
"default":"Pop-up link text",
"label":"t:sections.main-product.blocks.popup.settings.link_label.label"
},
{
"id":"page",
"type":"page",
"label":"t:sections.main-product.blocks.popup.settings.page.label"
}
]
},
{
"type":"badge",
"name":"t:sections.main-product.blocks.badge.name",
"settings":[
{
"type":"text",
"id":"label",
"label":"t:sections.main-product.blocks.badge.settings.label.label"
},
{
"type":"image_picker",
"id":"image",
"label":"t:sections.main-product.blocks.badge.settings.image.label"
}
]
}
],
"settings":[
{
"type":"header",
"content":"t:sections.main-product.settings.header.content",
"info":"t:sections.main-product.settings.header.info"
},
{
"type":"checkbox",
"id":"enable_sticky_info",
"default":true,
"label":"t:sections.main-product.settings.enable_sticky_info.label"
},
{
"type":"checkbox",
"id":"enable_video_looping",
"default":false,
"label":"t:sections.main-product.settings.enable_video_looping.label"
}
]
}
{% endschema %}
{{'jquery.min.js' | asset_url | script_tag}}
If only you could send me a code for the dropdown. Thank you very much!