Configuration Shopify de base
Étapes pour se connecter au Shopify du client
- Aller sur le site https://www.shopify.com/partners et se connecter.
- Cliquer sur Stores. Vous devriez voir les boutiques en ligne qui vous sont assignées.
- Cliquer sur le nom de la boutique du client.
- Se connecter (Log In en haut à droite).
- Dans la barre de recherche, écrire ‘Online Store’ et appuyer sur Enter. Vous verrez ensuite la boutique en ligne pour ce client.
Vous devriez voir le thème Shopify choisi pour ce client. En cliquant sur ‘Customize’, vous pouvez commencer à créer votre site Shopify.
Custom Fonts : Étapes pour ajouter une police de caractères personnalisée
-
- Aller dans Content -> Files
- Importer les fichiers WOFF et WOFF2 de la police choisie
- Aller dans le thème Shopify … et cliquer sur ‘Edit code’
- À l’intérieur du dossier ‘Layout’, aller dans le fichier ‘theme.liquid’ et ajouter le lien de la police dans le HEAD tag, par exemple :
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Fahkwang:wght@400;500&display=swap" rel="stylesheet">
- À l’intérieur du dossier ‘Snippets’, aller dans le fichier ‘css-variables.liquid’ et ajouter ce code dans la première rangée après le tag {% style %} :
@font-face { font-family: "MyFont"; src: url('{{ "font_myfont.woff2" | file_url }}') format("woff2"), url('{{ "font_myfont.woff" | file_url }}') format("woff"); } - Changer ensuite vos variables CSS :
--typeHeaderPrimary: 'MyFont'; --typeBasePrimary: 'MyFont';
FYI quand on télécharge les Google Fonts, on a du TTF, donc voici un WOFF + WOFF2 generator :
https://www.fontsquirrel.com/tools/webfont-generator
Et voici l’article des étapes en référence: