De ingesloten customizer instellen

Het themablok geeft een Ingesloten publicatie een zichtbare plek op de Shopify-productpagina. Je stelt in Composerie in wat het toont en bepaalt in Shopify de volgorde binnen het producttemplate.

Kies de Ingesloten indeling

Selecteer voor een eerste publicatie Ingesloten op het scherm Publiceren van het product. Dat scherm gebruikt de standaardwaarden van de modus. De eerdere stap Configureren en de presetkiezer horen er niet bij. Bekijk gedetailleerde weergaveopties in de winkelinstellingen van het product.

Met geavanceerde opties kun je de variant-UI van het thema vervangen, een live voorbeeld tonen, titel en prijs vervangen, conversie-elementen toevoegen en Composerie de actie voor toevoegen aan de winkelwagen laten beheren. Schakel alleen de opties in die je met het thema hebt getest.

Plaats het Shopify-blok

Gebruik het installatievenster van Composerie om het producttemplate van Shopify te openen. Houd het blok binnen het hoofdproductformulier, dicht bij de aankoopknoppen, en sla op.

Geef de customizer een stijl in Composerie

Open Customizer in het dashboard om het thema, de merkkleuren, het lettertype, de knoppen, de indeling en de geavanceerde opties in te stellen. Aan de rechterkant zie je een live voorbeeld voor desktop en mobiel.

Dashboard

Eigen CSS gebruiken

Open in Customizer het onderdeel Geavanceerd en gebruik Eigen CSS voor kleine cosmetische aanpassingen. De CSS blijft binnen de root van de customizer en heeft een limiet van 4000 tekens.

Gebruik deze stabiele klassen in plaats van gegenereerde utility-klassen:

Selector	Element
.composerie-input	Tekst- en andere invoervelden
.composerie-label	Veldlabels
.composerie-textarea	Tekstvelden met meerdere regels
.composerie-select	Keuzelijsten
.composerie-dropzone	Gebieden voor het uploaden van foto’s
.composerie-variant	Variant- en materiaalbesturing
.composerie-addon	Besturing van afzonderlijke add-ons

Verander bijvoorbeeld de randkleur van tekstvelden:

.composerie-input {
  border-color: #2563eb;
}

Selectors voor toevoegen aan de winkelwagen en prijs, brede knopselectors en onveilige CSS worden gefilterd. Gebruik de weergave-instellingen voor aankoopknoppen en prijzen. Behoud bestaande selectors als je je CSS bijwerkt, en test de bedoelde besturing in het live voorbeeld en in de webshop op desktop- en mobiele formaten voordat je publiceert.

Volgende stap

Doorloop de controlelijst voor het voorbeeld voordat je publiceert.