Creating Drop-Down List for Sizes and Colors on Product Page

by pallavie01 0 replies
Hi,

Is it possible to create a drop-down list for sizes and colors on the product page in the Brooklyn Theme on shopify (https://themes.shopify.com/themes/br...ooklyn/preview), as opposed to having all the options visible at all times? I think this would be helpful to save space on the screen and make things look cleaner. Any suggestions/thoughts would be greatly appreciated.

Here is the code for the product page:
<!-- /templates/product.liquid -->
<div itemscope itemtype="http://schema.org/Product" id="ProductSection" data-section-id="{ { section.id } }" data-section-type="product-template" data-image-zoom-type="{ { section.settings.zoom_enable } }" data-enable-history-state="true">
<div itemscope itemtype="http://schema.org/Product">

<meta itemprop="url" content="{ { shop.url } }{ { product.url } }">
<meta itemprop="image" content="{ { product.featured_image.src | img_url: 'grande' } }">

{% assign current_variant = product.selected_or_first_available_variant %}

<div class="grid product-single">
<div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">
<div class="product-single__photos">
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}

{% comment %}
Display current variant image, or default first
{% endcomment %}
<div class="product-single__photo-wrapper">
<img class="product-single__photo"
id="ProductPhotoImg"
src="{ { featured_image | img_url: '600x', scale: 2 } }"
{% if section.settings.zoom_enable %}data-mfp-src="{ { featured_image | img_url: '1024x1024', scale: 2 } }"{% endif %}
alt="{ { featured_image.alt | escape } }" data-image-id="{ { featured_image.id } }">
</div>

{% comment %}
Display rest of product images, not repeating the featured one
{% endcomment %}
{% for image in product.images %}
{% unless image contains featured_image %}
<div class="product-single__photo-wrapper">
<img class="product-single__photo" src="{ { image.src | img_url: '600x', scale: 2 } }"
{% if section.settings.zoom_enable %}data-mfp-src="{ { image.src | img_url: '1024x1024', scale: 2 } }"{% endif %}
alt="{ { image.alt | escape } }"
data-image-id="{ { image.id } }">
</div>
{% endunless %}
{% endfor %}
</div>
</div>

<div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">
<div class="product-single__meta">
{% if section.settings.product_vendor_enable %}
<h2 class="product-single__vendor" itemprop="brand">{ { product.vendor } }</h2>
{% endif %}

<h1 class="product-single__title" itemprop="name">{ { product.title } }</h1>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{% comment %}
Optionally show the 'compare at' or original price of the product.
{% endcomment %}

{% if product.compare_at_price_max > product.price %}
<span id="PriceA11y" class="visually-hidden">{ { 'products.general.regular_price' | t } }</span>
<span class="product-single__price--wrapper">
<span id="ComparePrice" class="product-single__price--compare-at">
{% if current_variant.compare_at_price > current_variant.price %}
{ { current_variant.compare_at_price | money } }
{% endif %}
</span>
</span>
<span id="ComparePriceA11y" class="visually-hidden">{ { 'products.general.sale_price' | t } }</span>
{% else %}
<span id="PriceA11y" class="visually-hidden">{ { 'products.general.regular_price' | t } }</span>
{% endif %}

<span id="ProductPrice"
class="product-single__price{% if product.compare_at_price > product.price %} on-sale{% endif %}"
itemprop="price"
content="{ { current_variant.price | divided_by: 100.00 } }">
{ { current_variant.price | money } }
</span>

<hr class="hr--small">

<meta itemprop="priceCurrency" content="{ { shop.currency } }">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

