Snippets Collections
{% for collection in product.collections %}
  {% if collection.title contains "New Collection" %}
    
	<p class="line-item-property__field">
<label for="childsName">Child's Name:</label>
<input id="childsName" type="text" name="properties[Child's Name]" form="product-form-{{ section.id }}">
</p>
  
  {% endif %}
{% endfor %}
{% If product.title == "Your product name" %}
<p class="line-item-property__field">
<label for="childsName">Child's Name:</label>
<input id="childsName" type="text" name="properties[Child's Name]" form="product-form-{{ section.id }}">
</p>
{% endif %}
<p class="line-item-property__field">
<label for="childsName">Child's Name:</label>
<input id="childsName" type="text" name="properties[Child's Name]" form="product-form-{{ section.id }}">
</p>
// Accordion by WebSensePro.com
$(function() {
	// (Optional) Active an item if it has the class "is-active"	
	$(".accordion > .accordion-item.is-active").children(".accordion-panel").slideDown();
	
	$(".accordion > .accordion-item").click(function() {
		// Cancel the siblings
		$(this).siblings(".accordion-item").removeClass("is-active").children(".accordion-panel").slideUp();
		// Toggle the item
		$(this).toggleClass("is-active").children(".accordion-panel").slideToggle("ease-out");
	});
});
<ul class="accordion">
<li class="accordion-item is-active">
<h3 class="accordion-thumb">{{ product.metafields.my_fields.first_tab_title }}</h3>
<p class="accordion-panel">{{ product.metafields.my_fields.first_tab_description }}</p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">{{ product.metafields.my_fields.second_tab_title }}</h3>
<p class="accordion-panel">{{ product.metafields.my_fields.second_tab_description }}</p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">{{ product.metafields.my_fields.third_tab_title }}</h3>
<p class="accordion-panel">{{ product.metafields.my_fields.third_tab_description }}</p>
</li>
</ul>
/* Accordion CSS Code by WebSensePro.com 
https://websensepro.com/blog/how-to-create-collapsible-accordion-for-product-description-shopify/
*/
.accordion {
	 margin: 1rem 0;
	 padding: 0;
	 list-style: none;
	 border-top: 1px solid #e5e5e5;
}
 .accordion-item {
	 border-bottom: 1px solid #e5e5e5;
   list-style: none !important; 
}
/* Thumb */
 .accordion-thumb {
	 margin: 0;
	 padding: 0.8rem 0;
	 cursor: pointer;
	 font-weight: normal;
}
 .accordion-thumb::before {
	 content: '';
	 display: inline-block;
	 height: 7px;
	 width: 7px;
	 margin-right: 1rem;
	 margin-left: 0.5rem;
	 vertical-align: middle;
	 border-right: 1px solid;
	 border-bottom: 1px solid;
	 transform: rotate(-45deg);
	 transition: transform 0.2s ease-out;
}
/* Panel */
 .accordion-panel {
	 margin: 0;
	 padding-bottom: 0.8rem;
	 display: none;
}
/* Active */
 .accordion-item.is-active .accordion-thumb::before {
	 transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
star

Fri Mar 11 2022 10:50:19 GMT+0000 (UTC) https://websensepro.com/blog/dawn-theme-how-to-add-custom-input-field-specific-products-and-collections/

#shopify #theme #productdescription #inputfield
star

Fri Mar 11 2022 10:48:34 GMT+0000 (UTC) https://websensepro.com/blog/dawn-theme-how-to-add-custom-input-field-specific-products-and-collections/

#shopify #theme #productdescription #inputfield
star

Fri Mar 11 2022 10:32:33 GMT+0000 (UTC) https://websensepro.com/blog/dawn-theme-how-to-add-custom-input-field-specific-products-and-collections/

#shopify #theme #productdescription #inputfield

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension