Brooklyn theme

[KochKistl]

First, icon does not show:

https://www.kochkistl.at/51022725298/checkouts/5f2d17e4f4c3934b914ad46be290fb63

Secondly, dropdown list is show, whereas button is selected.

https://www.kochkistl.at/collections/all/products/beiried-mit-zwiebeln

Please advise.

Urs

[Gabe · Accepted solution]

Hey Urs! @KochKistl 

Ah gotcha! So Apply Pay will only show on an iPad or iPhone. Can you test that on one or the other?

[KochKistl · Accepted solution]

Hi y'all!

The developers of our Delivery Date Schedule came up with a solution on their side:

https://www.kochkistl.at/cart

Customer cannot leave without picking a delivery date

Express Payment options are not displayed here.

One has to click "Zur Kasse" = go to checkout to see these options.
Why this again?
Because when Express Payment options are displayed here, and customer does NOT pick a delivery date and, let us say, chooses PayPal Express Checkout it can be done, however cart comes up empty and payment goes through.
Weird.

Anyway, the next step displays Express payments and with delivery date it works.

I hope that helps.

Best regards,

Urs

[KochKistl · Accepted solution]

Hi Gabe!
Solution / addenum:

in timber.scss.liquid on line 3477 - right at the bottom of the file - this has to be set to

.additional_checkout_buttons .dynamic-checkout__content {
  display: block;
}

instead of:
.additional_checkout_buttons .dynamic-checkout__content {
  display:none !important;
}

and in cart.liquid commented:
{% comment %}
               {% if additional_checkout_buttons and settings.cart_type != 'drawer' %}
                <div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
              {% endif %}
{% endcomment %}

Now Express Payment buttons work on checkout page and don't show on cart page, which is crucial if you have to rely on a delivery date.

Best regards,
Walter

[Gabe]

Hey Urs! @KochKistl 

Übrigens wir bieten auch Support in der Deutschen Sprache hier im Forum fall dir das lieber ist. But English is no probs either. 

Thanks for the sticky cart link. Those sure look like some tasty hot meals there! : ) 

You say "icon does not show". Can you elaborate on what you mean by that exactly, Urs? Here's what I see:

Then you say "dropdown list is show, whereas button is selected." I must apologize but I am not sure I understand what you mean by that. Is there a missing options drop-down list on the product page you linked? This is currently what I can see:

I'll await further details so we can continue to troubleshoot any issues you are experiencing.

Best,

[KochKistl]

Ok, Gabe! Thanks for the swift answer.

English is just fine with me.

Now please take a look:
when you open this link

https://www.kochkistl.at/collections/all/products/beiried-mit-zwiebeln

our icon on the tab shows, like this:

KochKistl Icon on tab

However, when you open checkout:

https://www.kochkistl.at/51022725298/checkouts/5f2d17e4f4c3934b914ad46be290fb63

Icon doesn't show:

Weird.

Moreover,
we set the quantity selector in our brooklyn theme to button, not to dropdown,  however, dropdown is what we get:

Please, take a look:
https://www.kochkistl.at/collections/all/products/beiried-mit-zwiebeln

We have looked all over the source and couldn't find the reason why.
Thanks for your advice in advance.
Urs

[Gabe]

@KochKistl 

Thank you for the screenshots, Urs, which clarified a lot about the favicon and your quantity selector. I have created a short video on that here where I explain some of the system behaviour and I also reproduce the issue that you are seeing in my own test shop - such as that the favicon only reaches as far as where theme is active, and not as far as the checkout.

Regarding the Quantity Selector, this is what I see on my Google Chrome Browser and it is an up-down arrow, not a drop-down. Is that not what you are expecting? If you are seeing something else, what Browser are you using?

[KochKistl]

Hi, Gabe!
Thanks for the swift answer.
We always use the newest version of Google Chrome, and yes, you are right, it is an up-down arrow.
It used to be a button with a plus sign to the right and a minus sign to the left.
Up-down arrows are not so self-explanatory as buttons.

How do we get our buttons back?

Is it possible that one of our apps overrides the default settings?
Thanks again.

Regards,

Urs

[Gabe]

Hey Urs! @KochKistl 

I see what you mean now and I found the issue. The quantity selector that you mean is not part of the theme and seems to come from an app. Let me show you what I mean.

Below is the button you mean and it's on a different page coming from an app (Bundles?):

• See the demo of the button here

The Page URL is kochkistl.at/apps/bundles/bundle/60586 and so you can see this button is made by an app and not by the theme. The page Inspect tool points to the Bundle Builder App:

Does that answer your question? 

[KochKistl]

Hi Gabe!
Well, you were absolutely right, however we are preparing a second solution, because the bundle builder app doesn't seem to forward SKUs for single items in bundle,
and we need that no matter what for logistics.
One recipe - many components - needs to be "de-bundled" for purchase orders and commissioning.

Here the link for our alternative: https://www.kochkistl.at/collections/all

And here the quantity selector is not what we want. We used Chrome DevTools of course to make sense of what is happening, many hours, to no avail.

Perhaps you could come up with a solution..?

Thanks for your swift answers and the videos, very much appreciated!
Best regards,
Urs

[Gabe]

Ah gotcha! What you need is a bundles app that also manages the individual items inventory, SKUs etc. The Bundles App can do that AFAIK. Give it a try?

[KochKistl]

Gabe, one more thing for now:

Desktop view: hero page elements show in perfect order;

Mobile view not so. hero page elements slider, picture, text block and so on.

It should be slider, text block, picture and so on.

How do we change that?

Thanks again.

Urs.

[Gabe]

Hey Urs! @KochKistl 

Thanks for the details. Let me first recap what you said here and then do some troubleshooting together with your good self:

Desktop view - the sections show in perfect order. They are the following:

1. Hero Slider ("Du kochst mit Leidenschaft")
2. Text and Image 1 ("Nur die beste Qualität, von vertrauensvollen Partnern")
3. Text and Image 2 ("In 3 einfachen Schritten zu tollen Kochboxen mit allen nötigen Zutaten")
4. Text and Image 3 ("Nachhaltig, hygienisch & gekühlt verpackt")
5. Featured Collection ("Rezepte der Woche")

ISSUE on Mobile

The above section sequence is not being reflected on mobile, is that correct?

I tried to reproduce what you say but I got the exact same sequence on my Galaxy Note 20 Ultra as you can see in this screen recording .gif below. Is that what you mean? Send me more details in case I got it wrong, Urs.

See here:

[KochKistl]

Hi Gabe!

Desktop:

Hero page:

Slider -> text left aligned -> picture

picture -> text

Mobile view:

Slider -> picture -> text -> picture -> text and so on

AND NOT:

Slider -> text -> picture -> text.

Two pictures on the hero page entrance of mobile version is not what we like to have -> BDUs

Regards,
Urs

[Gabe]

@KochKistl 

Have you tried other themes to see what behaviours and properties they have? Many themes are different in the way they show the presentation layer.

With your current theme, what you see on mobile is the expected theme behaviour and any changes on the mobile view only would require a lot of coding. Have you spoken to any experts about getting somebody to program the mobile theme code for you? If not there is one I highly recommend and who does good work for cheap -> www.taskhusky.com.

Drop them a line and see what they suggest as the best mode of action?

[KochKistl]

Hi Gabe!
Thank you very much!
We decided to develop a theme of our own with Shogun on a KochKistl clone on my partner's Shopify Partner account.
But first we need to get our infrastructure right.
Meaning:
- getting our SKU problem solved & streamlined -> Pick, Pack and Promo seems to be the right app here;

The only thing that won't do - for the time being - is this:

This is a no-go for mobile devices, it used to be plus and minus buttons - BDU safe - and we cannot find the cause of this in our AJAX code...

Thank you very much again for your great support!
Regards,
Urs

[Gabe]

@KochKistl 

By BDU you mean? But yes, that sounds like a plan to have a really great Storefront and you are really putting the customer experience first!

I can fully understand that the Qty Selector on mobile isn't great but tbh, I found the UX ok as you can see below: 

Tip: As you offer food, your customers need regular deliveries and replenishments right? Have you thought about offering Subscription payment options to your customers?

• See more on that here.

Best,

[KochKistl]

Hi, Gabe!
Just one more question, please take a look:
https://www.kochkistl.at/

Shopify cart shows a red dot, however cart is empty.

How do we change that, if empty no red dot?
Thanks a lot for your efforts like always.
Best regards,

Urs

[Gabe]

@KochKistl 

Hey Urs! Ask as many questions as you like - that's what I'm here for! : )

So the expected system behaviour and reason the cart icon is 'USUALLY' showing the red dot is because you still have a product (or more) in the cart. When you browse the shop and you put a product into the cart, the cart sets a persistent browser cookie in your browser settings that remembers your products from a previous browsing session.

However in your Shop there is something wrong (as you can see in my short video here). QQ: have you changed anything in the code?

What I suggest is you send that to our theme team and they will take a look. Please send us a ticket here and that will be forwarded to our theme team. Also please include a video that shows the issue or even use my video for your ticket to our theme team.

[KochKistl]

Hi, Gabe!
Actually we changed a lot of things in the code.
But that is not so important for now, it's cosmetics.
We use bundle builder for our shop, so never mind.
One thing is odd, though: https://www.kochkistl.at/

In HTML:
"<h2 style="text-align: center;">Die beste regionale Qualität von vertrauensvollen Partnern</h2>
<p style="text-align: center;">Fleisch, saisonale Gemüse, Milchprodukte, Eier, Nudeln, Pilze und viele andere Produkte: Im KochKistl findest du beste Tiroler Qualität&nbsp;von vielen&nbsp;regionalen Landwirten und Produzenten.</p>
<p style="text-align: center;"><a href="/pages/unsere-partner" class="btn">Mehr erfahren</a></p>"

Where does the red line come from?
Best regards,

Urs

[Gabe]

@KochKistl 

Ok please include that in your ticket as I won't really be able to do an in-depth root-cause analysis. Unless Mario @r8r, you might have an idea? It could have something to do with the theme colour settings. See it on the HP here:

[KochKistl]

Dear Gabe, thank you very much so far!

There is one other thing I cannot wrap my head around, please take a look:

https://www.kochkistl.at/collections/all

Page one:

Page two:

Where does "

Spoiler

<a class="grid-product__image-link" href="/collections/all/products/beiried-mit-zwiebeln" data-image-link="">

<style>

@media screen and (min-width: 591px) {
.ProductImage-15759048310962 {
max-width: 310px;
max-height: 174.375px;
}
#ProductImageWrapper-15759048310962 {
max-width: 310px;
}
}

@media screen and (max-width: 590px) {
.ProductImage-15759048310962 {
max-width: 590px;
}
#ProductImageWrapper-15759048310962 {
max-width: 590px;
}
}

</style>

<div id="ProductImageWrapper-15759048310962" class="product--wrapper">
<div style="padding-top:56.25%;">
<img class="product--image ProductImage-15759048310962 lazyautosizes lazyloaded" data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="1.7777777777777777" data-sizes="auto" alt="" data-image="" data-srcset="//cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_180x.jpg?v=1613294261 180w, //cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_370x.jpg?v=1613294261 370w, //cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_590x.jpg?v=1613294261 590w, //cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_740x.jpg?v=1613294261 740w, //cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_900x.jpg?v=1613294261 900w, //cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_1080x.jpg?v=1613294261 1080w, //cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_1296x.jpg?v=1613294261 1296w, //cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_1512x.jpg?v=1613294261 1512w, //cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_1728x.jpg?v=1613294261 1728w, //cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_2048x.jpg?v=1613294261 2048w" sizes="309px" srcset="//cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_180x.jpg?v=1613294261 180w, //cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_370x.jpg?v=1613294261 370w, //cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_590x.jpg?v=1613294261 590w, //cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_740x.jpg?v=1613294261 740w, //cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_900x.jpg?v=1613294261 900w, //cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_1080x.jpg?v=1613294261 1080w, //cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_1296x.jpg?v=1613294261 1296w, //cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_1512x.jpg?v=1613294261 1512w, //cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_1728x.jpg?v=1613294261 1728w, //cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_2048x.jpg?v=1613294261 2048w">
</div>
</div>
<noscript>
<img class="grid-product__image" src="//cdn.shopify.com/s/files/1/0510/2272/5298/products/KochKistl_BeiriedmitRoesti_Rezeptblatt_800px_1024x.jpg?v=1613294261" alt="">
</noscript>

</a>

come from...?

Why is it , that the exact same sized pictures with the exact same template in products are different in display?

Thanks again,
best regards.
Urs

"

[Gift-o-the-Jab]

Hey @KochKistl 

Can you give some more details as to what you mean - that some images have different aspect ratios? All I see is this.

All images do not seem to have the same dimensions either as you can see in your code:

[KochKistl]

Hi Gift-o-the-Jab,

solved on our side!
Rewrote the template, it works now.
Thank you very much for your swift reply.

Best regards,

Urs

[Gift-o-the-Jab]

@KochKistl 

Great! If you share what you did (or some general indication), you may help others who are in the same boat.

[KochKistl]

Ok, here we go!

Wrote some code for product Template-Suffix to display articles in bundle builder correctly:
code in Templates

product.require-kochkistl.liquid -> this is displayed in stocklist item

Spoiler

<!-- /templates/product.liquid -->
{% comment %}
The contents of the product.liquid template can be found in /sections/product-template-require-kochkistl.liquid
{% endcomment %}

{% section 'product-template-require-kochkistl' %}
{% section 'product-recommendations' %}

{% 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 %}

code in Sections

product-template-require-kochkistl.liquid

<!-- /templates/product.liquid -->
{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}

<div itemscope itemtype="http://schema.org/Product" id="ProductSection--{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="product-template"
data-image-zoom-type="{{ section.settings.enable_image_zoom }}"
data-enable-history-state="true"
data-stacked-layout="{% if section.settings.media_layout == "stacked" %}true{% else %}false{% endif %}"
{% if first_3d_model %}data-has-model="true"{% endif %}>

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

{% assign current_variant = product.selected_or_first_available_variant %}
{% assign featured_media = current_variant.featured_media | default: product.featured_media %}

{% assign stacked = false %}
{% if section.settings.media_layout == "stacked" %}{% assign stacked = true %}{% endif %}
{%- assign first_media = true -%}

<div class="grid product-single">
<div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">
<div id="ProductMediaGroup-{{ section.id }}" class="product-single__media-group-wrapper" data-product-single-media-group-wrapper>
<div class="product-single__media-group{% unless stacked %} product-single__media-group--single-xr{% endunless %}" data-product-single-media-group>
{%- assign enable_image_zoom = section.settings.enable_image_zoom -%}
{% assign height = 850 %}
{% assign width = 575 %}
{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
{% comment %}
Display product images
{% endcomment %}
{%- for media in product.media -%}
{%- assign featured = false -%}
{%- if media == featured_media -%}
{%- assign featured = true -%}
{%- endif -%}

{%- capture thumbnail_alt -%}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
{{ 'products.product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- elsif media.media_type == 'model' -%}
{{ 'products.product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- else -%}
{{ 'products.product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- endif -%}
{%- endcapture -%}

<div class="product-single__media-flex-wrapper" data-slick-media-label="{{ thumbnail_alt }}" data-product-single-media-flex-wrapper>
<div class="product-single__media-flex">
{%- include 'media' with media, enable_image_zoom: enable_image_zoom, stacked: stacked, featured: featured, width: width, height: height -%}

{% comment %}
Display a "View in your space" button (multi) for the first visible media and each individual model.
Stacked layout only.
{% endcomment %}
{% if stacked %}
{%- assign xr_id = false -%}
{%- if first_media and first_3d_model -%}
{%- assign xr_id = first_3d_model.id -%}
{%- elsif media.media_type == 'model' -%}
{%- assign xr_id = media.id -%}
{%- endif -%}

{%- if xr_id -%}
{%- include 'xr-button' with model_id: xr_id, multi: true -%}
{%- endif -%}
{%- assign first_media = false -%}
{% endif %}
</div>
</div>
{%- endfor -%}
</div>

{% comment %}
Display a "View in your space" button (single).
Stacked/Thumbnails layout (mobile)
Thumbnail layout only (desktop)
{% endcomment %}
{%- if first_3d_model -%}
{%- include 'xr-button' with model_id: first_3d_model.id, multi: false -%}
{%- endif -%}

{% unless stacked %}
<ul class="product-single__thumbnails small--hide grid-uniform" data-product-thumbnails>
{% for media in product.media %}
{% if product.media.size > 1 %}
<li class="grid__item medium--one-third large--one-quarter product-single__media-wrapper">
{%- capture thumbnail_alt -%}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
{{ 'products.product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- elsif media.media_type == 'model' -%}
{{ 'products.product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- else -%}
{{ 'products.product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- endif -%}
{%- endcapture -%}

<a href="{{ media | img_url: 'grande' }}" class="product-single__thumbnail{% if media == featured_media %} active-thumb{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}" data-product-thumbnail>
<img class="product-single__thumb" src="{{ media | img_url: '150x' }}" alt="{{ thumbnail_alt }}">
{%- if media.media_type == 'video' or media.media_type == 'external_video' or media.media_type == 'model' -%}
<div class="product-single__thumbnail-badge">
{% include 'svg-definitions' with media.media_type %}
</div>
{%- endif -%}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
{% endunless %}
<div class="slick__controls slick-slider">
<button class="slick__arrow slick__arrow--previous" aria-label="{{ 'home_page.slideshow.previous_slide' | t }}" data-slick-previous>
<span class="icon icon-slide-prev" aria-hidden="true"></span>
</button>
<button class="slick__arrow slick__arrow--next" aria-label="{{ 'home_page.slideshow.next_slide' | t }}" data-slick-next>
<span class="icon icon-slide-next" aria-hidden="true"></span>
</button>
<div class="slick__dots-wrapper" data-slick-dots>
</div>
</div>
</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 %}

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

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{% comment %}
Optionally show the 'compare at' or original price of the product.
{% endcomment %}
{% include 'product-price', variant: current_variant %}
{% comment %}
<div class="price-per-unit-insert" data-product="{{ product.first_available_variant.id }}"></div>
{% endcomment %}
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product-single__policies rte">
{%- if shop.taxes_included -%}
{{ 'products.general.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.general.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}

<hr class="hr--small">

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

{% capture "form_classes" %}
product-single__form{% if product.has_only_default_variant %} product-single__form--no-variants{% endif %}
{%- endcapture %}

<!--Smart file default--->
{% render 'smarth', hideAssets:'0', product: product, smarthOuterClass: 'smart-mt-4 smart-mb-4' %}

{% capture "form_id" %}AddToCartForm--{{ section.id }}{%- endcapture %}

{% form 'product', product, class:form_classes, id:form_id, data-product-form: '' %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="radio-wrapper js product-form__item">
<label class="single-option-radio__label"
for="ProductSelect-option-{{ forloop.index0 }}">
{{ option.name | escape }}
</label>
{% if section.settings.product_selector == 'radio' %}
<fieldset class="single-option-radio"
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{{ option.position }}"
class="single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"
id="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
<label for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}"{% unless variant_label_state %} class="disabled"{% endunless %}>{{ value | escape }}</label>
{% endfor %}
</fieldset>
{% else %}
<select class="single-option-selector__radio single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value | escape }}</option>
{% endfor %}
</select>
{% endif %}
</div>
{% endfor %}
{% endunless %}

<select name="id" id="ProductSelect--{{ section.id }}" 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>

{% if section.settings.quantity_enabled %}
<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>
{% endif %}

{% comment %}

<div class="product-single__add-to-kochkistl{% if section.settings.add_to_cart_button_size == 'large' %} product-single__add-to-cart--full-width{% endif %}">
<button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn btn--add-to-cart{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary-accent{% endif %}"{% unless current_variant.available %} disabled="disabled"{% endunless %}>
<span class="btn__text">
{% if current_variant.available %}
{{ 'products.product.add_to_cart' | t }}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>

{% endcomment %}

<div class="product-single__add-to-kochkistl {% if section.settings.add_to_cart_button_size == 'large' %} product-single__add-to-cart--full-width{% endif %}">
<a href="/products/dein-kochkistl" style="color: #ffffff; background-color: #daa520" class="{{ btn_class }} hero__cta btn--add-to-cart">
<h3><span class="icon icon-cart"></span>
Kochkistl wählen</h3>
</a>
</div>


{% endform %}

</div>
</div>
</div>
<div class="product-single__description rte" itemprop="description">
{% render 'product-description-tabs', product: product %}
</div>

{% include "custom-attributes" %}

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

{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
<script type="application/json" id="ModelJson-{{ section.id }}">
{{ product.media | where: 'media_type', 'model' | json }}
</script>
{% endunless %}

{% schema %}
{
"name": {
"cs": "Stránky produktu",
"da": "Produktsider",
"de": "Produktseiten",
"en": "Product pages",
"es": "Páginas de productos",
"fi": "Tuotesivut",
"fr": "Pages de produits",
"it": "Pagine di prodotto",
"ja": "商品ページ",
"ko": "제품 페이지",
"nb": "Produktsider",
"nl": "Productpagina's",
"pl": "Strony produktu",
"pt-BR": "Páginas de produtos",
"pt-PT": "Páginas de produtos",
"sv": "Produktsidor",
"th": "หน้าสินค้า",
"tr": "Ürün sayfaları",
"vi": "Trang sản phẩm",
"zh-CN": "产品页面",
"zh-TW": "產品頁面"
},
"settings": [
{
"type": "checkbox",
"id": "product_vendor_enable",
"label": {
"cs": "Zobrazit dodavatele produktu",
"da": "Vis produktleverandør",
"de": "Produktanbieter anzeigen",
"en": "Show product vendor",
"es": "Mostrar proveedor del producto",
"fi": "Näytä tuotteen myyjä",
"fr": "Afficher le distributeur du produit",
"it": "Indica fornitore prodotto",
"ja": "商品の販売元を表示する",
"ko": "제품 공급 업체 표시",
"nb": "Vis produktleverandør",
"nl": "Productleverancier weergeven",
"pl": "Pokaż dostawcę produktu",
"pt-BR": "Exiba o fornecedor do produto",
"pt-PT": "Mostrar o fornecedor do produto",
"sv": "Visa produktsäljare",
"th": "แสดงผู้ขายสินค้า",
"tr": "Ürün satıcısını göster",
"vi": "Hiển thị nhà cung cấp sản phẩm",
"zh-CN": "显示产品厂商",
"zh-TW": "顯示產品廠商"
}
},
{
"type": "checkbox",
"id": "social_sharing_products",
"label": {
"cs": "Povolit sdílení produktů",
"da": "Aktivér produktdeling",
"de": "Teilen von Produkten aktivieren",
"en": "Enable product sharing",
"es": "Habilitar compartir productos",
"fi": "Ota tuotejako käyttöön",
"fr": "Activer le partage de produits",
"it": "Permetti condivisione del prodotto",
"ja": "商品の共有を有効にする",
"ko": "제품 공유 활성화",
"nb": "Aktiver produktdeling",
"nl": "Schakel het delen van producten in",
"pl": "Włącz udostępnianie produktów",
"pt-BR": "Habilite o compartilhamento de produtos",
"pt-PT": "Ativar a partilha de produtos",
"sv": "Aktivera produktdelning",
"th": "เปิดใช้การแชร์สินค้า",
"tr": "Ürün paylaşımını etkinleştir",
"vi": "Bật chia sẻ sản phẩm",
"zh-CN": "启用产品分享",
"zh-TW": "啟用產品分享"
},
"default": true
},
{
"type": "header",
"content": {
"cs": "Formulář produktových variant",
"da": "Formular for produktmuligheder",
"de": "Produktoptionsformular",
"en": "Product options form",
"es": "Formulario de opciones de producto",
"fi": "Tuotevaihtoehtolomake",
"fr": "Formulaire d'options de produit",
"it": "Modulo delle opzioni di prodotto",
"ja": "商品オプションのフォーム",
"ko": "제품 옵션 양식",
"nb": "Skjema for produktalternativer",
"nl": "Formulier productopties",
"pl": "Formularz opcji produktu",
"pt-BR": "Formulário de opções de produtos",
"pt-PT": "Formulário de opções de produtos",
"sv": "Produktalternativsformulär",
"th": "แบบฟอร์มตัวเลือกสินค้า",
"tr": "Ürün seçenekleri formu",
"vi": "Biểu mẫu tùy chọn sản phẩm",
"zh-CN": "产品选项表单",
"zh-TW": "產品選項表單"
}
},
{
"type": "checkbox",
"id": "quantity_enabled",
"label": {
"cs": "Zobrazit výběr množství",
"da": "Vis antalsvælger",
"de": "Mengenauswahl anzeigen",
"en": "Show quantity picker",
"es": "Mostrar selector de cantidad",
"fi": "Näytä määrän valintatyökalu",
"fr": "Afficher le sélecteur de quantité",
"it": "Mostra selettore di quantità",
"ja": "数量ピッカーを表示する",
"ko": "수량 선택기 표시",
"nb": "Vis mengdevelger",
"nl": "Hoeveelheidskiezer weergeven",
"pl": "Pokaż selektor ilości",
"pt-BR": "Exibir seletor de quantidade",
"pt-PT": "Mostrar seletor de quantidade",
"sv": "Visa kvantitetsväljaren",
"th": "แสดงเครื่องมือเลือกจำนวน",
"tr": "Adet seçiciyi göster",
"vi": "Hiển thị hộp chọn số lượng",
"zh-CN": "显示数量选择器",
"zh-TW": "顯示數量選擇器"
}
},
{
"type": "select",
"id": "product_selector",
"label": {
"cs": "Typ výběru",
"da": "Vælgertype",
"de": "Auswahlart",
"en": "Picker type",
"es": "Tipo de selector",
"fi": "Valitsintyyppi",
"fr": "Type de sélecteur",
"it": "Tipo di selettore",
"ja": "ピッカーの種類",
"ko": "선택기 유형",
"nb": "Velgertype",
"nl": "Soort kiezer",
"pl": "Typ selektora",
"pt-BR": "Tipo de seletor",
"pt-PT": "Tipo de seletor",
"sv": "Väljartyp",
"th": "ประเภทของเครื่องมือเลือก",
"tr": "Seçici türü",
"vi": "Kiểu hộp chọn",
"zh-CN": "选择器类型",
"zh-TW": "選擇器類型"
},
"options": [
{
"value": "radio",
"label": {
"cs": "Tlačítko",
"da": "Knap",
"de": "Schaltfläche",
"en": "Button",
"es": "Botón",
"fi": "Painike",
"fr": "Bouton",
"it": "Pulsante",
"ja": "ボタン",
"ko": "버튼",
"nb": "Knapp",
"nl": "Knop",
"pl": "Przycisk",
"pt-BR": "Botão",
"pt-PT": "Botão",
"sv": "Knapp",
"th": "ปุ่ม",
"tr": "Düğme",
"vi": "Nút",
"zh-CN": "按钮",
"zh-TW": "按鈕"
}
},
{
"value": "select",
"label": {
"cs": "Rozevírací nabídka",
"da": "Rullemenu",
"de": "Dropdown",
"en": "Dropdown",
"es": "Desplegable",
"fi": "Pudotusvalikko",
"fr": "Menu déroulant",
"it": "Menu a tendina",
"ja": "ドロップダウン",
"ko": "드롭다운",
"nb": "Rullegardin",
"nl": "Vervolgkeuzemenu",
"pl": "Lista rozwijana",
"pt-BR": "Menu suspenso",
"pt-PT": "Menu pendente",
"sv": "Rullgardinsmeny",
"th": "ดรอปดาวน์",
"tr": "Açılır liste",
"vi": "Menu thả xuống",
"zh-CN": "下拉菜单",
"zh-TW": "下拉式選單"
}
}
]
},
{
"type": "header",
"content": {
"cs": "Tlačítko Přidat do košíku",
"da": "Knappen Læg i indkøbskurven",
"de": "Schaltfläche in den Warenkorb",
"en": "Add to cart button",
"es": "Añadir al carrito",
"fi": "Lisää ostoskoriin -painike",
"fr": "Bouton d'ajout au panier",
"it": "Pulsante \"Aggiungi al carrello\"",
"ja": "カートボタンに追加する",
"ko": "카트 버튼에 추가",
"nb": "Legg i handlekurv-knapp",
"nl": "Knop aan winkelwagen toevoegen",
"pl": "Przycisk Dodaj do koszyka",
"pt-BR": "Botão Adicionar ao carrinho",
"pt-PT": "Botão Adicionar ao carrinho",
"sv": "Lägg i varukorgen-knappen",
"th": "ปุ่มเพิ่มลงในตะกร้าสินค้า",
"tr": "Sepete ekle düğmesi",
"vi": "Thêm vào nút giỏ hàng",
"zh-CN": "“添加到购物车”按钮",
"zh-TW": "加入購物車按鈕"
}
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": {
"cs": "Zobrazit dynamické tlačítko pokladny",
"da": "Vis dynamisk betalingsknap",
"de": "Dynamischen Checkout-Button anzeigen",
"en": "Show dynamic checkout button",
"es": "Mostrar botón de pago dinámico",
"fi": "Näytä dynaaminen kassapainike",
"fr": "Afficher le bouton de paiement dynamique",
"it": "Mostra pulsante di check-out dinamico",
"ja": "動的チェックアウトボタンを表示する",
"ko": "동적 결제 버튼 표시",
"nb": "Vis dynamisk knapp for å gå til kassen",
"nl": "Dynamische betaalknop weergeven",
"pl": "Pokaż dynamiczny przycisk realizacji zakupu",
"pt-BR": "Exibir botão de checkout dinâmico",
"pt-PT": "Mostrar o botão dinâmico de finalização da compra",
"sv": "Visa dynamiska utcheckningsknappar",
"th": "แสดงปุ่มชำระเงินแบบไดนามิก",
"tr": "Dinamik ödeme düğmesini göster",
"vi": "Hiển thị nút thanh toán nhanh",
"zh-CN": "显示动态结账按钮",
"zh-TW": "顯示動態結帳按鈕"
},
"info": {
"cs": "Každý zákazník uvidí platební metodu, kterou ze všech metod dostupných v obchodě (například PayPal nebo Apple Pay) nejvíce preferuje. [Další informace](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"da": "Den enkelte kunde vil se sin foretrukne betalingsmetode blandt dem, der er tilgængelige i din butik, f.eks. PayPal eller Apple Pay. [Få mere at vide](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"de": "Jeder Kunde sieht seine bevorzugte Zahlungsmethode aus den in deinem Shop verfügbaren Zahlungsmethoden wie PayPal oder Apple Pay. [Mehr Informationen](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"en": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"es": "Cada cliente verá su forma de pago preferida entre las disponibles en tu tienda, como PayPal o Apple Pay. [Más información](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"fi": "Kukin asiakas näkee ensisijaisen valintansa kauppasi tarjoamista maksutavoista, esim. PayPal tai Apple Pay. [Lisätietoja](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"fr": "Chaque client verra son moyen de paiement préféré parmi ceux qui sont proposés sur votre boutique, tels que PayPal ou Apple Pay. [En savoir plus](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"it": "Ogni cliente vedrà il suo metodo di pagamento preferito tra quelli disponibili nel tuo negozio, come PayPal o Apple Pay. [Maggiori informazioni](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"ja": "PayPalやApple Payなど、ストアで利用可能な希望の決済方法がお客様に表示されます。[詳しくはこちら](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"ko": "각 고객은 PayPal 또는 Apple Pay와 같이 스토어에서 사용 가능한 지불 방법을 확인할 수 있습니다. [자세히 알아보기](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"nb": "Hver enkelt kunde vil se sin foretrukne betalingsmåte blant de som er tilgjengelig i butikken din, som PayPal eller Apple Pay. [Finn ut mer](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"nl": "Elke klant ziet zijn of haar beschikbare voorkeursmethode om af te rekenen, zoals PayPal of Apple Pay. [Meer informatie](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"pl": "Każdy klient zobaczy swoją preferowaną metodę płatności wśród metod dostępnych w Twoim sklepie, np. PayPal lub Apple Pay. [Dowiedz się więcej](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"pt-BR": "Cada cliente verá a forma de pagamento preferencial dele dentre as disponíveis na loja, como PayPal ou Apple Pay. [Saiba mais](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"pt-PT": "Cada cliente irá ver o seu método de pagamento preferido entre os disponíveis na loja, como o PayPal ou Apple Pay. [Saiba mais](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"sv": "Varje kund kommer att se den föredragna betalningsmetoden från de som finns tillgängliga i din butik, till exempel PayPal eller Apple Pay. [Läs mer](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"th": "ลูกค้าแต่ละรายจะเห็นวิธีการชำระเงินที่ต้องการจากวิธีที่ใช้ได้ในร้านค้าของคุณ เช่น PayPal หรือ Apple Pay [ดูข้อมูลเพิ่มเติม](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"tr": "Her müşteri, mağazanız sunulanlar arasından tercih ettikleri ödeme yöntemini görür (ör. PayPal veya Apple Pay). [Daha fazla bilgi edinin](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"vi": "Mỗi khách hàng sẽ thấy phương thức thanh toán ưu tiên trong những phương thức thanh toán được hỗ trợ tại cửa hàng như PayPal hoặc Apple Pay. [Tìm hiểu thêm](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"zh-CN": "每位客户都可在您商店提供的付款方式中看到他们的首选付款方式，例如 PayPal 或 Apple Pay。[了解详细信息](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"zh-TW": "每位顧客都可以在您商店內開放使用的付款方式中看見他們偏好使用的方式，如 PayPal、Apple Pay 等。[深入瞭解](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
},
"default": true
},
{
"type": "select",
"id": "add_to_cart_button_size",
"label": {
"cs": "Velikost tlačítka",
"da": "Knapstørrelse",
"de": "Schaltflächengröße",
"en": "Button size",
"es": "Tamaño del botón",
"fi": "Painikkeen koko",
"fr": "Taille du bouton",
"it": "Dimensione pulsante",
"ja": "ボタンのサイズ",
"ko": "버튼 사이즈",
"nb": "Knappestørrelse",
"nl": "Afmeting knop",
"pl": "Rozmiar przycisku",
"pt-BR": "Tamanho do botão",
"pt-PT": "Tamanho do botão",
"sv": "Knappstorlek",
"th": "ขนาดปุ่ม",
"tr": "Düğme boyutu",
"vi": "Cỡ nút",
"zh-CN": "按钮大小",
"zh-TW": "按鈕尺寸"
},
"default": "small",
"options": [
{
"value": "small",
"label": {
"cs": "Malá",
"da": "Lille",
"de": "Klein",
"en": "Small",
"es": "Pequeña",
"fi": "Pieni",
"fr": "Petit",
"it": "Piccolo",
"ja": "小",
"ko": "스몰",
"nb": "Liten",
"nl": "Klein",
"pl": "Mały",
"pt-BR": "Pequeno",
"pt-PT": "Pequeno",
"sv": "Liten",
"th": "เล็ก",
"tr": "Küçük",
"vi": "Nhỏ",
"zh-CN": "小",
"zh-TW": "小型"
}
},
{
"value": "large",
"label": {
"cs": "Velká",
"da": "Stor",
"de": "Groß",
"en": "Large",
"es": "grande",
"fi": "Suuri",
"fr": "Grand",
"it": "Grande",
"ja": "大",
"ko": "라지",
"nb": "Stor",
"nl": "Groot",
"pl": "Duży",
"pt-BR": "Grande",
"pt-PT": "Grande",
"sv": "Stor",
"th": "ใหญ่",
"tr": "Büyük",
"vi": "Lớn",
"zh-CN": "大",
"zh-TW": "大型"
}
}
]
},
{
"type": "header",
"content": {
"cs": "Multimédia",
"da": "Medie",
"de": "Medien",
"en": "Media",
"es": "Elementos multimedia",
"fi": "Media",
"fr": "Médias",
"it": "Media",
"ja": "メディア",
"ko": "미디어",
"nb": "Medier",
"nl": "Media",
"pl": "Multimedia",
"pt-BR": "Mídia",
"pt-PT": "Multimédia",
"sv": "Media",
"th": "สื่อ",
"tr": "Medya",
"vi": "Nội dung đa phương tiện",
"zh-CN": "媒体",
"zh-TW": "媒體"
},
"info": {
"cs": "Další informace o [typech multimédií](https://help.shopify.com/manual/products/product-media)",
"da": "Få mere at vide om [media types](https://help.shopify.com/manual/products/product-media)",
"de": "Mehr Informationen über [Medientypen ](https://help.shopify.com/manual/products/product-media)",
"en": "Learn more about [media types](https://help.shopify.com/manual/products/product-media)",
"es": "Más información sobre [tipos de archivos multimedia](https://help.shopify.com/manual/products/product-media)",
"fi": "Lue lisää [mediatyypeistä](https://help.shopify.com/manual/products/product-media)",
"fr": "En savoir plus sur les [types de supports multimédia](https://help.shopify.com/manual/products/product-media)",
"it": "Scopri di più sulle [tipologie di file multimediali](https://help.shopify.com/manual/products/product-media)",
"ja": "[メディアのタイプ](https://help.shopify.com/manual/products/product-media) について詳しくはこちら",
"ko": "[미디어 유형](https://help.shopify.com/manual/products/product-media)에 대해 자세히 알아보기",
"nb": "Lær mer om [medietyper](https://help.shopify.com/manual/products/product-media)",
"nl": "Meer informatie over [mediatypen](https://help.shopify.com/manual/products/product-media)",
"pl": "Dowiedz się więcej o [typach multimediów](https://help.shopify.com/manual/products/product-media)",
"pt-BR": "Saiba mais sobre [tipos de mídia](https://help.shopify.com/manual/products/product-media)",
"pt-PT": "Saiba mais sobre [media types](https://help.shopify.com/manual/products/product-media)",
"sv": "Läs mer om [mediatyper](https://help.shopify.com/manual/products/product-media)",
"th": "ดูข้อมูลเพิ่มเติมเกี่ยวกับ [ประเภทของสื่อ](https://help.shopify.com/manual/products/product-media)",
"tr": "[Medya türleri](https://help.shopify.com/manual/products/product-media) hakkında daha fazla bilgi edinin",
"vi": "Tìm hiểu thêm về [loại phương tiện](https://help.shopify.com/manual/products/product-media)",
"zh-CN": "详细了解[媒体类型](https://help.shopify.com/manual/products/product-media)",
"zh-TW": "深入瞭解 [媒體類型](https://help.shopify.com/manual/products/product-media)"
}
},
{
"type": "select",
"id": "media_layout",
"label": {
"cs": "Rozvržení galerie",
"da": "Gallerilayout",
"de": "Galerie-Layout",
"en": "Gallery layout",
"es": "Diseño de la galería",
"fi": "Gallerian pohja",
"fr": "Mise en page de la galerie",
"it": "Layout galleria",
"ja": "ギャラリーのレイアウト",
"ko": "갤러리 레이아웃",
"nb": "Gallerioppsett",
"nl": "Galerij-opmaak",
"pl": "Układ galerii",
"pt-BR": "Layout da galeria",
"pt-PT": "Esquema da galeria",
"sv": "Galleri-layout",
"th": "เลย์เอาต์แกลเลอรี",
"tr": "Galeri düzeni",
"vi": "Bố cục bộ sưu tập ảnh",
"zh-CN": "图库布局",
"zh-TW": "圖庫版面配置"
},
"default": "stacked",
"options": [
{
"value": "stacked",
"label": {
"cs": "Nad sebou",
"da": "Stablet",
"de": "Gestapelt",
"en": "Stacked",
"es": "Stacked",
"fi": "Pinottu",
"fr": "Empiler",
"it": "Elenco",
"ja": "スタックされました",
"ko": "누적",
"nb": "Stablet",
"nl": "Gestapeld",
"pl": "Ułożone w stos",
"pt-BR": "Empilhado",
"pt-PT": "Empilhado",
"sv": "Staplade",
"th": "ซ้อน",
"tr": "Üst üste",
"vi": "Đã xếp chồng",
"zh-CN": "已堆叠",
"zh-TW": "已堆疊"
}
},
{
"value": "thumbnails",
"label": {
"cs": "Náhledy",
"da": "Miniaturer",
"de": "Vorschaubilder",
"en": "Thumbnails",
"es": "Miniaturas",
"fi": "Pikkukuvat",
"fr": "Vignettes",
"it": "Miniature",
"ja": "サムネイル",
"ko": "썸네일",
"nb": "Miniatyrbilder",
"nl": "Miniatuurafbeeldingen",
"pl": "Miniatury",
"pt-BR": "Miniaturas",
"pt-PT": "Miniaturas",
"sv": "Förhandsbilder",
"th": "ขนาดย่อ",
"tr": "Küçük resimler",
"vi": "Ảnh thu nhỏ",
"zh-CN": "缩略图",
"zh-TW": "縮圖"
}
}
]
},
{
"type": "checkbox",
"id": "enable_image_zoom",
"label": {
"cs": "Povolit zvětšení obrázku",
"da": "Aktivér billedzoom",
"de": "Foto-Zoom zulassen",
"en": "Enable image zoom",
"es": "Habilitar zoom de imagen",
"fi": "Ota kuvan zoomaus käyttöön",
"fr": "Activer le zoom d'image",
"it": "Abilita lo zoom dell'immagine",
"ja": "画像ズームを有効にする",
"ko": "이미지 확대 사용",
"nb": "Aktiver bildezoom",
"nl": "Inzoomen op afbeelding inschakelen",
"pl": "Włącz powiększenie obrazu",
"pt-BR": "Habilitar o zoom da imagem",
"pt-PT": "Ativar o zoom da imagem",
"sv": "Aktivera bildzoom",
"th": "เปิดใช้การซูมภาพ",
"tr": "Görsel yakınlaştırmayı etkinleştir",
"vi": "Bật thu phóng hình ảnh",
"zh-CN": "启用图片缩放",
"zh-TW": "啟用圖片縮放"
}
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": {
"cs": "Povolit smyčky videa",
"da": "Aktivér looping af videoer",
"de": "Videoschleife aktivieren",
"en": "Enable video looping",
"es": "Habilitar la reproducción de video en bucle",
"fi": "Ota käyttöön videosilmukka",
"fr": "Activer le bouclage de la vidéo",
"it": "Abilita la riproduzione in loop dei video",
"ja": "ビデオのループを有効にする",
"ko": "동영상 루프 활성화",
"nb": "Aktiver løkkeavspilling av video",
"nl": "Video-looping inschakelen",
"pl": "Włącz zapętlanie wideo",
"pt-BR": "Habilitar loop de vídeo",
"pt-PT": "Ativar ciclo de vídeo",
"sv": "Aktivera video-loopning",
"th": "เปิดใช้การวนซ้ำวิดีโอ",
"tr": "Video döngüsünü etkinleştir",
"vi": "Bật vòng lặp video",
"zh-CN": "启用视频循环",
"zh-TW": "啟用影片循環功能"
},
"default": false
}
]
}
{% endschema %}

I sincerely hope, this sheds some light on the issue at hand.

Regards,

Urs

[KochKistl]

Hi Gabe!
We encountered another problem, please take a look:

step 1
https://www.kochkistl.at/products/dein-kochkistl

step 2

https://www.kochkistl.at/cart

Now:

when Express Checkout is enabled and mandatory delivery date is NOT checked - PayPal Express checkout, is that possible, however, cart shows up empty.
As of now an e-mail goes out to the people of the app we use - Delivery Date Schedule, which actually is very good - for a viable solution.

step 3
If Express Checkout is NOT picked, delivery date is chosen, and checkout is clicked and checkout page is shown, same problem.
How do we solve this?
Please help,
one third of our customers use PayPal for checkout.

Suggestion: Express Checkout not visible on cart page, we tried that with disable in brooklyn theme, that does not work, but Express Checkout visible and working on checkout page.

Thanks for your efforts in advance.
Best regards,
Urs

[Gabe]

Hey Urs! @KochKistl 

Thanks for those details. First of all, to remove the express checkout buttons, see our UNSUPPORTED tutorials here, here and here.

I tested that and found the process a bit confusing from the user's perspective. See my user experience in this video here.

I would advise the following points to be built into this flow:

1. Make the process clearer on how to add selected products to the cart
2. Have a "go to cart" button on each product (see screenshot below) which either brings you down to the "Gesamtpreis" box Anchor link or straight to the cart page.
3. Otherwise, the cart page itemisation looks a bit confusing too - see my experience here.

This is a very long scroll down which isn't a great UX and with an anchor link above that brings you straight down here, it could be better:

But your store is moving in the right direction and will be a an excellent buying experience with a few more small tweaks that your programmers can do for you. Keep up the good work!

[KochKistl]

Gabe, thank you again for your swift reply.
Like always.

;-D

We are a little lost in translation here, I take it.
This is our de facto go to cart button, however we are working with the bundle builder multiple sku app - absolutely great btw - 
because customers are forced to buy in bundles.

Add to cooking box = In's KochKistl legen.
I will add translation to English of our shop asap, because a lot of Anglos a living here in our vicinity anyways. Will help support-wise.

Now:
we activated express chechout like this

but theme does not show Apple Pay.

Weird.

Anyway, we are in the home stretch.
A friend of mine recommended Shopify for our undertaking and for that we are more than grateful.
Great product!

Best regards,
Urs

[Gabe · Accepted solution]

Hey Urs! @KochKistl 

Ah gotcha! So Apply Pay will only show on an iPad or iPhone. Can you test that on one or the other?

[KochKistl · Accepted solution]

Hi y'all!

The developers of our Delivery Date Schedule came up with a solution on their side:

https://www.kochkistl.at/cart

Customer cannot leave without picking a delivery date

Express Payment options are not displayed here.

One has to click "Zur Kasse" = go to checkout to see these options.
Why this again?
Because when Express Payment options are displayed here, and customer does NOT pick a delivery date and, let us say, chooses PayPal Express Checkout it can be done, however cart comes up empty and payment goes through.
Weird.

Anyway, the next step displays Express payments and with delivery date it works.

I hope that helps.

Best regards,

Urs

[KochKistl]

Gabe, 

for you:

https://www.linkedin.com/posts/blackboxmd_kochkistl-activity-6774598065669103616-nWp0

Walt, Shopify partner & IT-mind behind kochkistl.at

[Gabe]

@KochKistl 

Very much appreciated Urs! : )

[KochKistl]

Hi, Gabe!

Since yesterday PayPal Express Checkout does not show any more. We haven't changed anything on our side, except implementing eps & Klarna payment.

Please advise.

Best regards,

Walt

[Gabe]

Hi Walt! @KochKistl 

Where exactly is the PayPal Button missing? Do you have some screenshots from the Shopfront? I tried a test checkout and I got this. EPS & Klarna would not really affect this as they are completely different types of payment methods in the checkout i.e. NOT express.

Were there any other changes made with regard to the help doc above or the theme code? Have you tried deactivating PayPal in the payment settings and reactivating it?

[KochKistl]

Hi, y'all!
Thanks for your swift reply.

Here we go -

step one:
First step

step two:
Step two: no Express Checkout show

Weird...

Best regards,
Walt

[Gabe]

@KochKistl 

Walt, we will need to take a look at your theme. Can you send us a ticket here please, or use our chat for a quicker support?

[KochKistl]

Gabe,

deactivated PayPal & reactivated it again. To no avail.

How do I start a ticket now, exactly?

[Gabe]

Ok click into my previous ticketing link and enter your full details. In the next screen or two you should be able to choose email or chat.

[KochKistl]

Done!

[KochKistl]

Hi Gabe!
We found out that the Express Checkout issue is related to an app we use: bundle builder.

Bundle builder support wrote / solution:

"Thank you for reaching out to us.

Nick is correct, express checkout buttons are not compatible with the app, as they skip part of the ordering process required. They should be removed from the cart page:

https://docs.bundlebuilder.app/further-help/troubleshooting/using-dynamic-checkout-buttons"

Unfortunately another problem arose:

for a press release we are giving out gift cards for a certain period, and now this period has been extended another month. The gift card has been created and cannot be edited in terms of prolongation. The code is however already in print.
How do I change the timeline for a gift card not in use for the time being?
Thank you like always.
Urs

[KochKistl · Accepted solution]

Hi Gabe!
Solution / addenum:

in timber.scss.liquid on line 3477 - right at the bottom of the file - this has to be set to

.additional_checkout_buttons .dynamic-checkout__content {
  display: block;
}

instead of:
.additional_checkout_buttons .dynamic-checkout__content {
  display:none !important;
}

and in cart.liquid commented:
{% comment %}
               {% if additional_checkout_buttons and settings.cart_type != 'drawer' %}
                <div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
              {% endif %}
{% endcomment %}

Now Express Payment buttons work on checkout page and don't show on cart page, which is crucial if you have to rely on a delivery date.

Best regards,
Walter

[Gabe]

@KochKistl Wow, Walter, that is a great solution and will help others here too! Good too that the problem with the Bundle Builder App was solved.

About the Gift Card, you want to extend its discount code validity because of a new press release, is that correct? And the gift card is already in print? 

Let me know if I understood this incorrectly but would these steps help you? The steps I show did not change the gift card code in any way (which is good if it is already printed). See more on that topic here.

Best,

[KochKistl · Accepted solution]

Hi Gabe!

Tried everything, gift card has not been used yet and was deactivated. Actually, code needs to be deleted or renamed and set up new.

Can you do that on your end...?
Most importantly, we started to set up a team of API specialists and this is what we are about to do:
- backend - of course - Shopify with
- Storefront API
- GatsbyJS and TailwindCSS for a frontend hosted on Netlify!

I attended a UDEMY course doing this:
https://gatsbymadhatterstore.netlify.app/
Github:
https://github.com/bodhicougar/gatsby-shopify-course

UDEMY course: ( Great, we recommend it! )
https://www.udemy.com/course/gatsby-ecommerce-shopify/
We endorse it, although we are NOT affiliated with Udemy in any way.

Please let me know as soon as possible how to solve the gift card issue.
Thanks in advance,
best regards
Walt

[Gabe]

Hey Walt! @KochKistl 

Ok I'm guessing our technicians will need to take a look at that in the backend. Can you send us a ticket here and please include all possible details as well as screenshots?

[KochKistl]

Done!
Thanks.