<form action="/cart/add" method="post" enctype="multipart/form-data" class="product-single__form" id="AddToCartForm">
{% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
{% for option in product.options_with_values %}
<div class="radio-wrapper js product-form__item">
<label class="single-option-radio__label{% if option.name == 'Default' or option.name == 'Title' %} hidden-label{% endif %}"
for="ProductSelect-option-{ { forloop.index0 } }">
{ { option.name } }
</label>
<fieldset class="single-option-radio"
name="{ { option.name } }"
id="ProductSelect-option-{ { forloop.index0 } }">
{% assign option_index = forloop.index %}
{% for value in option.values %}
{% assign variant_label_state = true %}
{% if product.options.size == 1 %}
{% unless product.variants[forloop.index0].available %}
{% assign variant_label_state = false %}
{% endunless %}
{% endif %}
<input type="radio"
{% if option.selected_value == value %} checked="checked"{% endif %}
{% unless variant_label_state %} disabled="disabled"{% endunless %}
value="{ { value | escape } }"
data-index="option{ { option_index } }"
name="{ { option.name } }"
class="single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"
id="ProductSelect-option-{ { option.name } }-{ { value | escape } }">
<label for="ProductSelect-option-{ { option.name } }-{ { value | escape } }"{% unless variant_label_state %} class="disabled"{% endunless %}>{ { value | escape } }</label>
{% endfor %}
</fieldset>
</div>
{% endfor %}
{% endunless %}

<select name="id" id="ProductSelect" class="product-single__variants no-js">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %}
selected="selected" {% endif %}
data-sku="{ { variant.sku } }"
value="{ { variant.id } }">
{ { variant.title } } - { { variant.price | money_with_currency } }
</option>
{% else %}
<option disabled="disabled">
{ { variant.title } } - { { 'products.product.sold_out' | t } }
</option>
{% endif %}
{% endfor %}
</select>

{% comment %}
<div class="product-single__quantity">
<label for="Quantity" class="product-single__quantity-label js-quantity-selector">{ { 'products.product.quantity' | t } }</label>
<input type="number" hidden="hidden" id="Quantity" name="quantity" value="1" min="1" class="js-quantity-selector">
</div>
{% endcomment %}

<div class="product-single__add-to-cart">
<button type="submit" name="add" id="AddToCart" class="btn"{% unless product.available %} disabled="disabled"{% endunless %}>
<span id="AddToCartText">
{% if product.available %}
{ { 'products.product.add_to_cart' | t } }
{% else %}
{ { 'products.product.sold_out' | t } }
{% endif %}
</span>
</button>
</div>
</form>

</div>

<div class="product-single__description rte" itemprop="description">
{ { product.description } }
</div>

{% if section.settings.social_sharing_products %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
</div>
</div>
</div>

{% if collection %}
<hr class="hr--clear">
<div class="text-center">
<a href="{ { collection.url } }" class="return-link">&larr; { { 'products.general.collection_return' | t: collection: collection.title } }</a>
</div>
{% endif %}

</div>
</div>
{% unless product.empty == empty %}
<script type="application/json" id="ProductJson-{ { section.id } }">
{ { product | json } }
</script>
{% endunless %}

{% schema %}
{
"name": "Product pages",
"settings": [
{
"type": "checkbox",
"id": "zoom_enable",
"label": "Enable image zoom"
},
{
"type": "checkbox",
"id": "social_sharing_products",
"label": "Enable product sharing",
"default": true
},
{
"type": "checkbox",
"id": "product_vendor_enable",
"label": "Show product vendor"
}
]
}
{% endschema %}

Thanks.
#website design #colors #creating #dropdown #list #page #product #sizes
Avatar of Unregistered

Trending Topics

  • 2 {{ upvoteCount | shortNum }}

    Real Estate Online Syndication

    Jimg1109 in Internet Marketing

    Looking to find the best and most simple ways to syndicate investment property listings. Does anyone know?

  • 1 {{ upvoteCount | shortNum }}

    Looking For Best SEO Software/Tools

    Hi, I want to rank my article published in various pdf sites, blog sites, forum sites, calender sites, event posting sites, nation builder sites, video sharing sites and many more. ... [read more]

  • 1 {{ upvoteCount | shortNum }}

    What are the best affiliate programs?

    I am using 3 good programs and i wanted to see what programs do you consider are the best for you. The first one is called ItsCanadaTime. It has a ... [read more]

  • 1 {{ upvoteCount | shortNum }}

    Digital marketing strategy for newly developed 'similar to Shopify'

    Sushil Cn in Internet Marketing

    Guys, I got a task for a new job opportunity. They asked me to find a unique strategy for an E-commerce building site (like Shopify). I would grateful if you ... [read more]

  • 1 {{ upvoteCount | shortNum }}

    Where can I find funnel for success stories about affiliate marketing?

    Mark Mester in Internet Marketing

    Where can I find funnel for success stories about affiliate marketing?