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

  • 107 {{ upvoteCount | shortNum }}

    Warriors .... Warriors.... what would you like to LEARN?

    Good Morning awesome Warriors... I'm happy to announce that The Warrior Forum is planning to create our first COURSE. Yes... Powered by Warrior Wisdom... yeah!! Made at home. But before ... [read more]

  • 91 {{ upvoteCount | shortNum }}

    How I Sold 985 Copies of an Affiliate Offer in 5 Days (Step by Step)

    When I first started online in 2002, it took me a year to sell 985 copies of anything. These days, I can typically do it in the span of a ... [read more]

  • 1 {{ upvoteCount | shortNum }}

    Anybody have Board Commandr/Similar?

    Epiccontent in Social Networks

    Hi I liked the look of Board Commander, but it's closed to new customers. Does anybody have it ad does it work, first off? Is there an alternative that does ... [read more]

  • 1 {{ upvoteCount | shortNum }}

    Generating Free Traffic - Two-Part Question

    Friends, like many of us I am seeking more, much more, free and organic traffic. Does anyone have experience with 1) Google RLSA Re-marketing List for Search Ads (is this ... [read more]

  • 3 {{ upvoteCount | shortNum }}

    Insanely high Avg $/sale, ridiculously low Gravity? (Clickbank Marketplace)

    sprogy in Internet Marketing

    I'm looking at the top Avg $/sale products in the Clickbank Marketplace: And my question is, why are products that (supposedly) bring in so much money per conversion...and surprisingly, some ... [read more]