Minimal theme with Color Swatch

Highlighted
Shopify Partner
1 0 0

I'm using minimal theme, and trying add color swatch on product page.
I followed the instruction, and color swatch & size label are displayed, but drop-down list is not removed.
Do I need to tweak something for minimal theme? 

http://docs.shopify.com/manual/configuration/store-customization/showcasing-products/add-color-swatc...

0 Likes
Highlighted
New Member
16 0 0

That's funny, because I implemented the swatches on my product page, and I want to keep the drop down menu, but it's gone. Do both your swatches and drop down menu work correctly?

0 Likes
Highlighted
New Member
1 0 0

I have the same issue as Naka. Not sure how to go about hiding it either. But both drop down menu and swatch buttons work at the same time.

0 Likes
Highlighted
New Member
3 0 0

Here is a reply after six years...in case someone encounters the same issues just like I did earlier. Follow the tutorial except the following steps:

Create a new Liquid snippet called swatch.liquid

This was fine.

Include swatch.liquid in product.liquid

Since the contents in product.liquid have been sectioned into product-template.liquid (under Sections), the swatch code was instead inserted right after the following code in product-template.liquid (found at around line 200).

Click to expand...

{% form 'product', product, class:productform_class %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
{% 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>

Locate your selectCallback function

The selectCallback function is located in theme.js under Assets.

Add code at the bottom of theme.liquid

This was fine.

Upload a soldout.png graphic to your theme assets

This was also fine.

Add CSS to your stylesheet

The CSS only works if added at the end of theme.scss.liquid under Assets.

 

And then the rest seems to work fine.

Hope it helps:)

0 Likes