De Gift Card-pagina in Shopify bewerken
Het is belangrijk dat je de gift cards die je verkoopt op een mooie manier toont aan je klanten. In dit artikel gaan we de Gift Card-pagina op drie plekken wijzigen:
We voegen een logo toe
We voegen de naam van de klant toe
We veranderen de giftcard afbeelding
Waar vind je de Gift Card pagina?
Voordat we beginnen met het bewerken van de Gift Card pagina, is het belangrijk om te weten waar je deze pagina kunt vinden in Shopify. Ga in de achterkant van je Shopify winkel naar 'Online store' en vervolgens klik je op 'Customize' bij het huidige thema wat je gebruikt. Vanuit de Customizer kun je de pagina wijzigen naar 'Gift card'.
De Gift Card template bewerken
De Gift Card pagina is gekoppeld aan een standaard template. Deze template is makkelijk aan te passen aan de wensen van jouw webshop. Je kunt bijvoorbeeld de kleuren en lettertypes aanpassen. Om het template te bewerken, ga je in de code-editor van Shopify naar het bestand 'gift_card.liquid'
De Gift Card pagina moet goed aansluiten bij de huisstijl van jouw webshop. We kunnen ons eigen logo toevoegen door op zoek te gaan naar de volgende regel code:
<span class="h2">{{ shop.name }}</span>Deze regel vervangen we met:
<span class="h2"><img src="link_naar_je_logo" width="200" /></span>Bovenstaande regel zorgt ervoor dat de naam van onze webshop vervangen wordt door ons logo. Het kan zijn dat je de breedte van 200 pixels te veel of te weinig vindt. Je kunt dit getal naar eigen wens aanpassen.
Het is ook mogelijk om de afbeelding van de gift card te vervangen. Deze afbeelding kan van alles zijn, het mooiste is dat dit een afbeelding is die je zelf hebt gecreëerd.
Om de afbeelding te vervangen met onze eigen, moeten we op zoek naar de volgende regel code:
<img src="{{ 'gift-card/card.svg' | shopify_asset_url }}" alt="" class="gift-card__image" height="{{ 570 | divided_by: 1.5 }}" width="570" loading="lazy">Deze regel code kunnen we vervangen met de volgende:
<img src="link_naar_je_eigen_afbeelding" alt="" class="gift-card__image" height="{{ 570 | divided_by: 1.5 }}" width="570" loading="lazy">We hebben de Gift Card al op de twee belangrijkste plekken gewijzigd. Een leuke toevoeging is het weergeven van de naam van de klant. Dit geeft een persoonlijke 'touch' aan de gift card. Om de naam van de klant toe te voegen aan de Gift Card-pagina gaan we op zoek naar de volgende regel:
<h1 class="gift-card__heading">{{ 'gift_cards.issued.subtext' | t }}</h1>Aan de regel kunnen we een stuk code toevoegen, die de naam van de klant weergeeft:
<h1 class="gift-card__heading">{{ gift_card.customer.first_name }}, {{ 'gift_cards.issued.subtext' | t }}</h1>Met de bovenstaande wijzigingen is ons gelukt om de Gift Card-pagina een stuk persoonlijker en stijlvoller te maken!