Variant Title above the drop-down menu box

Store Design
1

Hi, I have been struggling with the boundless theme product page variant style. The original style for the boundless theme product variant label is next to the dropdown menu inside the flexbox. I’m wondering how to code the variant title above the flex box (means above the drop-down menu like the one in the debut theme).

Thanks for the help in advance.

2

@laserdragon

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hi

So what I’m trying to do is having the variant title show above the variant selection dropdown menu. As you can see the size doesnt have a title on top. The material is what I coded in as ….

https://laserdragon.com.au/products/geometric-circle-laser-cut-shape-a-pair

4

@KetanKumar Hi, any idea on how? Thanks.

5

@laserdragon

can you please check theme setting may allow this

6

Hi @KetanKumar

The original theme label is next to the selection. I’m trying to code to have it above the selection. I have only manage to get the label on top of the first variant selection as you can see from the link but not above each shopify variant selection.

7

@laserdragon

can you please share code so i will check and update!

8

@KetanKumar

Here is the code

{% if section.settings.show_vendor %}

{{ product.vendor }}

{% endif %}

{{ product.title }}

Price

{% assign price = current_variant.price | money_without_trailing_zeros %}

{% if product.compare_at_price_max > product.price %} {{ 'products.general.regular_price' | t }} {{ current_variant.compare_at_price | money_without_trailing_zeros }} {{ 'products.general.now_price_html' | t: price: price }} {% else %} {{ 'products.general.regular_price' | t }} {{ price }} {% endif %} {% include 'product-unit-price', variant: current_variant %}

{%- capture 'form_id' -%}AddToCartForm-{{ section.id }}{%- endcapture -%} {%- capture 'form_class' -%} product__form--add-to-cart{% if section.settings.product_form_width == 'large' %} product__form--full-width{% endif %} {%- endcapture -%} {% form 'product', product, id:form_id, class:form_class, data-cart-form: '' %} {% comment %} Select element hidden when JS initializes. Safeguard for JS-disabled. {% endcomment %} * Material Type and Size: