Få kunder att välja ett alternativ
När en kund besöker en produktsida i din webbshop väljs den första tillgängliga varianten som standard. Du kan använda denna anpassning för att inaktivera automatiskt val av den första tillgängliga varianten. På så sätt kommer kunden att uppmanas att välja en variant manuellt innan någon visas. )
Obs! Eftersom denna anpassning förhindrar att en variant väljs som standard kanske ditt tema inte visar ett produktpris förrän kunden har valt en variant. Detta är förväntat beteende, eftersom produkter med varianter inte har ett angivet pris. Vilket pris som visas bestäms av den variant som har valts.
Avsnitt och icke-sektionerade teman
Obs! Stegen i den här handledningen varierar beroende på om du använder ett tema med avsnitt eller ett tema utan avsnitt. Med ett tema med avsnitt kan du dra och släppa för att arrangera layouten på din startsida, men inte med ett tema utan avsnitt.
Gå till temasidan Redigera kod för att ta reda på om ditt tema stöder avsnitt. Om det finns filer i Avsnittskatalogen använder du ett avgränsat tema. Icke-sektionerade teman släpptes före oktober 2016 och har inga filer i Avsnittskatalogen.
Om du använder ett avgränsat tema klickar du på knappen Avgränsade teman-knapp och följer anvisningarna. Om du använder ett äldre, icke-avsnittsbaserat tema klickar du på knappen Icke-avgränsade teman och följer anvisningarna.
Välj ditt tema
Stegen för denna anpassning varierar beroende på ditt tema. Klicka på knappen för ditt tema innan du följer anvisningarna nedan:
Steg för Boundless
Följ dessa steg för att tillämpa anpassningen till Boundless:
Redigera ditt temas JavaScript-fil
För att redigera ditt temas JavaScript-fil:
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Från Shopify-appen klickar du på Butik.
Tryck på Webbshop i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Från Shopify-appen klickar du på Butik.
Tryck på Webbshop i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på
theme.js
ellertheme.js.liquid
i registret Tillgångar.Hitta efter koden
initVariantSelectors
. Under den letar du efter följande kod:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);
Add the following code on a new line below:
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
It should look something like this:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
- Hitta följande kodrad:
$(selectors.addToCartText).html(theme.strings.soldOut);
There are *two instances* of this line of code, both found within the `productVariantCallback` function. Replace only the *second* instance with:
$(selectors.addToCartText).html('Make a Selection');
> Note:
> Some versions of Boundless do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.
- Klicka på Spara.
Redigera produktsidemallen
Redigera din produktsidemall
Klicka på
product-template.liquid
i registret Avsnitt.Hitta följande kod:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign current_variant = product.selected_variant %}
- Hitta följande kod och radera den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
Hitta koden
{% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% if current_variant == blank %}
<script>
var productOptions = []; {% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
It should look something like this:
{% if current_variant == blank %}
<script>
var productOptions = []; {% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
{% schema %}
- Klicka på Spara.
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
- Från din Shopify-admin går du till Webbshop > Teman.
- Från Shopify-appen klickar du på Butik.
- Tryck på Webbshop i avsnittet Försäljningskanaler.
- Tryck på Hantera teman.
- Från Shopify-appen klickar du på Butik.
- Tryck på Webbshop i avsnittet Försäljningskanaler.
- Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera språk.
I rutan Filter börjar du skriva in
unavailable
för att visa översättningen "Ej tillgänglig".Ersätt texten Ej tillgänglig med
Make a selection
.Klicka på Spara.
Steg för Debut
Följ dessa steg för att tillämpa anpassningen för Debut:
Redigera ditt temas JavaScript-fil
För att redigera ditt temas JavaScript-fil:
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Från Shopify-appen klickar du på Butik.
Tryck på Webbshop i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Från Shopify-appen klickar du på Butik.
Tryck på Webbshop i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på
theme.js
ellertheme.js.liquid
i registret Tillgångar.Lägg till följande kod längst ner i filen:
(function() {
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
})();
-
Hitta koden
_updatePrice: function(variant)
. Byt ut följande kod:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price &&
variant.unit_price === this.currentVariant.unit_price
) {
return;
}
with:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price &&
variant.unit_price === this.currentVariant.unit_price
) {
return;
} */
If you can't find the above code, then find the following code:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
}
Replace it with:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
-
Hitta koden
this.currentVariant = variant;
this._updatePaymentButton(variant);
The result should look something like this:
this.currentVariant = variant;
this._updatePaymentButton(variant);
-
Hitta koden
_updateImages: function(variant)
. Byt ut följande kod:
var currentVariantImage = this.currentVariant.featured_image || {};
with:
if (this.currentVariant != undefined) {
var currentVariantImage = this.currentVariant.featured_image || {};
}
- Hitta följande kod precis under:
if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
}
Replace it with:
/* if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
} */
-
Hitta koden
_updateSKU: function(variant)
. Byt ut följande kod:
if (variant.sku === this.currentVariant.sku) {
return;
}
with:
if (this.currentVariant != undefined ) {
if (variant.sku === this.currentVariant.sku) {
return;
}
}
-
Hitta koden
_initVariants: function() {
. Byt ut följande kod:
if (this.storeAvailability && this.variants.currentVariant.available) {
this.storeAvailability.updateContent(this.variants.currentVariant.id);
}
with:
/* if (this.storeAvailability && this.variants.currentVariant.available) {
this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */
> Note:
> This code only needs to be replaced in Debut version 17.5.0 and above.
- Hitta följande kod:
_updateSKU: function(variant) {
if (this.currentVariant != undefined ) {
if (variant.sku === this.currentVariant.sku) {
return;
}
}
this.container.dispatchEvent(
new CustomEvent('variantSKUChange', {
detail: {
variant: variant
},
bubbles: true,
cancelable: true
})
);
},
Add the following code, on a new line, below the above code:
_updatePaymentButton: function(variant) {
if (this.currentVariant != undefined) {
const paymentButton = document.querySelector('.payment-button');
if (paymentButton) {
paymentButton.removeAttribute('class', 'visually-hidden');
}
} else {
document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
}
},
It should look something like this:
_updateSKU: function(variant) {
if (this.currentVariant != undefined ) {
if (variant.sku === this.currentVariant.sku) {
return;
}
}
this.container.dispatchEvent(
new CustomEvent('variantSKUChange', {
detail: {
variant: variant
},
bubbles: true,
cancelable: true
})
);
},
_updatePaymentButton: function(variant) {
if (this.currentVariant != undefined) {
const paymentButton = document.querySelector('.payment-button');
if (paymentButton) {
paymentButton.removeAttribute('class', 'visually-hidden');
}
} else {
document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
}
},
- Klicka på Spara.
Redigera produktsidemallen
Redigera din produktsidemall
Klicka på
product-template.liquid
i registret Avsnitt.Hitta följande kod:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Replace it with:
{%- if product.variants.size > 1 -%}
{%- assign current_variant = product.selected_variant -%}
{%- else %}
{%- assign current_variant = product.first_available_variant -%}
{%- endif %}
- Hitta följande kod och radera den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
If you can't find the code above, then find this code and delete it:
{%- if variant == current_variant %} selected="selected" {%- endif -%}
- Hitta följande kod:
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
Replace it with:
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
If you can't find the code above, then find this code:
{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
Replace it with:
{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}
> Note:
> Some versions of Debut do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.
- Hitta följande kod:
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
Replace it with:
{% if current_variant == blank %}
{{ 'products.product.unavailable' | t }}
{% elsif current_variant.available %}
{{ 'products.product.add_to_cart' | t }}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
- Hitta följande kod:
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
Replace it with:
<div class="payment-button {% if current_variant == blank %}visually-hidden {% endif %}">
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
-
Hitta koden
{% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% if current_variant == blank %}
<script>
var productOptions = []; {% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
It should look something like this:
{% if current_variant == blank %}
<script>
var productOptions = []; {% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
{% schema %}
- Klicka på Spara.
Redigera din produkts prisfragment
För att redigera din produkts prisfragment:
Klicka på
product-price.liquid
i katalogen Fragment.Hitta följande kod:
{%- liquid
if variant.title
assign compare_at_price = variant.compare_at_price
assign price = variant.price
assign available = variant.available
else
assign compare_at_price = 1999
assign price = 1999
assign available = true
endif assign money_price = price | money
-%}
Replace it with:
{%- liquid
if variant.title
assign compare_at_price = variant.compare_at_price
assign price = variant.price
assign available = variant.available
elsif product.title
assign compare_at_price = product.compare_at_price
assign price = product.price
assign available = product.available
else
assign compare_at_price = 1999
assign price = 1999
assign available = true
endif assign money_price = price | money
-%}
> Note:
> Some versions of Debut do not include the code to be replaced in this step. If you can't find the code, then skip to the next step.
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
- Från din Shopify-admin går du till Webbshop > Teman.
- Från Shopify-appen klickar du på Butik.
- Tryck på Webbshop i avsnittet Försäljningskanaler.
- Tryck på Hantera teman.
- Från Shopify-appen klickar du på Butik.
- Tryck på Webbshop i avsnittet Försäljningskanaler.
- Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera språk.
I rutan Filter börjar du skriva in
unavailable
för att visa översättningen "Ej tillgänglig".Ersätt texten Ej tillgänglig med
Make a selection
.Klicka på Spara.
Steg för Minimal
Följ dessa steg för att tillämpa anpassningen till Minimal:
Redigera ditt temas JavaScript-fil
För att redigera ditt temas JavaScript-fil:
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Från Shopify-appen klickar du på Butik.
Tryck på Webbshop i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Från Shopify-appen klickar du på Butik.
Tryck på Webbshop i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på
theme.js
ellertheme.js.liquid
i registret Tillgångar.Hitta efter koden
initProductVariant: function() {
. Under den letar du efter följande kod:
// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
product.variants.length === 1 &&
product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
$('.selector-wrapper', this.$container).hide();
}
Add the following code on a new line below:
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
It should look something like this:
// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
product.variants.length === 1 &&
product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
$('.selector-wrapper', this.$container).hide();
}
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
- Klicka på Spara.
Redigera din produktsidemall
Redigera din produktsidemall
Klicka på
product-template.liquid
i registret Avsnitt.Hitta följande kod:
{% assign variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign variant = product.selected_variant %}
- Hitta följande kod och radera den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Hitta alla förekomster av denna kod:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Replace with:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
-
Hitta koden
{% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% if current_variant == blank %}
<script>
var productOptions = []; {% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
It should look something like this:
{% if current_variant == blank %}
<script>
var productOptions = []; {% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
{% schema %}
- Klicka på Spara.
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
- Från din Shopify-admin går du till Webbshop > Teman.
- Från Shopify-appen klickar du på Butik.
- Tryck på Webbshop i avsnittet Försäljningskanaler.
- Tryck på Hantera teman.
- Från Shopify-appen klickar du på Butik.
- Tryck på Webbshop i avsnittet Försäljningskanaler.
- Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera språk.
I rutan Filter börjar du skriva in
unavailable
för att visa översättningen "Ej tillgänglig".Ersätt texten Ej tillgänglig med
Make a selection
.Klicka på Spara.
Steg för Narrative
Följ dessa steg för att tillämpa anpassningen till Narrative:
Redigera ditt temas JavaScript-fil
För att redigera ditt temas JavaScript-fil:
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Från Shopify-appen klickar du på Butik.
Tryck på Webbshop i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Från Shopify-appen klickar du på Butik.
Tryck på Webbshop i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på
custom.js
i registret Tillgångar.Lägg till följande kod längst ner i filen:
(function() {
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
})();
- Klicka på Spara.
Redigera produktsidemallen
Redigera din produktsidemall
Klicka på
product-template.liquid
i registret Avsnitt.Hitta följande kod:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Replace it with:
{%- if product.variants.size > 1 -%}
{%- assign current_variant = product.selected_variant -%}
{%- else -%}
{%- assign current_variant = product.first_available_variant -%}
{%- endif -%}
-
Hitta koden
{% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% if current_variant == blank %}
<script>
var productOptions = []; {% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
It should look something like this:
{% if current_variant == blank %}
<script>
var productOptions = []; {% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
{% schema %}
- Klicka på Spara.
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
- Från din Shopify-admin går du till Webbshop > Teman.
- Från Shopify-appen klickar du på Butik.
- Tryck på Webbshop i avsnittet Försäljningskanaler.
- Tryck på Hantera teman.
- Från Shopify-appen klickar du på Butik.
- Tryck på Webbshop i avsnittet Försäljningskanaler.
- Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera språk.
I rutan Filter börjar du skriva in
unavailable
för att visa översättningen "Ej tillgänglig".Ersätt texten Ej tillgänglig med
Make a selection
.Klicka på Spara.
Steg för Simple
Följ dessa steg för att tillämpa anpassningen till Simple:
Redigera ditt temas JavaScript-fil
För att redigera ditt temas JavaScript-fil:
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Från Shopify-appen klickar du på Butik.
Tryck på Webbshop i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Från Shopify-appen klickar du på Butik.
Tryck på Webbshop i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på
theme.js
ellertheme.js.liquid
i registret Tillgångar.Hitta efter koden
initProductVariant: function() {
. Under den letar du efter följande kod:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);
Add the following code on a new line below:
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
It should look something like this:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
- Klicka på Spara.
Redigera produktsidemallen
Redigera din produktsidemall
Klicka på
product-template.liquid
i registret Avsnitt.Hitta följande kod:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign current_variant = product.selected_variant %}
- Hitta följande kod och radera den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
Hitta koden
{% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% if current_variant == blank %}
<script>
var productOptions = []; {% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
It should look something like this:
{% if current_variant == blank %}
<script>
var productOptions = []; {% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
{% schema %}
- Klicka på Spara.
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
- Från din Shopify-admin går du till Webbshop > Teman.
- Från Shopify-appen klickar du på Butik.
- Tryck på Webbshop i avsnittet Försäljningskanaler.
- Tryck på Hantera teman.
- Från Shopify-appen klickar du på Butik.
- Tryck på Webbshop i avsnittet Försäljningskanaler.
- Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera språk.
I rutan Filter börjar du skriva in
unavailable
för att visa översättningen "Ej tillgänglig".Ersätt texten Ej tillgänglig med
Make a selection
.Klicka på Spara.
Steg för Supply
Följ dessa steg för att tillämpa anpassningen till Supply:
Redigera ditt temas JavaScript-fil
För att redigera ditt temas JavaScript-fil:
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Från Shopify-appen klickar du på Butik.
Tryck på Webbshop i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Från Shopify-appen klickar du på Butik.
Tryck på Webbshop i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på
theme.js
ellertheme.js.liquid
i registret Tillgångar.Hitta efter koden
initProductVariant: function() {
. Under den letar du efter följande kod:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);
Add the following code on a new line below:
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
It should look something like this:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
- Klicka på Spara.
Redigera produktsidemallen
Redigera din produktsidemall
Klicka på
product-template.liquid
i registret Avsnitt.Hitta följande kod:
{% assign variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign variant = product.selected_variant %}
- Hitta följande kod och radera den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Hitta alla förekomster av denna kod:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Replace it with:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
-
Hitta koden
{% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% if current_variant == blank %}
<script>
var productOptions = []; {% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
It should look something like this:
{% if current_variant == blank %}
<script>
var productOptions = []; {% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
{% schema %}
- Klicka på Spara.
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
- Från din Shopify-admin går du till Webbshop > Teman.
- Från Shopify-appen klickar du på Butik.
- Tryck på Webbshop i avsnittet Försäljningskanaler.
- Tryck på Hantera teman.
- Från Shopify-appen klickar du på Butik.
- Tryck på Webbshop i avsnittet Försäljningskanaler.
- Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera språk.
I rutan Filter börjar du skriva in
unavailable
för att visa översättningen "Ej tillgänglig".Ersätt texten Ej tillgänglig med
Make a selection
.Klicka på Spara.
Steg för Venture
Följ dessa steg för att tillämpa anpassningen till Venture:
Redigera ditt temas JavaScript-fil
För att redigera ditt temas JavaScript-fil:
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Från Shopify-appen klickar du på Butik.
Tryck på Webbshop i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Från Shopify-appen klickar du på Butik.
Tryck på Webbshop i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på
theme.js
ellertheme.js.liquid
i registret Tillgångar.Lägg till följande kod längst ner i filen:
(function() {
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
})();
- Hitta följande kod:
this.currentVariant = this._getVariantFromOptions();
Replace it with:
this.currentVariant = this._getVariantFromOptions() || {};
-
Hitta koden
_updatePrice: function(variant)
. Byt ut följande kod:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
}
with:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
- Klicka på Spara.
Redigera produktsidemallen
Redigera din produktsidemall
Klicka på
product-template.liquid
i registret Avsnitt.Hitta följande kod:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% if product.variants.size > 1 %}
{% assign current_variant = product.selected_variant %}
{% else %}
{% assign current_variant = product.first_available_variant %}
{% endif %}
- Hitta följande kod och radera den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
If you can't find the code above, then find this code and delete it:
{% if variant == current_variant %} selected="selected" {% endif %}
- Hitta alla förekomster av denna kod:
{% unless current_variant.available %}
Replace it with:
{% unless current_variant.available or product.variants.size == 1 and variant.available %}
- Hitta följande kod:
{% unless current_variant.available or product.variants.size == 1 and variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
Replace it with:
{% if current_variant == blank %}
{{ 'products.product.unavailable' | t }}
{% else %}
{% unless current_variant.available or product.variants.size == 1 and variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
{% endif %}
-
Hitta koden
{% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% if current_variant == blank %}
<script>
var productOptions = []; {% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
It should look something like this:
{% if current_variant == blank %}
<script>
var productOptions = []; {% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
{% schema %}
- Klicka på Spara.
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
- Från din Shopify-admin går du till Webbshop > Teman.
- Från Shopify-appen klickar du på Butik.
- Tryck på Webbshop i avsnittet Försäljningskanaler.
- Tryck på Hantera teman.
- Från Shopify-appen klickar du på Butik.
- Tryck på Webbshop i avsnittet Försäljningskanaler.
- Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera språk.
I rutan Filter börjar du skriva in
unavailable
för att visa översättningen "Ej tillgänglig".Ersätt texten Ej tillgänglig med
Make a selection
.Klicka på Spara.
Lägg till prompter till dina varianters rullgardinsmenyer
Så här lägger du till prompter till dina varianters rullgardinsmenyer:
Klicka på Lägg till en ny snippet i katalogen Snippets.
Döp ditt nya fragment till
pick-an-option
.Klistra in den här koden i GitHub i din nya snippet.
Klicka på Spara.
Klicka på
theme.liquid
i Layout-registretHitta sluttaggen
</body>
nära slutet av filen. På en ny rad, precis ovanför sluttaggen</body>
, klistrar du in följande kod:
{% render 'pick-an-option' %}

Klicka på Spara.
Hitta den fil som innehåller formuläret "Lägg till i varukorgen". Den kommer att ha ett
action
attribut som är inställd till/cart/add
.Hitta den här koden i formuläret:
<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>
or
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
Replace it with:
<option {% if forloop.length <= 1 and 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>
- Hitta och ersätt följande kod:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Replace with:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
### Other free Shopify themesIf you use any other Shopify theme, then find this code:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign current_variant = product.selected_variant %}
- Klicka på Spara.
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
- Från din Shopify-admin går du till Webbshop > Teman.
- Från Shopify-appen klickar du på Butik.
- Tryck på Webbshop i avsnittet Försäljningskanaler.
- Tryck på Hantera teman.
- Från Shopify-appen klickar du på Butik.
- Tryck på Webbshop i avsnittet Försäljningskanaler.
- Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera språk.
I rutan Filter börjar du skriva in
unavailable
för att visa översättningen "Ej tillgänglig".Ersätt texten Ej tillgänglig med
Make a selection
.Klicka på Spara.