Comment charger du CSS dans une partie spécifique d'un thème Shopify ?

Question

J'essaie de créer une autre section et d'appliquer le CSS à partir du dossier des ressources. Mais quand je mets {{ 'style-section-block.css' | Asset url | stylesheet_tag }} sur la page où je veux appliquer le CSS, cela affecte également les autres sections, même même si je n'y mets que les pièces que je veux changer.

Je souhaite pouvoir modifier une partie d'une page

Answer 1

Si vous souhaitez appliquer CSS à une section spécifique, ajoutez d'abord une classe ou un identifiant unique à la section que vous souhaitez styliser. Après avoir utilisé cette classe ou cet identifiant unique dans votre fichier CSS, vous pouvez styliser la section. L'exemple est

<div class="my-section">
  <!-- section content -->
</div>

"ma-section" est le nom de classe unique de la section. Vous pouvez utiliser le nom de la classe pour ajouter des styles à une section.

.my-section {
      font-size: 24px;      
    }

Basé sur les thèmes Shopify. Vous pouvez utiliser sous condition des fichiers CSS en fonction du descripteur de page ou du modèle de page actuel. D'après ce que je pensais, vous pourriez faire cette variable "template" ou "page.handle" dans le fichier "layout" de votre thème. Je veux dire le fichier "theme.liquid". Vous pouvez ajouter le code suivant à la section "head" de votre fichier "layout".

{% if template contains 'your-specific-template' or page.handle == 'your-specific-page-handle' %}
  {{ 'style-section-block.css' | asset_url | stylesheet_tag }}
{% endif %}

Remplacez « votre modèle spécifique » par le nom de votre modèle, ou « votre descripteur de page spécifique » par le nom de votre descripteur de page. Et supprimez les liens CSS des autres sections.