Redigera eller radera en Köpknapp eller en inbäddad varukorg
Köpknappar och varukorgar genereras från kodfragment som du kopierar från din Shopify-admin och klistrar in i din webbsidas käll-HTML. Dessa kodfragment kallas för inbäddningskod. Du måste redigera den tillhörande inbäddade koden om du vill ändra utseende eller beteende för en knapp eller varukorg.
På den här sidan
Radera en Köpknapp, inbäddad produktserie eller inbäddad varukorg
Steg:
- Öppna käll-HTML på webbsidan som innehåller Köpknappen, inbäddad produktserie eller inbäddad varukorg.
- Ta bort hela den inbäddade koden från käll-HTML som börjar med
<script data-shopify-buy-ui>
och slutar med</script>
. Den inbäddade koden ser ut som följande kod för en Köpknapp:
- Spara dina ändringar.
Köpknappen, den inbäddade produktserien eller den inbäddade varukorgen kommer inte längre att visas på din webbsida.
Redigera en Köpknapp
Om du vill ändra utseendet eller inställningarna för en befintlig Köpknapp måste du redigera den inbäddade koden som du har lagt till i din käll-HTML.
Varje köpknapp är uppbyggd av separata komponenter i den inbäddade koden. Om du till exempel lägger till en produkt med en varukorg till din webbsida kommer den inbäddade koden att generera en product
-komponent, en cart
-komponent och en varukorgskomponent toggle
:
Om du vill att din produktkomponent ska öppna ett modalfönster med produktdetaljer kommer den inbäddade koden att generera en modal
-komponent och en modalProduct
-komponent:
I följande kodfragment finns separata komponenter för product
och cart
:
Dessa komponenter konfigureras separat via konfigurationsobjekt i den inbäddade koden. Du kan ändra utseende eller beteende för dina Köpknappar genom att redigera konfigurationsobjekten i den inbäddade koden.
Varje komponent har många attribut som du kan redigera. Om du vill ha en fullständig lista över redigerbara alternativ, se vår utvecklardokumentation. Om du vill konfigurera ett tillval som inte redan visas i din inbäddade kod måste du lägga till lämplig tangent till lämpligt objekt, (se exemplet).
Redigera stilen på en komponent
Varje komponent har ett inbäddat styles
konfigurationsobjekt som du kan redigera eller lägga till för att ändra komponentens utseende. Dessa formatmallar är formaterade på samma sätt som CSS. Varje tangent på toppnivå i styles
-objektet representerar ett element i komponenten, till exempel namn eller knapp. Inom det här objektet är varje tangent ett CSS-värde (till exempel "bakgrundsfärg" eller "border") och värdet är ett CSS-värde.
Alla giltiga CSS-värden kan läggas till i styles
. Observera att värdenamn med bindestreck måste vara inom citattecken.
För mer information om anpassning av CSS, se utvecklardokumentationen.
Exempel: byt ut länk till varukorg med modal för produktdetaljer
I det här exemplet kan du ändra din nuvarande inbäddade kod för att rikta din kund till en modal för produktdetaljer istället för varukorgen:
- Öppna HTML på sidan som innehåller den inbäddade produkten som du vill ändra.
- Hitta konfigurationsobjektet
product
. - Hitta
buttonDestination
-tangenten i objektet:
- Ändra värdet för den tangenten till
'modal'
(se till att du inkluderar citattecknen):
- Spara dina ändringar.
Exempel: ändra layouten för din produktinbäddning
I det här exemplet kan du ändra layouten för din produktinbäddning så att bilden visas på sidan istället för högst upp:
- Öppna HTML på sidan som innehåller den inbäddade produkten som du vill ändra.
- Hitta konfigurationsobjektet
product
. - Lägg till en
layout
-tangent och ange sedan värdet till'horizontal'
:
- Spara dina ändringar.
Redigera varukorgen för din webbplats
Om du vill ändra utseendet eller beteendet för din webbsidas varukorg måste du redigera cart
-konfigurationsobjektet i din inbäddningskod.
Steg:
- Öppna HTML på sidan som innehåller varukorgen som du vill redigera.
- Hitta
cart
-konfigurationsobjektet i din inbäddade kod:
- Redigera eller lägg till värdet som du vill ändra. Om du vill ha en fullständig lista över konfigurerbara egenskaper, se utvecklardokumentationen.
- Spara dina ändringar.
Redigera en inbäddad produktserie
Att redigera en inbäddad produktserie liknar att redigera en produkt eller en varukorg. För att redigera egenskaperna för produkterna i produktserien (till exempel layouten för varje produkt) måste du hitta konfigurationsobjektet product
och redigera det på samma sätt som du skulle redigera en produktinbäddning. Redigera istället tangenten productSet
om du vill redigera egenskaperna i själva produktserien (till exempel texten på knappen Nästa sida).
Vissa egenskaper, t.ex. texten till en komponent, konfigureras genom inbäddade objekt, vilket är objekt som visas inuti andra objekt. Texten för knappen Nästa sida visas t.ex. inuti productSet
-komponentens text
-objekt: