/** Shopify CDN: Minification failed

Line 17:5 Unexpected "11"
Line 103:18 Comments in CSS use "/* ... */" instead of "//"
Line 358:1 Expected identifier but found "%"
Line 359:2 Unexpected "<"
Line 362:9 Expected identifier but found "%"
Line 370:8 Unexpected "<"
Line 371:11 Expected identifier but found "%"
Line 372:12 Unexpected "<"
Line 373:15 Unexpected "{"
Line 373:32 Expected ":"
... and 577 more hidden warnings

**/

hier 11:36

Bonvent_BVM_Product_Page_Handover(1).md
Fichier

Bonvent_BVM_Product_Page_Handover(1).docx
Document
je veux qu on fasse l import de tout les avis automatiquement, et aussi les photos des clients. Apparemment ce n est pas possible d avoir les repon,ses de bonvent mais je veux que tu me dise comment je peux faire simplement pour importer les reponeses


01_shopify_get_token_body.json
Fichier

02_shopify_read_product_full_body.json
Fichier

03_shopify_metafield_definitions_body.json
Fichier

04_shopify_update_main_content_template.json
Fichier

05_shopify_update_section_texts_template.json
Fichier

06_shopify_update_bottom_and_faq_template.json
Fichier

07_shopify_clear_old_bottom_text_body.json
Fichier

08_shopify_update_media_alt_template.json
Fichier

09_gsc_postman_search_analytics_body.json
Fichier

bonvent_seo_ai_product_workflow.pdf
PDF

gsc_product_query_analyzer.py
Python

README.md
Fichier

Bonvent_Option_Builder_Continuation_Guide.md
Fichier

Bonvent_Option_Builder_Continuation_Guide.pdf
PDF

Bonvent_Option_Builder_Postman_Templates.md
Fichier

Bonvent_Product_Grid_Metaobjects_Guide.docx
Document

bonvent_shopify_keys_metafields_metaobjects.pdf
PDF

bonvent_shopify_product_gallery_guide.pdf
PDF
on a deja l app API etc . Regrade deja tout le travail qu on a fait 

Réfléchi pendant 48s
Tu as raison. J’ai repris les fichiers et on ne doit surtout pas recréer l’app Shopify, les accès API, les metafields ou les metaobjects.

Ce qui est déjà en place
L’accès Shopify fonctionne déjà avec ton app existante :

boutique : 491ceb-44.myshopify.com ;

authentification par client_id + client_secret ;

récupération du token avec grant_type: client_credentials ;

appels GraphQL déjà utilisés depuis Postman. 

 


Toute l’infrastructure des avis existe également :

metaobject : bonvent_customer_review ;

définition : gid://shopify/MetaobjectDefinition/19900596515 ;

metafield produit : custom.customer_reviews ;

champs avis, note, date, photos, produit et réponse Bonvent déjà créés ;

produit test Shopify : 9145405636899 ;

produit Judge.me : 1636066076 ;

trois avis déjà importés ;

cinq photos déjà transférées dans Shopify Files. 


Le rendu HTML natif est également déjà prévu dans :

snippets/bvm-product-reviews-zero.liquid
Donc le seul élément réellement manquant est :

le script automatique Judge.me → Shopify
Le vrai plan, corrigé
On ne crée rien dans Shopify. On fait uniquement trois fichiers externes :

sync-reviews.mjs
package.json
.github/workflows/reviews-sync.yml
Le script utilisera directement :

SHOPIFY_SHOP
SHOPIFY_CLIENT_ID
SHOPIFY_CLIENT_SECRET
JUDGEME_SHOP_DOMAIN
JUDGEME_API_TOKEN
À chaque exécution :

il demande un token Shopify temporaire avec ton app existante ;

il récupère les avis publiés Judge.me ;

il reconnaît les avis existants grâce à judge_me_review_id ;

il crée uniquement les avis manquants ;

il met à jour les avis modifiés ;

il importe uniquement les nouvelles photos dans Shopify Files ;

il remplit customer_images ;

il rattache l’avis à product_reference ;

il reconstruit custom.customer_reviews sur chaque produit ;

il ne supprime automatiquement ni metaobjects ni fichiers.

C’est exactement le pipeline déjà défini dans le document de reprise. 


Première exécution
La première version sera limitée au produit :

Shopify product ID : 9145405636899
Judge.me product ID : 1636066076
Elle devra trouver :

14 avis Judge.me
3 avis déjà présents
11 avis à créer
photos déjà importées à reconnaître
nouvelles photos à importer
Puis on relancera le script une deuxième fois. Le résultat attendu sera :

0 doublon
0 nouvel upload inutile
0 nouvel avis créé
Ensuite seulement, on étendra à tous les produits.

Programmation tous les deux jours
GitHub Actions lancera le script automatiquement :

on:
  workflow_dispatch:

  schedule:
    - cron: "17 19 */2 * *"
GitHub utilise UTC pour le cron classique ; 19:17 UTC correspond à environ 03:17 à Bali le lendemain.

La seule donnée absente des fichiers
Les documents contiennent toute la structure Shopify, mais pas la réponse JSON complète du dernier appel Judge.me qui a fonctionné. J’ai besoin de cette réponse réelle pour utiliser les noms exacts des champs pictures, published, hidden, product_external_id, etc., sans inventer leur structure.

Il faut simplement me coller ici le retour JSON du GET Judge.me utilisé pour les trois avis de test, en supprimant le token s’il apparaît. Ensuite je te fournis directement le premier sync-reviews.mjs adapté à ce que Judge.me renvoie réellement.



Texte collé.txt
Document


Texte collé(1).txt
Document
le code source :


donne moi les body etc


Texte collé(2).txt
Document

c est ou le champ du message 

comme ca ?

comme ca ?

j ai cliqué sur action mais il y a rien

c est bon j ai ajouté tout les secret. Je fais quoi maintenant pour run les script ? Ca va recuperere tous les avis de tous les produit ? Est ce que tout est bien securisé ? personne peut voir mes api etc ?

je pense pas que ca fonctionne 

comme ca ?


probleme

ou ca ? 

review export%2F491ceb 44 all published reviews in judgeme format 2026 07 12 1783838453

Impossible d’afficher la visualisation

review export%2F491ceb 44 all published reviews in judgeme format 2026 07 12 1783838453(1)

Impossible d’afficher la visualisation
j ai pas recu ta reponse precedente



Texte collé(3).txt
Document
ca ??

je fais quoi la 

maintenant ? 

comme ca ?

j ai fini l etape 4 je fais quoi 

quand je fais visit j ai ca 


hier 17:08


Texte collé(4).txt
Document
le code source: (tu peux en profiter pour tout verifier, si tout est ok pour le seo , si il faut ajouter d autres shema, si il y a des erreurs etc)


Texte collé(5).txt
Document
peux tu me dire si tu vois le shema dans ce code source. J ai fais nav privé :




Texte collé(6).txt
Document
j ai mis dans section bvm-main-product-zero.liquid donc c est normalement bon . tu peux verifier :



Texte collé(7).txt
Document
c est bon ?


Texte collé(8).txt
Document
voila la faq et le bvm qui contient organisation .  c es t ok ?


Texte collé(9).txt
Document
juste donne moi le fichier FAQ et le fichier Header propre stp


j ai toujours ce probleme 

ce bloc la ? 

j ai tioujours cette erreur . tu peux me dire si mes fichier sont ok ?


Texte collé(10).txt
Document

Texte collé (2).txt
Document

pour le bvm produvt il y  aun probleme 

toujours pas il m edis qu il y a un probleme ligne 361

j ai toujours l erreur 


Texte collé(11).txt
Document
corrige moi le fichier stp : 


Texte collé(12).txt
Document
tu comfirme 


theme_export__bonventmotorbikes-com-test-sans-les-apps__12JUL2026-0226pm.zip
Archive zip
donne moi les fichier a remplacer 

aujourd’hui 9:33

Texte collé(13).txt
Document
c est bon ?

j enleve 3 linklists 2 banners shop ?? c est toi qui m avait fait ajouté ca. T es sur ?

la je viesn d essyaer ca recharge la page sur une autre variante . C est ca qu il doit se passer ? Aussi je pense que ca serait bien de nommer les page vraiante pour le SEO comme le nom des variantes. Par exemple ici la variante a un ID variant ..... ca serait mieux de creer un eurl custom seat ..... /black-ribbed-with-suede-front-&-black. C ets pas mieux pour seo ??


Texte collé(14).txt
Document


Texte collé(15).txt
Document
voici le code source avec une variante


Texte collé(16).txt
Document
je veux aussi corriger une chose. Sur les pages produis ou il y a des variantes. Ce n est pas la 1 ere photo de la galerie qui est affiché mais la photo de la premiere variante. Et je ne veux pas ca. Je veux que ce soit la 1 ere photo de la galerie et que aucunes variantes soit selectionné de base. si tu peux aussi modifier ca dans le code 


Code collé.js
JavaScript

Texte collé (2)(1).txt
Document
{% form 'product', product, id: product_form_id, class: 'bvm-zero-form', novalidate: 'novalidate' %}
  <div class="bvm-zero-price-qty-row">
    <div class="bvm-zero-product__price-block">
      <div class="bvm-zero-price-qty-main">
        {% liquid
          assign bvm_variant_on_sale = false

          if current_variant.compare_at_price != blank and current_variant.compare_at_price > current_variant.price
            assign bvm_variant_on_sale = true
          endif
        %}

        <div class="bvm-zero-price-display" data-bvm-price-current>
          {% if bvm_variant_on_sale %}
            <span class="bvm-zero-price-display__compare">
              {{ current_variant.compare_at_price | money }}
            </span>
          {% endif %}

          <span class="bvm-zero-price-display__current{% if bvm_variant_on_sale %} is-sale{% endif %}">
            {{ current_variant.price | money }}
          </span>

          {% if bvm_variant_on_sale %}
            <span class="bvm-zero-price-display__badge">
              {{ 'products.product.on_sale' | t }}
            </span>
          {% endif %}
        </div>

        <div class="bvm-zero-form__field bvm-zero-form__field--qty-inline">
          <label class="bvm-zero-form__label" for="Quantity-{{ section.id }}">Quantity</label>

          <div class="bvm-zero-quantity-select">
            <select
              id="Quantity-{{ section.id }}"
              name="quantity"
              class="bvm-zero-quantity-select__input"
              aria-label="Quantity"
            >
              {% for i in (1..8) %}
                <option value="{{ i }}">{{ i }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
      </div>

      <div class="bvm-zero-product__tax-note">
        {% if cart.taxes_included %}
          Taxes included.
        {% else %}
          Taxes excluded.
        {% endif %}
        Shipping calculated at checkout.
      </div>
    </div>
  </div>

  {% if product.has_only_default_variant == false %}
    <div class="bvm-zero-form__field">
      <label class="bvm-zero-form__label" for="Variant-{{ section.id }}">Choose an option</label>

      <select
  id="Variant-{{ section.id }}"
  name="id"
  class="bvm-zero-form__select"
  data-bvm-variant-select
>
        {% for variant in product.variants %}
          <option
            value="{{ variant.id }}"
            {% if variant.id == current_variant.id %}selected{% endif %}
            {% unless variant.available %}disabled{% endunless %}
          >
            {{ variant.title }}{% unless variant.available %} — Sold out{% endunless %}
          </option>
        {% endfor %}
      </select>
    </div>
  {% else %}
    <input type="hidden" name="id" value="{{ current_variant.id }}">
  {% endif %}

  {% render 'bv-options-builder' %}

<button
  type="submit"
  name="add"
  class="bvm-zero-form__submit bvm-zero-form__submit--native"
  {% unless current_variant.available %}disabled{% endunless %}
>
  {% if current_variant.available %}Add to cart{% else %}Sold out{% endif %}
</button>
{% endform %}





{% liquid
  assign bvm_rating_value = blank

  if product.metafields.reviews.rating.value.rating != blank
    assign bvm_rating_value = product.metafields.reviews.rating.value.rating
  elsif product.metafields.reviews.rating.value != blank
    assign bvm_rating_value = product.metafields.reviews.rating.value
  endif

  assign bvm_rating_count = 0

  if product.metafields.reviews.rating_count.value != blank
    assign bvm_rating_count = product.metafields.reviews.rating_count.value | plus: 0
  elsif product.metafields.reviews.rating_count != blank
    assign bvm_rating_count = product.metafields.reviews.rating_count | plus: 0
  endif

  assign bvm_rating_number = bvm_rating_value | plus: 0
  assign bvm_rating_rounded = bvm_rating_number | round
%}

<nav class="bvm-product-breadcrumb" aria-label="Breadcrumb">
  <div class="bvm-product-breadcrumb__scroll">
    <a class="bvm-product-breadcrumb__link" href="{{ routes.root_url }}">Home</a>

    {% if breadcrumb_brand_label != blank %}
      <span class="bvm-product-breadcrumb__separator" aria-hidden="true">|</span>

      {% if breadcrumb_brand_url != blank %}
        <a class="bvm-product-breadcrumb__link" href="{{ breadcrumb_brand_url }}">{{ breadcrumb_brand_label }}</a>
      {% else %}
        <span class="bvm-product-breadcrumb__current">{{ breadcrumb_brand_label }}</span>
      {% endif %}
    {% endif %}

    {% if breadcrumb_model_label != blank %}
      <span class="bvm-product-breadcrumb__separator" aria-hidden="true">|</span>

      {% if breadcrumb_model_url != blank %}
        <a class="bvm-product-breadcrumb__link" href="{{ breadcrumb_model_url }}">{{ breadcrumb_model_label }}</a>
      {% else %}
        <span class="bvm-product-breadcrumb__current">{{ breadcrumb_model_label }}</span>
      {% endif %}
    {% endif %}
  </div>
</nav>

<h1 class="bvm-zero-product__title">{{ product.title }}</h1>

{% if bvm_rating_value != blank and bvm_rating_count > 0 %}
  <div class="bvm-zero-rating" aria-label="{{ bvm_rating_number | round: 1 }} out of 5 stars based on {{ bvm_rating_count }} reviews">
    <span class="bvm-zero-rating__stars" aria-hidden="true">
      {% for i in (1..5) %}
        <span class="bvm-zero-rating__star{% if i <= bvm_rating_rounded %} is-filled{% endif %}">★</span>
      {% endfor %}
    </span>

    <span class="bvm-zero-rating__text">
      {{ bvm_rating_number | round: 1 }}/5 · {{ bvm_rating_count }}
      {% if bvm_rating_count == 1 %}review{% else %}reviews{% endif %}
    </span>
  </div>
{% endif %}

{% if product.metafields.custom.short_description != blank %}
  <div class="bvm-zero-product__short">
    {{ product.metafields.custom.short_description }}
  </div>
{% endif %}



<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
  {%- liquid
  assign is_bv_zero_product = false

  if template.name == 'product'
    if template.suffix == 'bv-zero' or template.suffix == 'bvm-zero'
      assign is_bv_zero_product = true
    endif
  endif
-%}
  <head><meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="theme-color" content="">
    <link rel="preconnect" href="https://cdn.shopify.com" crossorigin>

    {% if template contains 'collection' and current_tags %}
      <meta name="robots" content="noindex" />
      <link rel="canonical" href="{{ shop.url }}{{ collection.url }}" />
    {% else %}
      <link rel="canonical" href="{{ canonical_url }}" />
    {% endif %}

    {%- if settings.favicon != blank -%}
      <link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
    {%- endif -%}

    {%- unless is_bv_zero_product -%}
      {%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}
        <link rel="preconnect" href="/cdn/fonts" crossorigin>
      {%- endunless -%}
    {%- endunless -%}

    {%- liquid
  assign bvm_page_title_lower = page_title | downcase
-%}

<title>
  {{ page_title }}
  {%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
  {%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
  {%- unless bvm_page_title_lower contains 'bonvent' %} &ndash; Bonvent Motorbikes{% endunless -%}
</title>

    {% if page_description %}
      <meta name="description" content="{{ page_description | escape }}">
    {% endif %}

    {% render 'meta-tags', page_description: page_description, page_title: page_title %}

    {%- if is_bv_zero_product -%}
      {%- liquid
        assign bv_lcp_image = product.selected_or_first_available_variant.featured_image

        if bv_lcp_image == blank
          assign bv_lcp_image = product.featured_image
        endif

        if bv_lcp_image == blank and product.images.size > 0
          assign bv_lcp_image = product.images.first
        endif
      -%}

      {%- if bv_lcp_image != blank -%}
        <link
          rel="preload"
          as="image"
          href="{{ bv_lcp_image | image_url: width: 720 }}"
          imagesrcset="
            {{ bv_lcp_image | image_url: width: 360 }} 360w,
            {{ bv_lcp_image | image_url: width: 480 }} 480w,
            {{ bv_lcp_image | image_url: width: 600 }} 600w,
            {{ bv_lcp_image | image_url: width: 720 }} 720w,
            {{ bv_lcp_image | image_url: width: 900 }} 900w
          "
          imagesizes="100vw"
          fetchpriority="high"
        >
      {%- endif -%}
    {%- endif -%}

    {%- unless is_bv_zero_product -%}
  <script src="{{ 'constants.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'pubsub.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'global.js' | asset_url }}" defer="defer"></script>
{%- else -%}
  <script>
    window.theme = window.theme || {};

    window.shopUrl = '{{ request.origin }}';

    window.routes = window.routes || {
      cart_add_url: '{{ routes.cart_add_url }}',
      cart_change_url: '{{ routes.cart_change_url }}',
      cart_update_url: '{{ routes.cart_update_url }}',
      cart_url: '{{ routes.cart_url }}',
      predictive_search_url: '{{ routes.predictive_search_url }}'
    };

    window.cartStrings = window.cartStrings || {
      error: {{ 'sections.cart.cart_error' | t }},
      quantityError: {{ 'sections.cart.cart_quantity_error_html' | t: quantity: '[quantity]' }}
    };

    window.variantStrings = window.variantStrings || {
      addToCart: {{ 'products.product.add_to_cart' | t }},
      soldOut: {{ 'products.product.sold_out' | t }},
      unavailable: {{ 'products.product.unavailable' | t }},
      unavailable_with_option: {{ 'products.product.value_unavailable' | t: option_value: '[value]' }}
    };

    window.accessibilityStrings = window.accessibilityStrings || {
      imageAvailable: {{ 'products.product.media.image_available' | t: index: '[index]' }},
      shareSuccess: {{ 'general.share.success_message' | t }},
      pauseSlideshow: {{ 'sections.slideshow.pause_slideshow' | t }},
      playSlideshow: {{ 'sections.slideshow.play_slideshow' | t }}
    };
  </script>

  <script src="{{ 'bvm-header-core.js' | asset_url }}" defer="defer"></script>
{%- endunless -%}

    {{ content_for_header }}

    {% render 'theme-variables' %}
    {{ 'base.css' | asset_url | stylesheet_tag }}
    {{ 'zmz-utility.css' | asset_url | stylesheet_tag }}
    {{ 'zemez-mega-menu.css' | asset_url | stylesheet_tag }}

    {% if settings.compare_toggle and is_bv_zero_product == false %}
      {{ 'component-compare.css' | asset_url | stylesheet_tag }}
    {% endif %}

    {% if settings.wishlist_toggle and is_bv_zero_product == false %}
      {{ 'component-wishlist.css' | asset_url | stylesheet_tag }}
    {% endif %}

    {%- unless is_bv_zero_product -%}
      {%- unless settings.type_body_font.system? -%}
        <link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>
      {%- endunless -%}

      {%- unless settings.type_header_font.system? -%}
        <link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
      {%- endunless -%}
    {%- endunless -%}

    {%- if settings.predictive_search_enabled and is_bv_zero_product == false -%}
      <link
        rel="stylesheet"
        href="{{ 'component-predictive-search.css' | asset_url }}"
        media="print"
        onload="this.media='all'"
      >
    {%- endif -%}

    <script>
      document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
      if (Shopify.designMode) {
        document.documentElement.classList.add('shopify-design-mode');
      }
    </script>


    <style>
      @media (min-width: 768px) {
        .facets-container {
          position: sticky;
          top: 100px;
          overflow-y: scroll;
        }
      }
    </style>

    <script>
      if ('scrollRestoration' in history) {
        history.scrollRestoration = 'manual';
      }
    </script>

    {% if template.name == 'product' and is_bv_zero_product == false %}
      {{ 'bonvent-product.css' | asset_url | stylesheet_tag }}
    {% endif %}

    {% unless is_bv_zero_product %}
  {% render 'globo.options.custom' %}
{% endunless %}


  </head>

  <body class="gradient loaded">




   {% comment %} <div id="bonvent-page-loader" class="bonvent-page-loader" aria-hidden="true">
  <div class="bonvent-page-loader__inner">
    <img
  class="bonvent-page-loader__logo-image"
  src="{{ 'bonvent-logo-loader.svg' | asset_url }}"
  alt="Bonvent Motorbikes"
  width="170"
  height="44"
>
    <div class="bonvent-page-loader__bar">
      <span></span>
    </div>
  </div>
</div>
{% endcomment %}




    <a class="skip-to-content-link button visually-hidden" href="#MainContent">
      {{ 'accessibility.skip_to_text' | t }}
    </a>

    {%- if settings.cart_type == 'drawer' and is_bv_zero_product == false -%}
      {%- render 'cart-drawer' -%}
    {%- endif -%}

    {% sections 'header-group' %}

    {% section 'bv-trust-marquee' %}

    <main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
      {%- comment -%}
        {% render 'breadcrumbs' %}
      {%- endcomment -%}

      {{ content_for_layout }}
    </main>

    {% sections 'footer-group' %}

    <ul hidden>
      <li id="a11y-refresh-page-message">{{ 'accessibility.refresh_page' | t }}</li>
      <li id="a11y-new-window-message">{{ 'accessibility.link_messages.new_window' | t }}</li>
    </ul>

    {% unless is_bv_zero_product %}
    <script>
      window.theme = {};

      window.shopUrl = '{{ request.origin }}';
      window.routes = {
        cart_add_url: '{{ routes.cart_add_url }}',
        cart_change_url: '{{ routes.cart_change_url }}',
        cart_update_url: '{{ routes.cart_update_url }}',
        cart_url: '{{ routes.cart_url }}',
        predictive_search_url: '{{ routes.predictive_search_url }}'
      };

      window.cartStrings = {
        error: {{ 'sections.cart.cart_error' | t }},
        quantityError: {{ 'sections.cart.cart_quantity_error_html' | t: quantity: '[quantity]' }}
      };

      window.variantStrings = {
        addToCart: {{ 'products.product.add_to_cart' | t }},
        soldOut: {{ 'products.product.sold_out' | t }},
        unavailable: {{ 'products.product.unavailable' | t }},
        unavailable_with_option: {{ 'products.product.value_unavailable' | t: option_value: '[value]' }},
      };

      window.accessibilityStrings = {
        imageAvailable: {{ 'products.product.media.image_available' | t: index: '[index]' }},
        shareSuccess: {{ 'general.share.success_message' | t }},
        pauseSlideshow: {{ 'sections.slideshow.pause_slideshow' | t }},
        playSlideshow: {{ 'sections.slideshow.play_slideshow' | t }},
      };

      window.theme.strings = {
        compareImg: {{ 'products.compare.image' | t }},
        compareTitle: {{ 'products.compare.title' | t }},
        compareDetails: {{ 'products.compare.details' | t }},
        compareRating: {{ 'products.compare.rating' | t }},
        compareAvailable: {{ 'products.compare.available' | t }},
        compareVendor: {{ 'products.compare.vendor' | t }},
        compareType: {{ 'products.compare.type' | t }},
        compareDescription: {{ 'products.compare.description' | t }},
        compareOptions: {{ 'products.compare.options' | t }},
        compareRemove: {{ 'products.compare.remove' | t }},
        compareSale: {{ 'products.compare.sale' | t }},
        compareNew: {{ 'products.compare.new' | t }},
        compareAlert: {{ 'products.compare.compareAlert' | t }},
        compareAvailableStatusOk: {{ 'products.product.inventory_in_stock' | t }},
        compareAvailableStatusNo: {{ 'products.product.inventory_out_of_stock' | t }}
      };

      let productWishlist = false;
      let productCompare = false;
    </script>

    {% endunless %}

    {%- if settings.predictive_search_enabled and is_bv_zero_product == false -%}
      <script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>
    {%- endif -%}

    {%- if settings.compare_toggle and is_bv_zero_product == false -%}      <modal-opener class="no-js-hidden" data-modal="#PopupModal-Compare">
        <button
          id="compare_list"
          class="compare-popup-modal__button color-accent-1 full-unstyled-link"
          type="button"
          aria-label="compare"
          aria-haspopup="dialog"
        >
          {% render 'icon-compare' %}
          <span id="compare__counter">0</span>
          <div class="loading-overlay__spinner hidden">
            <svg
              aria-hidden="true"
              focusable="false"
              class="spinner"
              viewBox="0 0 66 66"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
            </svg>
          </div>
        </button>
      </modal-opener>

      <modal-dialog id="PopupModal-Compare" class="color-background-1 compare compare-popup-modal">
        <div
          class="compare__wrapper compare-popup-modal__content"
          role="dialog"
          aria-label="compare"
          aria-modal="true"
          tabindex="-1"
        >
          <button
            id="ModalClose-Compare"
            type="button"
            class="compare-popup-modal__toggle"
            aria-label="{{ 'accessibility.close' | t }}"
          >
            {% render 'icon-close' %}
          </button>

          <div class="compare__title h6">
            {{ 'products.compare.compareTitle' | t }}
            <span id="compareClearAll">{{ 'products.compare.clear' | t }}</span>
          </div>

          <div class="loading-overlay hidden">
            <div class="loading-overlay__spinner">
              <svg
                aria-hidden="true"
                focusable="false"
                class="spinner"
                viewBox="0 0 66 66"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
              </svg>
            </div>
          </div>
        </div>
      </modal-dialog>

      <modal-opener class="no-js-hidden" data-modal="#PopupModal-AlertCompare">
        <button
          id="Alert-Compare"
          type="button"
          aria-label="alert"
          aria-haspopup="dialog"
          class="visually-hidden"
        ></button>
      </modal-opener>

      <modal-dialog id="PopupModal-AlertCompare" class="color-background-1 compare compare-popup-modal">
        <div
          class="py-1 compare_alert__wrapper compare-popup-modal__content"
          role="dialog"
          aria-label="alert"
          aria-modal="true"
          tabindex="-1"
        >
          <button
            id="ModalClose-AlertCompare"
            type="button"
            class="compare-popup-modal__toggle"
            aria-label="{{ 'accessibility.close' | t }}"
          >
            {% render 'icon-close' %}
          </button>

          <div class="overInfo">{{ 'products.compare.compareAlert' | t }}</div>
        </div>
      </modal-dialog>

      <script>
        productCompare = true;

        const product = {
          newProductsPeriod: {{ settings.new_products_period }},
          useCompareSize: {{ settings.use_compare_size }},
          useCompareColor: {{ settings.use_compare_color }},
          textCompareSize: {{ settings.text_pr_size_option | downcase | json }},
          textCompareColor: {{ settings.text_pr_color_option | downcase | json }}
        };
      </script>

      <script src="{{ 'compare.js' | asset_url }}" defer="defer"></script>
    {%- endif -%}

    {%- if settings.wishlist_toggle and is_bv_zero_product == false -%}      <script>
        productWishlist = true;
      </script>
      <script src="{{ 'wishlist.js' | asset_url }}" defer="defer"></script>
    {%- endif -%}

  

    {% unless is_bv_zero_product %}
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll('.collection__title h2.title').forEach(function(h2) {
          const h3 = document.createElement('h3');
          h3.className = h2.className;
          h3.innerHTML = h2.innerHTML;
          h2.replaceWith(h3);
        });
      });
    </script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll('h2').forEach(el => {
          const txt = el.textContent.trim();

          const models = [
            "Interceptor 650, Custom Parts & Accessories",
            "Continental GT 650, Cafe racer mods & Parts",
            "Hunter 350 (HNTR), custom accessories & Scrambler kits",
            "Himalayan, special adventure accessories",
            "Meteor 350, cruiser upgrades and parts",
            "Super Meteor 650, modifications and special parts"
          ];

          if (models.includes(txt)) {
            const h3 = document.createElement('h3');
            h3.className = el.className;
            h3.innerHTML = el.innerHTML;
            el.replaceWith(h3);
          }
        });
      });
    </script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const uselessHeadings = [
          "Country/region",
          "Language",
          "Legal notices",
          ""
        ];

        document.querySelectorAll('h2').forEach(el => {
          const txt = el.textContent.trim();

          if (uselessHeadings.includes(txt)) {
            const span = document.createElement('span');
            span.className = el.className;
            span.innerHTML = el.innerHTML;
            el.replaceWith(span);
          }
        });
      });
    </script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const toH3 = [
          "Royal Enfield Interceptor 650 Custom Parts",
          "Royal Enfield Continental GT 650 Custom Parts",
          "Royal Enfield Hunter 350 Custom Parts"
        ];

        document.querySelectorAll('h2').forEach(el => {
          const txt = el.textContent.trim();

          if (toH3.includes(txt)) {
            const h3 = document.createElement('h3');
            h3.className = el.className;
            h3.innerHTML = el.innerHTML;
            el.replaceWith(h3);
          }
        });
      });
    </script>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        function replaceInjectedH2() {
          document.querySelectorAll('h2.visually-hidden').forEach(h2 => {
            if (
              h2.textContent.toLowerCase().includes('pays') ||
              h2.textContent.toLowerCase().includes('langue') ||
              h2.textContent.toLowerCase().includes('region') ||
              h2.textContent.toLowerCase().includes('language')
            ) {
              const span = document.createElement('span');
              span.className = h2.className;
              span.id = h2.id;
              span.textContent = h2.textContent;
              h2.replaceWith(span);
            }
          });
        }

        replaceInjectedH2();

        setTimeout(replaceInjectedH2, 500);
        setTimeout(replaceInjectedH2, 1500);
      });
    </script>

    {% endunless %}

<style>
  .bonvent-chatbase-launcher {
    position: fixed;
    right: 24px;
    bottom: {% if template.name == 'product' %}92px{% else %}24px{% endif %};
    z-index: 9998;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #111111;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  }

  .bonvent-chatbase-launcher__icon {
    width: 28px;
    height: 28px;
    display: block;
  }

  .bonvent-chatbase-launcher.is-loading {
    opacity: 0.9;
    cursor: wait;
  }

  .bonvent-chatbase-launcher.is-loading .bonvent-chatbase-launcher__icon {
    opacity: 0;
  }

  .bonvent-chatbase-launcher.is-loading::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    animation: bonvent-chatbase-spin 0.75s linear infinite;
  }

  @keyframes bonvent-chatbase-spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  body.bonvent-chatbase-loaded .bonvent-chatbase-launcher {
    display: none !important;
  }

  @media screen and (max-width: 749px) {
    .bonvent-chatbase-launcher {
      right: 18px;
      bottom: {% if template.name == 'product' %}118px{% else %}22px{% endif %};
      width: 46px;
      height: 46px;
    }

    .bonvent-chatbase-launcher__icon {
      width: 24px;
      height: 24px;
    }

    .bonvent-chatbase-launcher.is-loading::after {
      width: 20px;
      height: 20px;
    }
  }
</style>

<button
  type="button"
  class="bonvent-chatbase-launcher"
  aria-label="Open chat"
>
  <svg
    class="bonvent-chatbase-launcher__icon"
    viewBox="0 0 24 24"
    aria-hidden="true"
    focusable="false"
  >
    <path
      d="M5.5 17.5C3.9 16.1 3 14.2 3 12.1C3 7.7 7 4.2 12 4.2C17 4.2 21 7.7 21 12.1C21 16.5 17 20 12 20C10.9 20 9.8 19.8 8.8 19.5L5 20.6L5.5 17.5Z"
      fill="none"
      stroke="currentColor"
      stroke-width="1.8"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
    <path
      d="M8.2 11.8H15.8M8.2 14.2H13.4"
      fill="none"
      stroke="currentColor"
      stroke-width="1.8"
      stroke-linecap="round"
    />
  </svg>
</button>

<script>
  (function () {
    var chatbaseLoaded = false;
    var chatbaseLoading = false;
    var launcher = document.querySelector(".bonvent-chatbase-launcher");

    function bonventPositionChatbaseMobileOnly() {
      var isProduct = {{ template.name == 'product' | json }};
      var isMobile = window.matchMedia("(max-width: 749px)").matches;

      if (!isMobile) return;

      var bubbleBottom = isProduct ? "118px" : "22px";
      var panelBottom = isProduct ? "88px" : "10px";

      var bubbles = document.querySelectorAll(
        '#chatbase-bubble-button, ' +
        '.chatbase-bubble-button, ' +
        'button[id*="chatbase"], ' +
        'button[class*="chatbase"]'
      );

      bubbles.forEach(function (el) {
        el.style.setProperty("position", "fixed", "important");
        el.style.setProperty("right", "18px", "important");
        el.style.setProperty("bottom", bubbleBottom, "important");
        el.style.setProperty("z-index", "9998", "important");
      });

      var iframes = document.querySelectorAll(
        'iframe[src*="chatbase"], ' +
        'iframe[id*="chatbase"], ' +
        'iframe[title*="chatbase"], ' +
        'iframe[name*="chatbase"]'
      );

      iframes.forEach(function (iframe) {
        var rect = iframe.getBoundingClientRect();
        var isLargePanel = rect.width > 180 || rect.height > 180;

        if (!isLargePanel) {
          iframe.style.setProperty("position", "fixed", "important");
          iframe.style.setProperty("right", "18px", "important");
          iframe.style.setProperty("bottom", bubbleBottom, "important");
          iframe.style.setProperty("z-index", "9998", "important");
          return;
        }

        iframe.style.setProperty("position", "fixed", "important");
        iframe.style.setProperty("left", "10px", "important");
        iframe.style.setProperty("right", "10px", "important");
        iframe.style.setProperty("bottom", panelBottom, "important");
        iframe.style.setProperty("width", "calc(100vw - 20px)", "important");
        iframe.style.setProperty("max-width", "calc(100vw - 20px)", "important");
        iframe.style.setProperty("height", isProduct ? "calc(100dvh - 112px)" : "calc(100dvh - 20px)", "important");
        iframe.style.setProperty("max-height", isProduct ? "calc(100dvh - 112px)" : "calc(100dvh - 20px)", "important");
        iframe.style.setProperty("border-radius", "16px", "important");
        iframe.style.setProperty("overflow", "hidden", "important");
        iframe.style.setProperty("z-index", "9999", "important");
      });
    }

    function bonventStartChatbaseMobilePositionLoop() {
      bonventPositionChatbaseMobileOnly();

      setTimeout(bonventPositionChatbaseMobileOnly, 300);
      setTimeout(bonventPositionChatbaseMobileOnly, 700);
      setTimeout(bonventPositionChatbaseMobileOnly, 1200);
      setTimeout(bonventPositionChatbaseMobileOnly, 2000);
      setTimeout(bonventPositionChatbaseMobileOnly, 3500);
    }

    function bonventLoadChatbase() {
      if (chatbaseLoaded || chatbaseLoading) return;

      chatbaseLoading = true;

      if (launcher) {
        launcher.classList.add("is-loading");
        launcher.setAttribute("aria-label", "Loading chat");
      }

      window.embeddedChatbotConfig = {
        chatbotId: "K0eR9ocGKmnrpv0yR5cd6",
        domain: "www.chatbase.co"
      };

      var script = document.createElement("script");
      script.src = "https://www.chatbase.co/embed.min.js";
      script.defer = true;
      script.setAttribute("chatbotId", "K0eR9ocGKmnrpv0yR5cd6");
      script.setAttribute("domain", "www.chatbase.co");

      script.onload = function () {
        chatbaseLoaded = true;
        chatbaseLoading = false;

        if (launcher) {
          launcher.classList.remove("is-loading");
          launcher.setAttribute("aria-label", "Open chat");
        }

        document.body.classList.add("bonvent-chatbase-loaded");

        if (window.matchMedia("(max-width: 749px)").matches) {
          bonventStartChatbaseMobilePositionLoop();
        }
      };

      document.body.appendChild(script);
    }

    if (launcher) {
      launcher.addEventListener("click", function () {
        bonventLoadChatbase();
      });
    }

    if (launcher && window.matchMedia("(min-width: 750px)").matches) {
      launcher.addEventListener("pointerenter", function () {
        bonventLoadChatbase();
      }, { once: true });
    }

    window.addEventListener("resize", function () {
      if (chatbaseLoaded && window.matchMedia("(max-width: 749px)").matches) {
        bonventStartChatbaseMobilePositionLoop();
      }
    });

    if (window.visualViewport) {
      window.visualViewport.addEventListener("resize", function () {
        if (chatbaseLoaded && window.matchMedia("(max-width: 749px)").matches) {
          bonventStartChatbaseMobilePositionLoop();
        }
      });
    }

    document.addEventListener("click", function () {
      if (chatbaseLoaded && window.matchMedia("(max-width: 749px)").matches) {
        setTimeout(bonventPositionChatbaseMobileOnly, 250);
        setTimeout(bonventPositionChatbaseMobileOnly, 800);
      }
    });
  })();
</script>


    {% unless is_bv_zero_product %}
      {% render 'globo.options.custom' %}
    {% endunless %}


    {% if template.name == 'product' and is_bv_zero_product == false %}
      <style>
        

/* ================================
   BONVENT - PRODUCT H1 PREMIUM SIZE
================================ */

html body main h1.h1,
html body h1.h1 {
  font-size: 22px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  font-weight: 600 !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  text-transform: none !important;
}

@media screen and (max-width: 749px) {
  html body main h1.h1,
  html body h1.h1 {
    font-size: 16px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.03em !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
  }
}




      </style>
    {% endif %}


{% if template.name == 'product' and is_bv_zero_product == false %}
  <script src="{{ 'bonvent-product.js' | asset_url }}" defer></script>
{% endif %}


{% comment %}
<script>
  (function() {
    var loader = document.getElementById('bonvent-page-loader');
    if (!loader) return;

    function hideLoader() {
      loader.classList.add('is-hidden');

      setTimeout(function() {
        if (loader && loader.parentNode) {
          loader.parentNode.removeChild(loader);
        }
      }, 500);
    }

    window.addEventListener('load', function() {
      setTimeout(hideLoader, 180);
    });

    setTimeout(hideLoader, 900);
  })();
</script>
{% endcomment %}


  </body>
</html> 








Bonvent_Option_Builder_Continuation_Guide(1).md
Fichier

Bonvent_Option_Builder_Continuation_Guide(1).pdf
PDF

Bonvent_Option_Builder_Postman_Templates(1).md
Fichier
on avait mis un systeme globo maison tu te rapelle ?  J aimerais que les varaiantes puissent etre changé en premier dans le popup qui s ouvre avent de choisir les options. Tu comprends ??

Oui, je comprends parfaitement.

On garde ton “Globo maison” basé sur custom.bv_option_builder et snippets/bv-options-builder.liquid, avec le popup lazy pour ne pas dégrader PageSpeed. 


Le nouveau fonctionnement doit être :

La page produit s’ouvre avec la première image de galerie et aucune variante choisie.

Le client clique sur Choose options / Add to cart.

Dans le popup, le premier bloc devient :

Choose your finish
avec les vraies variantes Shopify.

Tant qu’aucune variante n’est choisie, les autres options restent masquées ou inactives.

Après sélection de la variante, les groupes du metaobject apparaissent :

waterproof cover ;

indicators ;

wiring ;

autres add-ons.

Le prix estimé du popup utilise le prix de la variante choisie.

L’ajout au panier envoie la bonne variante principale avec tous les accessoires sélectionnés.

Point important : dans le popup, on ne fera pas recharger la page lors du changement de variante. Sinon le popup se fermerait et les options seraient perdues. On mettra plutôt à jour :

mainVariantId
basePrice
availability
URL ?variant=...
avec JavaScript, sans rechargement.

Et on appliquera cela uniquement aux produits qui possèdent :

product.metafields.custom.bv_option_builder
Les autres produits avec variantes conserveront leur sélecteur classique.

Pour faire la modification proprement, envoie maintenant le contenu actuel de :

snippets/bv-options-builder.liquid
C’est le seul fichier principal à modifier en premier. Ensuite, je vérifierai si une petite adaptation de bvm-product-zero-form.liquid est nécessaire.



Texte collé(17).txt
Document


Bonvent_Reviews_System_Safe_To_Share(1).md
Fichier
ok maintenant je veux changer l apparence de mon module avis. Je veux qu il y a it la possibilité d ajouter un avis depuis la page produit. je veux qu il soit possible de cliquer sur les etoiles 5/4/3/2/1 pour voir les avis 1 etoile par exemple /  ensuite les cartes ca va pas. Carelle sont grande en hauteur pour rien car certtaiones cotioennent des photros. Je pense qu il faut plutiot faire un systeme sur des ligne. Ou il y ale nom infos datesd etc . aussi au lieu de verified je prefere verified purchase. ensuit a droitr l avis et le photos clicable pour ouvrir par mes client et endessous les reponses bonevent cropé avec un Read more (pareil pour les avis client si ils ont trop long il faut les croper)
ensuite en dessous de Customer Reviews ca serait bien de mettre un tout petit paragraphe du style que on fait se metier pour procurer du bonheur aux gens et que notre plus grande recompense c est un client satisafait une communauté qui grandie et c est pourquopi nous visons simplement l excellence. Queluqe chose comme ca .tu comprends ? aussi mon widget est 100 % maison donc ca serait top si on pouvait lui donner un super look et pas le meme look que n importe quel module d avis style Judge me . Aussi tout en haut sous le H1 il y a des etoiles et j aimerais que quand le client clique sur les etoile ca l enmenbne direct en bas de la pas auy module des avis 


Code collé(1).js
JavaScript
{% liquid
  assign bvm_rating_value = blank

  if product.metafields.reviews.rating.value.rating != blank
    assign bvm_rating_value = product.metafields.reviews.rating.value.rating
  elsif product.metafields.reviews.rating.value != blank
    assign bvm_rating_value = product.metafields.reviews.rating.value
  endif

  assign bvm_rating_count = 0

  if product.metafields.reviews.rating_count.value != blank
    assign bvm_rating_count = product.metafields.reviews.rating_count.value | plus: 0
  elsif product.metafields.reviews.rating_count != blank
    assign bvm_rating_count = product.metafields.reviews.rating_count | plus: 0
  endif

  assign bvm_rating_number = bvm_rating_value | plus: 0
  assign bvm_rating_rounded = bvm_rating_number | round
%}

<nav class="bvm-product-breadcrumb" aria-label="Breadcrumb">
  <div class="bvm-product-breadcrumb__scroll">
    <a class="bvm-product-breadcrumb__link" href="{{ routes.root_url }}">Home</a>

    {% if breadcrumb_brand_label != blank %}
      <span class="bvm-product-breadcrumb__separator" aria-hidden="true">|</span>

      {% if breadcrumb_brand_url != blank %}
        <a class="bvm-product-breadcrumb__link" href="{{ breadcrumb_brand_url }}">{{ breadcrumb_brand_label }}</a>
      {% else %}
        <span class="bvm-product-breadcrumb__current">{{ breadcrumb_brand_label }}</span>
      {% endif %}
    {% endif %}

    {% if breadcrumb_model_label != blank %}
      <span class="bvm-product-breadcrumb__separator" aria-hidden="true">|</span>

      {% if breadcrumb_model_url != blank %}
        <a class="bvm-product-breadcrumb__link" href="{{ breadcrumb_model_url }}">{{ breadcrumb_model_label }}</a>
      {% else %}
        <span class="bvm-product-breadcrumb__current">{{ breadcrumb_model_label }}</span>
      {% endif %}
    {% endif %}
  </div>
</nav>

<h1 class="bvm-zero-product__title">{{ product.title }}</h1>

{% if bvm_rating_value != blank and bvm_rating_count > 0 %}
  <div class="bvm-zero-rating" aria-label="{{ bvm_rating_number | round: 1 }} out of 5 stars based on {{ bvm_rating_count }} reviews">
    <span class="bvm-zero-rating__stars" aria-hidden="true">
      {% for i in (1..5) %}
        <span class="bvm-zero-rating__star{% if i <= bvm_rating_rounded %} is-filled{% endif %}">★</span>
      {% endfor %}
    </span>

    <span class="bvm-zero-rating__text">
      {{ bvm_rating_number | round: 1 }}/5 · {{ bvm_rating_count }}
      {% if bvm_rating_count == 1 %}review{% else %}reviews{% endif %}
    </span>
  </div>
{% endif %}

{% if product.metafields.custom.short_description != blank %}
  <div class="bvm-zero-product__short">
    {{ product.metafields.custom.short_description }}
  </div>
{% endif %}


Code collé.css
Fichier

ok c est parfait mais il y a un bug maintenant sur les produducts recommmendation regarde (la meme sur ordi et tel) ce n est plus un carousell horizontal . Aussi je pense que il faut peu etre pas afficher tous les avis dans le modules. Peut etre afficher juste les 8 preimer et ensuite mettre un view more review ou quelque chose comme ca ou le client peut deplier mais attention google et AI doivent voir tous les avis. 

entre customer proof et le titre des review c est possible de mettre le loigo bonvent ? il est dans les assets . Il faut que ce soit hyper leger. 

non le logo doit etre affiché au dessu sde la n,ote 5.0

plus petit et plus haut le logo (aligné avec la prmeier ligne 5 etoile)

dans les rich result j ai toujours cette histire de shipping manquant ur tous les produit. Il y a un champ a remplir ou quoi ?

ici ? 

Capture d'écran 2026-07-13 124838.png
Capture d'écran 2026-07-13 124828.png
Capture d'écran 2026-07-13 124818.png
Capture d'écran 2026-07-13 124809.png
Capture d'écran 2026-07-13 124804.png
Capture d'écran 2026-07-13 124751.png
Capture d'écran 2026-07-13 124739.png
Capture d'écran 2026-07-13 124720.png
Capture d'écran 2026-07-13 124715.png
Capture d'écran 2026-07-13 124708.png
Capture d'écran 2026-07-13 124702.png
Capture d'écran 2026-07-13 124655.png
Capture d'écran 2026-07-13 124650.png
Capture d'écran 2026-07-13 124645.png
Capture d'écran 2026-07-13 124640.png
normalement tu as toutes les zones les pays et les tarifs. le delais de preparation c est 1 a 2  jours temps DHL 24h a 5 jours / Coliimo france 1 a 3 jourqs, col:issomo internation 2 a 5 jours / tous les produits sont en stock donc expedition sous 1 / 2 jours

Réfléchi pendant 3m 24s
Oui, maintenant j’ai assez de données pour construire la politique d’expédition complète.

Je vais utiliser :

préparation : 1 à 2 jours ouvrés ;

DHL Express : 1 à 5 jours ouvrés ;

Colissimo France : 1 à 3 jours ouvrés ;

Colissimo international : 2 à 5 jours ouvrés ;

les zones France, Europe 1, Europe 5, USA 6, Monde 7 et Monde 8 ;

tous les paliers de poids et tarifs visibles sur tes captures ;

Colissimo Pickup comme service distinct de livraison en point relais.

Google permet précisément de définir des tarifs selon le poids avec ShippingConditions, puis de faire référencer cette politique globale par chaque Offer. Les produits ne contiendront donc qu’une toute petite référence, tandis que les centaines de règles seront définies une seule fois sur la page de politique d’expédition. 

Pour garder le site léger, l’architecture sera :

/policies/shipping-policy
└── Organization
    └── hasShippingService
        ├── Colissimo France
        ├── Colissimo Pickup France
        ├── Colissimo Europe
        └── DHL Express Worldwide
Puis dans chaque variante produit :

"shippingDetails": [
  {
    "@type": "OfferShippingDetails",
    "hasShippingService": {
      "@id": "...#colissimo-france"
    }
  },
  {
    "@type": "OfferShippingDetails",
    "hasShippingService": {
      "@id": "...#dhl-express"
    }
  }
]
Google recommande ce système de référence vers une politique globale, plutôt que de recopier toutes les règles dans chaque produit. 

Prochaine étape
Envoie-moi maintenant les versions actuelles de :

layout/theme.liquid
sections/bvm-main-product-zero.liquid
Je te préparerai les deux fichiers corrigés. Cela supprimera l’avertissement facultatif shippingDetails sans alourdir chaque page produit.



Texte collé(18).txt
Document

Texte collé (2)(2).txt
Document
attentio il faut surtout pas que ca modifie les performancve ou que ca alourdisse la page

Réfléchi pendant 8m 11s
C’est prêt. La solution utilise la méthode recommandée par Google : une politique d’expédition globale sous Organization, puis une simple référence hasShippingService dans chaque Offer. 


Fais exactement ceci
Travaille d’abord sur la copie de ton thème.

1. Crée ce nouveau snippet
Dans :

Shopify
→ Boutique en ligne
→ Thèmes
→ Modifier le code
→ Snippets
→ Ajouter un nouveau snippet
Nom :

bvm-shipping-policy-schema
Puis colle entièrement ce fichier :


2. Remplace la section produit
Remplace entièrement :

sections/bvm-main-product-zero.liquid
par :


3. Remplace le layout
Remplace entièrement :

layout/theme.liquid
par :


Ces fichiers ont été construits depuis tes versions actuelles. 

 


Impact sur les performances
Sur les pages produit :

aucun nouveau JavaScript ;

aucun CSS ;

aucune image ;

aucune application ;

aucun appel réseau ;

seulement une petite référence JSON-LD par Offer ;

le poids Shopify est ajouté au schema seulement lorsqu’il est renseigné.

Le bloc complet des tarifs fait environ 71 Ko, mais il est chargé uniquement sur :

/policies/shipping-policy
Il n’est jamais chargé sur les pages produit.

Politique représentée
Le schema contient :

préparation : 1 à 2 jours ouvrés ;

Colissimo France : 1 à 3 jours ouvrés ;

Colissimo international : 2 à 5 jours ouvrés ;

DHL Express : 1 à 5 jours ouvrés ;

tous les paliers de poids et tarifs fournis ;

France ;

Europe Zone 1 ;

Europe Zone 5 ;

Canada, Mexique et États-Unis ;

Monde Zone 7 ;

Monde Zone 8.

J’ai volontairement utilisé la livraison standard à domicile :

France → Colissimo
Europe 1 et 5 → Colissimo
Zones 6, 7 et 8 → DHL Express
Le tarif Colissimo Pickup n’est pas déclaré comme livraison standard, car Google pourrait sinon afficher le prix du point relais comme prix normal de livraison à domicile.

Vérification
Après sauvegarde :

ouvre la page de politique d’expédition ;

vérifie qu’elle fonctionne normalement ;

ouvre un produit dans le Rich Results Test ;

regarde Product → Offer → shippingDetails.

Tu dois maintenant voir :

OfferShippingDetails
└── hasShippingService
L’avertissement jaune shippingDetails manquant devrait disparaître. Google précise que la référence vers la politique globale peut se trouver sur une autre page et doit être faite uniquement avec son @id, ce que le nouveau code applique. 
 


 la page policies ca doit etre comme ca ??

dans les rich rsult c est bon mais j ai toujours une toute petite erreur 

sur mes page collection mainetannt il y a un petit bug au noiveau du breadcrumb. Je veux le remplacer par le meme breadcrum qu on a fait pour mes produits. Propre et aussi il faut qu on regarde le template de mes pages collection voir si tout est ok dedans les shema etc pour le SEO 


theme_export__bonventmotorbikes-com-test-sans-les-apps__13JUL2026-0721am.zip
Archive zip
voila le fichier ZIP, je veux aussi que le bas de page soient exactrement pareil que sur mes fiches produits, meme style, meme couleur etc ... il faut aussi regarder si il y a pas du vieux JS qui sert a rien. Essayer de faire un epage collection tres performante. Mais attention je veux pas y apasser la journéee donc on fait que les choses necessaires. mes pages collection sont maintrenant un peu moins performanates qeu mes pages produits. donc il faut essayer de voir si on peut pas cleanere faciuelement des choses 


je fais quoi maintenant ??


Texte collé(19).txt
Document


Texte collé(20).txt
Document

il y a une erreur sur la section 

tous les accessoires utilisé ici


Interceptor 650 Desert Scrambler Build _ Bonvent.pdf
PDF
la mise en page est bizare et les photos des details ne s faiichent pas . regarde

Réfléchi pendant 3m 31s
Oui, je vois clairement le problème dans le PDF :

seule la photo principale s’affiche ;

les emplacements des photos secondaires disparaissent complètement, donc le texte devient un long bloc continu ;

le carrousel produit fonctionne, mais les cartes sont un peu trop larges ;

la ligne d’informations Build style / Approach devient déséquilibrée avec le texte long A Scrambler Build for Everyday Riding. 


La cause vient du template V2 : j’avais récupéré les listes d’images avec des index directs comme :

bvm_detail_images[0]
alors que la liste de produits était parcourue avec une boucle. Les produits apparaissent donc, mais les images renvoient vide dans ce rendu.

Correctif

Remplace uniquement ces deux fichiers :

sections/bvm-build-article.liquid
assets/bvm-build-article.css
Fichiers directs :



Ce que le correctif change
lecture des 2 photos complètes avec une vraie boucle Shopify ;

lecture des 4 photos de détails avec une vraie boucle Shopify ;

les images réapparaissent aux marqueurs déjà présents dans ton article ;

les cartes du carrousel sont légèrement plus petites ;

les colonnes Motorcycle et Approach ont davantage de place ;

l’export PDF coupe moins les blocs importants.

Tu ne dois pas :

recoller le contenu HTML ;

recréer les metafields ;

resélectionner les produits ;

resélectionner les images.

Après remplacement, fais :

Ctrl + Shift + R
Petit changement dans l’article
Dans le metafield Build approach, remplace :

A Scrambler Build for Everyday Riding
par :

Plug & play · fully reversible
A Scrambler Build for Everyday Riding ressemble davantage à un H2 qu’à une donnée technique et prend trop de place dans la petite ligne d’informations.

Après le correctif, l’ordre devrait devenir :

Photo principale

Texte
Photo complète 2

Texte sur le kit arrière
Photo détail 1

Texte sur le garde-boue
Photo détail 2

Texte sur le cockpit
Photo détail 3

Texte sur les panneaux et caches moteur
Photo détail 4

Carrousel produits

Texte
Photo complète 3



pk les images sont carré c est pas beau 

Réfléchi pendant 35s
Parce que j’avais forcé les photos de détail en format 1:1 dans le CSS pour les standardiser. Tu as raison : dans un article éditorial premium, ce format carré donne trop un effet catalogue.

Je les ai passées en 4:3 horizontal, plus larges et plus naturelles dans le texte.


Remplace uniquement :

assets/bvm-build-article.css
Fichier direct :


Le nouveau rendu sera :

photos complètes de la moto : 3:2 horizontal ;

photos de détails : 4:3 horizontal ;

cartes produits : 1:1 carré, ce qui reste logique pour un carrousel e-commerce.

Après remplacement :

Ctrl + Shift + R
Les photos de détails seront aussi un peu plus larges : 780px maximum au lieu de 680px. 


les photos sont cropés je ne veux pas quelle soienet cropés, garde le ratio original stp

Oui, le crop venait encore des ratios forcés et de object-fit: cover.

J’ai retiré ces contraintes pour les images éditoriales. Elles garderont maintenant leur ratio original, sans découpe.


Remplace uniquement :

assets/bvm-build-article.css
Fichier direct :


Ce correctif applique :

aspect-ratio: auto;
height: auto;
object-fit: contain;
Cela concerne :

la grande image principale ;

les deux autres photos complètes ;

les photos de détails.

Les cartes produits restent carrées, car elles appartiennent au carrousel e-commerce.

Après remplacement :

Ctrl + Shift + R
Les images ne seront plus cropées. 


Bibliothèque
/
Seo bonvent
/
bvm-build-article.css


/* ==========================================================
   BVM Build Article V2
   Images are inserted inside the story. Products use one
   native horizontal carousel on desktop and mobile.
========================================================== */

.bvm-build-article {
  background: #fff;
  color: #111;
  padding: 18px 0 76px;
}

.bvm-build-article__shell {
  width: min(100% - 48px, 940px);
  margin: 0 auto;
}

.bvm-build-article__breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  overflow-x: auto;
  padding: 0 0 38px;
  white-space: nowrap;
  scrollbar-width: none;
  color: rgba(0, 0, 0, 0.48);
  font-size: 12px;
  line-height: 1.35;
}

.bvm-build-article__breadcrumb::-webkit-scrollbar,
.bvm-build-article__product-viewport::-webkit-scrollbar {
  display: none;
}

.bvm-build-article__breadcrumb a,
.bvm-build-article__breadcrumb span {
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
}

.bvm-build-article__breadcrumb a:hover {
  color: #111;
}

.bvm-build-article__header {
  max-width: 850px;
}

.bvm-build-article__eyebrow,
.bvm-build-article__section-eyebrow {
  margin: 0 0 14px;
  color: rgba(0, 0, 0, 0.48);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.bvm-build-article__title {
  margin: 0;
  max-width: 900px;
  color: #111;
  font-size: clamp(36px, 5.2vw, 62px);
  line-height: 1.01;
  font-weight: 590;
  letter-spacing: -0.052em;
}

.bvm-build-article__lead {
  max-width: 760px;
  margin-top: 20px;
  color: rgba(0, 0, 0, 0.61);
  font-size: 17px;
  line-height: 1.66;
}

.bvm-build-article__lead p {
  margin: 0;
}

.bvm-build-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 23px;
  color: rgba(0, 0, 0, 0.47);
  font-size: 12px;
  line-height: 1.4;
}

.bvm-build-article__meta a {
  color: inherit;
  text-decoration-color: rgba(0, 0, 0, 0.26);
  text-underline-offset: 3px;
}

.bvm-build-article__hero {
  width: min(100% - 48px, 1360px);
  margin: 42px auto 0;
}

.bvm-build-article__hero-frame,
.bvm-build-article__inline-media,
.bvm-build-article__product-media {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  background: #ececec;
}

.bvm-build-article__hero-frame {
  aspect-ratio: 3 / 2;
  border-radius: 18px;
}

.bvm-build-article__hero img,
.bvm-build-article__inline-media img,
.bvm-build-article__product-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bvm-build-article__facts {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.58fr) minmax(0, 0.9fr) minmax(0, 1.42fr);
  margin-top: 46px;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.bvm-build-article__facts div {
  min-width: 0;
  padding: 18px 20px;
  border-right: 1px solid rgba(0, 0, 0, 0.09);
}

.bvm-build-article__facts div:first-child {
  padding-left: 0;
}

.bvm-build-article__facts div:last-child {
  border-right: 0;
}

.bvm-build-article__facts span,
.bvm-build-article__facts strong {
  display: block;
}

.bvm-build-article__facts span {
  margin-bottom: 5px;
  color: rgba(0, 0, 0, 0.43);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.bvm-build-article__facts strong {
  color: rgba(0, 0, 0, 0.72);
  font-size: 12.5px;
  line-height: 1.38;
  font-weight: 600;
}

.bvm-build-article__content {
  max-width: 780px;
  margin: 58px auto 0;
  color: rgba(0, 0, 0, 0.67);
  font-size: 16px;
  line-height: 1.78;
}

.bvm-build-article__content > *:first-child {
  margin-top: 0;
}

.bvm-build-article__content > *:last-child {
  margin-bottom: 0;
}

.bvm-build-article__content h2 {
  margin: 58px 0 18px;
  color: #7a542e;
  font-size: clamp(25px, 3vw, 32px);
  line-height: 1.15;
  font-weight: 610;
  letter-spacing: -0.035em;
}

.bvm-build-article__content h3 {
  margin: 34px 0 13px;
  color: rgba(0, 0, 0, 0.78);
  font-size: 20px;
  line-height: 1.24;
  font-weight: 610;
  letter-spacing: -0.025em;
}

.bvm-build-article__content p {
  margin: 0 0 20px;
}

.bvm-build-article__content ul,
.bvm-build-article__content ol {
  margin: 0 0 24px;
  padding-left: 22px;
}

.bvm-build-article__content li {
  margin-bottom: 9px;
}

.bvm-build-article__content strong {
  color: rgba(0, 0, 0, 0.82);
  font-weight: 650;
}

.bvm-build-article__content a,
.bvm-build-article__faq-content a {
  color: #111;
  text-decoration-color: rgba(17, 17, 17, 0.42);
  text-underline-offset: 4px;
}

.bvm-build-article__content blockquote {
  margin: 36px 0;
  padding: 24px 28px;
  border-left: 3px solid #7a542e;
  background: hsla(0, 0%, 97%, 1);
  color: rgba(0, 0, 0, 0.65);
  font-size: 18px;
  line-height: 1.58;
}

.bvm-build-article__content hr[id^="bvm-"] {
  display: none;
}

.bvm-build-article__inline-media {
  margin-top: 42px;
  margin-bottom: 48px;
  border-radius: 16px;
}

.bvm-build-article__inline-media--full {
  width: min(940px, calc(100vw - 48px));
  margin-left: 50%;
  transform: translateX(-50%);
  aspect-ratio: 3 / 2;
}

.bvm-build-article__inline-media--detail {
  width: min(780px, 100%);
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 4 / 3;
}

.bvm-build-article__parts {
  width: min(940px, calc(100vw - 48px));
  margin: 76px 50% 72px;
  transform: translateX(-50%);
}

.bvm-build-article__parts-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.bvm-build-article__section-head {
  max-width: 730px;
}

.bvm-build-article__section-head h2 {
  margin: 0;
  color: #7a542e;
  font-size: 27px;
  line-height: 1.16;
  font-weight: 610;
  letter-spacing: -0.035em;
}

.bvm-build-article__section-head > p:last-child:not(.bvm-build-article__section-eyebrow) {
  margin: 10px 0 0;
  color: rgba(0, 0, 0, 0.51);
  font-size: 14px;
  line-height: 1.62;
}

.bvm-build-article__carousel-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.bvm-build-article__carousel-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}

.bvm-build-article__carousel-controls button:hover:not(:disabled) {
  border-color: #7a542e;
  color: #7a542e;
}

.bvm-build-article__carousel-controls button:disabled {
  opacity: 0.28;
  cursor: default;
}

.bvm-build-article__product-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 1px 8px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.bvm-build-article__product-viewport:focus-visible {
  outline: 2px solid rgba(122, 84, 46, 0.5);
  outline-offset: 6px;
  border-radius: 12px;
}

.bvm-build-article__product-track {
  display: flex;
  gap: 18px;
  width: max-content;
}

.bvm-build-article__product-card {
  flex: 0 0 252px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.075);
  border-radius: 16px;
  background: #fff;
  scroll-snap-align: start;
}

.bvm-build-article__product-media {
  aspect-ratio: 1 / 1;
}

.bvm-build-article__product-media img {
  transition: transform 240ms ease;
}

.bvm-build-article__product-media:hover img {
  transform: scale(1.025);
}

.bvm-build-article__product-copy {
  padding: 16px 17px 18px;
}

.bvm-build-article__product-copy h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.bvm-build-article__product-copy h3 a {
  color: #111;
  text-decoration: none;
}

.bvm-build-article__product-copy p {
  margin: 8px 0 0;
  color: rgba(0, 0, 0, 0.55);
  font-size: 13px;
  line-height: 1.3;
}

.bvm-build-article__product-link {
  display: inline-block;
  margin-top: 14px;
  color: #7a542e;
  font-size: 12px;
  line-height: 1;
  font-weight: 650;
  text-decoration: none;
}

.bvm-build-article__faq {
  margin-top: 78px;
  padding: 42px 46px;
  border-radius: 18px;
  background: hsla(0, 0%, 97%, 1);
}

.bvm-build-article__faq-content {
  margin-top: 24px;
  color: rgba(0, 0, 0, 0.63);
  font-size: 14.5px;
  line-height: 1.72;
}

.bvm-build-article__faq-content h3 {
  margin: 28px 0 10px;
  color: rgba(0, 0, 0, 0.74);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 610;
}

.bvm-build-article__faq-content h3:first-child {
  margin-top: 0;
}

.bvm-build-article__faq-content p {
  margin: 0 0 16px;
}

.bvm-build-article__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 34px;
  margin-top: 82px;
  padding: 32px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 18px;
  background: hsla(0, 0%, 97%, 1);
}

.bvm-build-article__cta h2 {
  margin: 0;
  color: #111;
  font-size: 25px;
  line-height: 1.17;
  font-weight: 610;
  letter-spacing: -0.035em;
}

.bvm-build-article__cta p:not(.bvm-build-article__section-eyebrow) {
  max-width: 650px;
  margin: 10px 0 0;
  color: rgba(0, 0, 0, 0.53);
  font-size: 14px;
  line-height: 1.62;
}

.bvm-build-article__cta-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 180px;
}

.bvm-build-article__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  padding: 11px 18px;
  border: 1px solid #111;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 650;
  text-decoration: none;
}

.bvm-build-article__button--primary {
  background: #111;
  color: #fff;
}

.bvm-build-article__button--primary:hover {
  border-color: #7a542e;
  background: #7a542e;
  color: #fff;
}

.bvm-build-article__button--secondary {
  background: transparent;
  color: #111;
}

.bvm-build-article__button--secondary:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #111;
}

@media (max-width: 749px) {
  .bvm-build-article {
    padding-top: 14px;
    padding-bottom: 58px;
  }

  .bvm-build-article__shell {
    width: calc(100% - 44px);
  }

  .bvm-build-article__breadcrumb {
    padding-bottom: 30px;
    font-size: 11px;
  }

  .bvm-build-article__eyebrow,
  .bvm-build-article__section-eyebrow {
    margin-bottom: 12px;
    font-size: 9.5px;
    letter-spacing: 0.12em;
  }

  .bvm-build-article__title {
    font-size: clamp(32px, 10vw, 43px);
    line-height: 1.04;
  }

  .bvm-build-article__lead {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.65;
  }

  .bvm-build-article__meta {
    margin-top: 19px;
    font-size: 11.5px;
  }

  .bvm-build-article__hero {
    width: 100%;
    margin-top: 34px;
  }

  .bvm-build-article__hero-frame {
    border-radius: 0;
  }

  .bvm-build-article__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 38px;
  }

  .bvm-build-article__facts div {
    padding: 15px 12px;
  }

  .bvm-build-article__facts div:nth-child(2n) {
    border-right: 0;
  }

  .bvm-build-article__facts div:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  }

  .bvm-build-article__facts div:first-child {
    padding-left: 0;
  }

  .bvm-build-article__content {
    margin-top: 48px;
    font-size: 15px;
    line-height: 1.75;
  }

  .bvm-build-article__content h2 {
    margin-top: 48px;
    font-size: 24px;
  }

  .bvm-build-article__content h3 {
    margin-top: 30px;
    font-size: 18px;
  }

  .bvm-build-article__content blockquote {
    margin: 30px 0;
    padding: 22px;
    font-size: 16px;
  }

  .bvm-build-article__inline-media {
    margin-top: 32px;
    margin-bottom: 38px;
    border-radius: 14px;
  }

  .bvm-build-article__inline-media--full {
    width: calc(100vw - 44px);
  }

  .bvm-build-article__parts {
    width: calc(100vw - 44px);
    margin-top: 62px;
    margin-bottom: 60px;
  }

  .bvm-build-article__parts-top {
    align-items: flex-end;
    gap: 14px;
  }

  .bvm-build-article__section-head h2 {
    font-size: 23px;
  }

  .bvm-build-article__carousel-controls {
    gap: 6px;
  }

  .bvm-build-article__carousel-controls button {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .bvm-build-article__product-track {
    gap: 14px;
  }

  .bvm-build-article__product-card {
    flex-basis: min(78vw, 310px);
  }

  .bvm-build-article__faq {
    margin-top: 66px;
    padding: 30px 22px;
  }

  .bvm-build-article__cta {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 66px;
    padding: 28px 22px;
  }

  .bvm-build-article__cta h2 {
    font-size: 22px;
  }

  .bvm-build-article__cta-actions {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bvm-build-article__product-media img {
    transition: none;
  }

  .bvm-build-article__product-viewport {
    scroll-behavior: auto;
  }
}

@media print {
  .bvm-build-article__facts,
  .bvm-build-article__inline-media,
  .bvm-build-article__product-card,
  .bvm-build-article__faq,
  .bvm-build-article__cta {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .bvm-build-article__product-viewport {
    overflow: visible;
  }

  .bvm-build-article__product-track {
    flex-wrap: wrap;
    width: auto;
  }

  .bvm-build-article__carousel-controls {
    display: none;
  }
}



/* ==========================================================
   V5 — Preserve original editorial image ratios
========================================================== */

.bvm-build-article__hero-frame,
.bvm-build-article__inline-media--full,
.bvm-build-article__inline-media--detail {
  aspect-ratio: auto;
}

.bvm-build-article__hero img,
.bvm-build-article__inline-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

Bibliothèque
/
Seo bonvent
/
bvm-build-article.css


/* ==========================================================
   BVM Build Article V2
   Images are inserted inside the story. Products use one
   native horizontal carousel on desktop and mobile.
========================================================== */

.bvm-build-article {
  background: #fff;
  color: #111;
  padding: 18px 0 76px;
}

.bvm-build-article__shell {
  width: min(100% - 48px, 940px);
  margin: 0 auto;
}

.bvm-build-article__breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  overflow-x: auto;
  padding: 0 0 38px;
  white-space: nowrap;
  scrollbar-width: none;
  color: rgba(0, 0, 0, 0.48);
  font-size: 12px;
  line-height: 1.35;
}

.bvm-build-article__breadcrumb::-webkit-scrollbar,
.bvm-build-article__product-viewport::-webkit-scrollbar {
  display: none;
}

.bvm-build-article__breadcrumb a,
.bvm-build-article__breadcrumb span {
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
}

.bvm-build-article__breadcrumb a:hover {
  color: #111;
}

.bvm-build-article__header {
  max-width: 850px;
}

.bvm-build-article__eyebrow,
.bvm-build-article__section-eyebrow {
  margin: 0 0 14px;
  color: rgba(0, 0, 0, 0.48);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.bvm-build-article__title {
  margin: 0;
  max-width: 900px;
  color: #111;
  font-size: clamp(36px, 5.2vw, 62px);
  line-height: 1.01;
  font-weight: 590;
  letter-spacing: -0.052em;
}

.bvm-build-article__lead {
  max-width: 760px;
  margin-top: 20px;
  color: rgba(0, 0, 0, 0.61);
  font-size: 17px;
  line-height: 1.66;
}

.bvm-build-article__lead p {
  margin: 0;
}

.bvm-build-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 23px;
  color: rgba(0, 0, 0, 0.47);
  font-size: 12px;
  line-height: 1.4;
}

.bvm-build-article__meta a {
  color: inherit;
  text-decoration-color: rgba(0, 0, 0, 0.26);
  text-underline-offset: 3px;
}

.bvm-build-article__hero {
  width: min(100% - 48px, 1360px);
  margin: 42px auto 0;
}

.bvm-build-article__hero-frame,
.bvm-build-article__inline-media,
.bvm-build-article__product-media {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  background: #ececec;
}

.bvm-build-article__hero-frame {
  aspect-ratio: 3 / 2;
  border-radius: 18px;
}

.bvm-build-article__hero img,
.bvm-build-article__inline-media img,
.bvm-build-article__product-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bvm-build-article__facts {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.58fr) minmax(0, 0.9fr) minmax(0, 1.42fr);
  margin-top: 46px;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.bvm-build-article__facts div {
  min-width: 0;
  padding: 18px 20px;
  border-right: 1px solid rgba(0, 0, 0, 0.09);
}

.bvm-build-article__facts div:first-child {
  padding-left: 0;
}

.bvm-build-article__facts div:last-child {
  border-right: 0;
}

.bvm-build-article__facts span,
.bvm-build-article__facts strong {
  display: block;
}

.bvm-build-article__facts span {
  margin-bottom: 5px;
  color: rgba(0, 0, 0, 0.43);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.bvm-build-article__facts strong {
  color: rgba(0, 0, 0, 0.72);
  font-size: 12.5px;
  line-height: 1.38;
  font-weight: 600;
}

.bvm-build-article__content {
  max-width: 780px;
  margin: 58px auto 0;
  color: rgba(0, 0, 0, 0.67);
  font-size: 16px;
  line-height: 1.78;
}

.bvm-build-article__content > *:first-child {
  margin-top: 0;
}

.bvm-build-article__content > *:last-child {
  margin-bottom: 0;
}

.bvm-build-article__content h2 {
  margin: 58px 0 18px;
  color: #7a542e;
  font-size: clamp(25px, 3vw, 32px);
  line-height: 1.15;
  font-weight: 610;
  letter-spacing: -0.035em;
}

.bvm-build-article__content h3 {
  margin: 34px 0 13px;
  color: rgba(0, 0, 0, 0.78);
  font-size: 20px;
  line-height: 1.24;
  font-weight: 610;
  letter-spacing: -0.025em;
}

.bvm-build-article__content p {
  margin: 0 0 20px;
}

.bvm-build-article__content ul,
.bvm-build-article__content ol {
  margin: 0 0 24px;
  padding-left: 22px;
}

.bvm-build-article__content li {
  margin-bottom: 9px;
}

.bvm-build-article__content strong {
  color: rgba(0, 0, 0, 0.82);
  font-weight: 650;
}

.bvm-build-article__content a,
.bvm-build-article__faq-content a {
  color: #111;
  text-decoration-color: rgba(17, 17, 17, 0.42);
  text-underline-offset: 4px;
}

.bvm-build-article__content blockquote {
  margin: 36px 0;
  padding: 24px 28px;
  border-left: 3px solid #7a542e;
  background: hsla(0, 0%, 97%, 1);
  color: rgba(0, 0, 0, 0.65);
  font-size: 18px;
  line-height: 1.58;
}

.bvm-build-article__content hr[id^="bvm-"] {
  display: none;
}

.bvm-build-article__inline-media {
  margin-top: 42px;
  margin-bottom: 48px;
  border-radius: 16px;
}

.bvm-build-article__inline-media--full {
  width: min(940px, calc(100vw - 48px));
  margin-left: 50%;
  transform: translateX(-50%);
  aspect-ratio: 3 / 2;
}

.bvm-build-article__inline-media--detail {
  width: min(780px, 100%);
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 4 / 3;
}

.bvm-build-article__parts {
  width: min(940px, calc(100vw - 48px));
  margin: 76px 50% 72px;
  transform: translateX(-50%);
}

.bvm-build-article__parts-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.bvm-build-article__section-head {
  max-width: 730px;
}

.bvm-build-article__section-head h2 {
  margin: 0;
  color: #7a542e;
  font-size: 27px;
  line-height: 1.16;
  font-weight: 610;
  letter-spacing: -0.035em;
}

.bvm-build-article__section-head > p:last-child:not(.bvm-build-article__section-eyebrow) {
  margin: 10px 0 0;
  color: rgba(0, 0, 0, 0.51);
  font-size: 14px;
  line-height: 1.62;
}

.bvm-build-article__carousel-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.bvm-build-article__carousel-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}

.bvm-build-article__carousel-controls button:hover:not(:disabled) {
  border-color: #7a542e;
  color: #7a542e;
}

.bvm-build-article__carousel-controls button:disabled {
  opacity: 0.28;
  cursor: default;
}

.bvm-build-article__product-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 1px 8px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.bvm-build-article__product-viewport:focus-visible {
  outline: 2px solid rgba(122, 84, 46, 0.5);
  outline-offset: 6px;
  border-radius: 12px;
}

.bvm-build-article__product-track {
  display: flex;
  gap: 18px;
  width: max-content;
}

.bvm-build-article__product-card {
  flex: 0 0 252px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.075);
  border-radius: 16px;
  background: #fff;
  scroll-snap-align: start;
}

.bvm-build-article__product-media {
  aspect-ratio: 1 / 1;
}

.bvm-build-article__product-media img {
  transition: transform 240ms ease;
}

.bvm-build-article__product-media:hover img {
  transform: scale(1.025);
}

.bvm-build-article__product-copy {
  padding: 16px 17px 18px;
}

.bvm-build-article__product-copy h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.bvm-build-article__product-copy h3 a {
  color: #111;
  text-decoration: none;
}

.bvm-build-article__product-copy p {
  margin: 8px 0 0;
  color: rgba(0, 0, 0, 0.55);
  font-size: 13px;
  line-height: 1.3;
}

.bvm-build-article__product-link {
  display: inline-block;
  margin-top: 14px;
  color: #7a542e;
  font-size: 12px;
  line-height: 1;
  font-weight: 650;
  text-decoration: none;
}

.bvm-build-article__faq {
  margin-top: 78px;
  padding: 42px 46px;
  border-radius: 18px;
  background: hsla(0, 0%, 97%, 1);
}

.bvm-build-article__faq-content {
  margin-top: 24px;
  color: rgba(0, 0, 0, 0.63);
  font-size: 14.5px;
  line-height: 1.72;
}

.bvm-build-article__faq-content h3 {
  margin: 28px 0 10px;
  color: rgba(0, 0, 0, 0.74);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 610;
}

.bvm-build-article__faq-content h3:first-child {
  margin-top: 0;
}

.bvm-build-article__faq-content p {
  margin: 0 0 16px;
}

.bvm-build-article__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 34px;
  margin-top: 82px;
  padding: 32px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 18px;
  background: hsla(0, 0%, 97%, 1);
}

.bvm-build-article__cta h2 {
  margin: 0;
  color: #111;
  font-size: 25px;
  line-height: 1.17;
  font-weight: 610;
  letter-spacing: -0.035em;
}

.bvm-build-article__cta p:not(.bvm-build-article__section-eyebrow) {
  max-width: 650px;
  margin: 10px 0 0;
  color: rgba(0, 0, 0, 0.53);
  font-size: 14px;
  line-height: 1.62;
}

.bvm-build-article__cta-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 180px;
}

.bvm-build-article__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  padding: 11px 18px;
  border: 1px solid #111;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 650;
  text-decoration: none;
}

.bvm-build-article__button--primary {
  background: #111;
  color: #fff;
}

.bvm-build-article__button--primary:hover {
  border-color: #7a542e;
  background: #7a542e;
  color: #fff;
}

.bvm-build-article__button--secondary {
  background: transparent;
  color: #111;
}

.bvm-build-article__button--secondary:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #111;
}

@media (max-width: 749px) {
  .bvm-build-article {
    padding-top: 14px;
    padding-bottom: 58px;
  }

  .bvm-build-article__shell {
    width: calc(100% - 44px);
  }

  .bvm-build-article__breadcrumb {
    padding-bottom: 30px;
    font-size: 11px;
  }

  .bvm-build-article__eyebrow,
  .bvm-build-article__section-eyebrow {
    margin-bottom: 12px;
    font-size: 9.5px;
    letter-spacing: 0.12em;
  }

  .bvm-build-article__title {
    font-size: clamp(32px, 10vw, 43px);
    line-height: 1.04;
  }

  .bvm-build-article__lead {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.65;
  }

  .bvm-build-article__meta {
    margin-top: 19px;
    font-size: 11.5px;
  }

  .bvm-build-article__hero {
    width: 100%;
    margin-top: 34px;
  }

  .bvm-build-article__hero-frame {
    border-radius: 0;
  }

  .bvm-build-article__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 38px;
  }

  .bvm-build-article__facts div {
    padding: 15px 12px;
  }

  .bvm-build-article__facts div:nth-child(2n) {
    border-right: 0;
  }

  .bvm-build-article__facts div:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  }

  .bvm-build-article__facts div:first-child {
    padding-left: 0;
  }

  .bvm-build-article__content {
    margin-top: 48px;
    font-size: 15px;
    line-height: 1.75;
  }

  .bvm-build-article__content h2 {
    margin-top: 48px;
    font-size: 24px;
  }

  .bvm-build-article__content h3 {
    margin-top: 30px;
    font-size: 18px;
  }

  .bvm-build-article__content blockquote {
    margin: 30px 0;
    padding: 22px;
    font-size: 16px;
  }

  .bvm-build-article__inline-media {
    margin-top: 32px;
    margin-bottom: 38px;
    border-radius: 14px;
  }

  .bvm-build-article__inline-media--full {
    width: calc(100vw - 44px);
  }

  .bvm-build-article__parts {
    width: calc(100vw - 44px);
    margin-top: 62px;
    margin-bottom: 60px;
  }

  .bvm-build-article__parts-top {
    align-items: flex-end;
    gap: 14px;
  }

  .bvm-build-article__section-head h2 {
    font-size: 23px;
  }

  .bvm-build-article__carousel-controls {
    gap: 6px;
  }

  .bvm-build-article__carousel-controls button {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .bvm-build-article__product-track {
    gap: 14px;
  }

  .bvm-build-article__product-card {
    flex-basis: min(78vw, 310px);
  }

  .bvm-build-article__faq {
    margin-top: 66px;
    padding: 30px 22px;
  }

  .bvm-build-article__cta {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 66px;
    padding: 28px 22px;
  }

  .bvm-build-article__cta h2 {
    font-size: 22px;
  }

  .bvm-build-article__cta-actions {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bvm-build-article__product-media img {
    transition: none;
  }

  .bvm-build-article__product-viewport {
    scroll-behavior: auto;
  }
}

@media print {
  .bvm-build-article__facts,
  .bvm-build-article__inline-media,
  .bvm-build-article__product-card,
  .bvm-build-article__faq,
  .bvm-build-article__cta {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .bvm-build-article__product-viewport {
    overflow: visible;
  }

  .bvm-build-article__product-track {
    flex-wrap: wrap;
    width: auto;
  }

  .bvm-build-article__carousel-controls {
    display: none;
  }
}



/* ==========================================================
   V5 — Preserve original editorial image ratios
========================================================== */

.bvm-build-article__hero-frame,
.bvm-build-article__inline-media--full,
.bvm-build-article__inline-media--detail {
  aspect-ratio: auto;
}

.bvm-build-article__hero img,
.bvm-build-article__inline-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
}





Réfléchi pendant 7m 29s
Guide PDF terminé
Je l’ai construit à partir des modèles Desert Scrambler Build et Dakar Build déjà publiés, en reprenant leur structure réelle : introduction, fiche moto, récit technique, pièces utilisées, galerie, FAQ et CTA final. 

 

Le guide explique notamment :

la création de l’article dans Shopify avec article.bvm-build ;

tous les champs custom.build_* à remplir ;

la structure SEO et rédactionnelle en anglais ;

la répartition exacte des photos ;

le cas des 10 photos : 1 featured image + 6 full images + 3 detail images ;

l’ajout au hub Bonvent Builds et aux collections ;

les erreurs fréquentes et la checklist avant publication ;

un prompt complet à réutiliser lorsque nous n’aurons plus le contexte.



les lats des photos sont chargés ou ?

Réfléchi pendant 1m 13s
Oui, tu parles des textes ALT des photos.

Pour build_full_images et build_detail_images
Les ALT ne sont pas saisis dans les metafields de l’article. Ils sont enregistrés directement sur chaque fichier image Shopify :

Shopify Admin → Contenu → Fichiers → ouvrir l’image → Modifier → Texte alternatif → Enregistrer

Ensuite, tu sélectionnes cette même image dans :

custom.build_full_images

custom.build_detail_images

Une image utilisée comme file_reference conserve bien son altText. 

 Shopify permet de modifier ce texte depuis l’éditeur de médias. 

Pour l’image principale de l’article
Dans l’article Shopify :

Image mise en avant → cliquer sur l’image ou Modifier → Texte alternatif

Shopify prévoit spécifiquement un ALT pour l’image principale d’un article de blog. 

Important
Le nom du fichier et le texte ALT sont deux éléments différents :

Nom : royal-enfield-interceptor-650-dakar-build-side-profile.webp

ALT : Side profile of the Royal Enfield Interceptor 650 Dakar build with Bonvent custom parts

Le template bvm-build doit ensuite utiliser image.alt. Si ce n’est pas le cas dans le Liquid, même un ALT correctement enregistré dans Shopify ne sera pas affiché. Le PDF aurait dû préciser cet emplacement.



Texte collé(21).txt
Document
je veux aujouter sur mes article blog une mention Credit ou je peux mettre des liens a la fin de l article . par exemple pour les photographe ou pour les personnes qui ont fourni les photos du build

image(46).png
il me dit que ton fichioer a un probleme

il me dit qu il ya  toujours un probleme je peux pas qssauvegarder 

Réfléchi pendant 2m 8s
Oui, ne clique plus sur Retry. Clique d’abord sur Revert pour restaurer ton fichier fonctionnel.

J’ai reconstruit une nouvelle version directement depuis ton fichier original, sans reprendre mes deux fichiers précédents. Je n’ai ajouté que :

l’assignation bvm_credits ;

le bloc Credits entre la FAQ et le CTA.

Tout le reste est strictement conservé. Les blocs if/endif, capture/endcapture et for/endfor sont équilibrés. 


Procédure
Clique sur Revert.

Ouvre de nouveau bvm-build-article.liquid.

Fais Ctrl + A.

Copie tout le contenu du fichier TXT ci-dessous.

Colle-le dans Shopify.

Clique directement sur Save, pas sur Save As.



Si Shopify affiche encore l’erreur line 107, envoie-moi une capture des lignes 95 à 115 visibles dans l’éditeur Shopify : cela voudra dire que le contenu réellement collé n’est pas celui du fichier propre.


pour les credit j ecris comment ? Quand c est une build par Bonvent par exemple. Je met le lienbs de notre webiste ?


Texte collé(22).txt
Document
je veux que les credit arrivent juste a la fin de l article avant les questions  FAQ   . et je veux que les liens ne soit pas bleu mais noir 

Réfléchi pendant 33s
C’est corrigé dans ton fichier actuel : les Credits apparaissent maintenant juste avant la FAQ, et tous les liens du bloc Credits sont forcés en noir. 




Ordre final :

Article
Parts used
Credits
FAQ
CTA



image(47).png
il ne sont aps centrés avec le texte: je pense qu il faut modifier le css (() => {
  function initBuildCarousels(root = document) {
    root.querySelectorAll('[data-bvm-product-carousel]').forEach((carousel) => {
      if (carousel.dataset.bvmReady === 'true') return;
      carousel.dataset.bvmReady = 'true';

      const viewport = carousel.querySelector('[data-bvm-carousel-track]');
      const prev = carousel.querySelector('[data-bvm-carousel-prev]');
      const next = carousel.querySelector('[data-bvm-carousel-next]');
      const firstCard = carousel.querySelector('.bvm-build-article__product-card');

      if (!viewport || !prev || !next || !firstCard) return;

      function getStep() {
        const cardWidth = firstCard.getBoundingClientRect().width;
        const track = carousel.querySelector('.bvm-build-article__product-track');
        const gap = track ? parseFloat(getComputedStyle(track).gap || '0') : 0;
        return Math.max(cardWidth + gap, viewport.clientWidth * 0.82);
      }

      function updateButtons() {
        const maxScroll = Math.max(0, viewport.scrollWidth - viewport.clientWidth);
        prev.disabled = viewport.scrollLeft <= 4;
        next.disabled = viewport.scrollLeft >= maxScroll - 4;
      }

      prev.addEventListener('click', () => {
        viewport.scrollBy({ left: -getStep(), behavior: 'smooth' });
      });

      next.addEventListener('click', () => {
        viewport.scrollBy({ left: getStep(), behavior: 'smooth' });
      });

      let ticking = false;
      viewport.addEventListener('scroll', () => {
        if (ticking) return;
        ticking = true;
        requestAnimationFrame(() => {
          updateButtons();
          ticking = false;
        });
      }, { passive: true });

      window.addEventListener('resize', updateButtons, { passive: true });
      updateButtons();
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => initBuildCarousels());
  } else {
    initBuildCarousels();
  }

  document.addEventListener('shopify:section:load', (event) => {
    initBuildCarousels(event.target);
  });
})();

Oui, c’est bien le CSS qu’il faut modifier. Le code que tu as collé est le JavaScript du carrousel produit : ne le change pas.

Ajoute ceci tout en bas de assets/bvm-build-article.css :

/* Credits aligned with the main article text */
.bvm-build-article__credits {
  width: 100%;
  max-width: 1120px;
  margin: 52px auto 0;
}

.bvm-build-article__credits-content {
  width: 100%;
  max-width: none;
}

.bvm-build-article__credits-content a,
.bvm-build-article__credits-content a:visited,
.bvm-build-article__credits-content a:hover,
.bvm-build-article__credits-content a:focus {
  color: #121212 !important;
  text-decoration-color: #121212;
}

@media screen and (max-width: 749px) {
  .bvm-build-article__credits {
    margin-top: 36px;
  }
}
Cela recentre le bloc Credits sur la même largeur que le texte principal, au lieu de l’aligner sur le bord extérieur du template.

Si ton fichier Liquid contient encore le petit bloc <style> ajouté précédemment pour rendre les liens noirs, tu peux le laisser : ce nouveau CSS prendra correctement le relais.


ca ne fonctionne pas

Réfléchi pendant 42s
Le CSS précédent ne pouvait pas garantir le même alignement, car la largeur réelle du texte vient déjà de la classe .bvm-build-article__content.

J’ai donc corrigé directement le fichier Liquid : le contenu du bloc Credits utilise maintenant exactement la même classe que le texte de l’article. Il restera avant la FAQ, avec les liens noirs. Le JavaScript que tu avais collé ne doit pas être modifié. 


Supprime le bloc CSS d’alignement que je t’avais donné précédemment dans bvm-build-article.css.

Remplace entièrement sections/bvm-build-article.liquid par ce nouveau fichier.

Enregistre et recharge la preview avec Ctrl + F5.


 


image(48).png

Texte collé(23).txt
Document

Code collé (2).css
Fichier
je veux aussi aussi ajouter en dessous de questiosn et au dessu de create youir own bonvent build un  carroussel avec view more custom motorcycle builds et j ajoute les autre articles avec un metafield . je veux que les builds s ffichent comme sur la galerie avec le meme style 

Réfléchi pendant 2m 44s
Oui. J’ai préparé la version complète avec le nouvel ordre :

FAQ → View More Custom Motorcycle Builds → Create Your Own Bonvent Build

Le carrousel reprend le style de ta galerie : cartes blanches, image au format 3:2, eyebrow marron, titre, extrait, informations en pastilles, miniatures “More views” et boutons arrondis. 

 


1. Créer le métachamp
Dans :

Shopify → Paramètres → Données personnalisées → Articles de blog → Ajouter une définition

Renseigne :

Nom : Related build articles

Namespace et clé : custom.related_build_articles

Type : Référence d’article

Active Liste de valeurs

Dans chaque build, tu pourras ensuite sélectionner les autres articles à afficher. Évite simplement de sélectionner l’article actuel.

2. Remplacer le fichier Liquid
Remplace entièrement :

sections/bvm-build-article.liquid
par ce fichier :



3. Ajouter le CSS
Copie tout le contenu du fichier suivant à la fin de :

assets/bvm-build-article.css

4. Remplacer le JavaScript
Remplace entièrement :

assets/bvm-build-article.js
par ce fichier :


Le JavaScript conserve ton carrousel de produits actuel et ajoute le nouveau carrousel d’articles. Sur mobile, il fonctionne aussi au swipe.


Bibliothèque
/
Seo bonvent
/
bvm-build-article-related-builds.css


/* ==========================================================
   Related Bonvent builds carousel
   Add this at the end of assets/bvm-build-article.css
========================================================== */

.bvm-build-article__related-builds,
.bvm-build-article__related-builds *,
.bvm-build-article__related-builds *::before,
.bvm-build-article__related-builds *::after {
  box-sizing: border-box;
}

.bvm-build-article__related-builds {
  min-width: 0;
  margin-top: 78px;
  padding-top: 72px;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
}

.bvm-build-article__related-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
}

.bvm-build-article__related-top .bvm-build-article__section-head {
  max-width: 760px;
  margin-bottom: 0;
}

.bvm-build-article__related-controls {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.bvm-build-article__related-controls[hidden] {
  display: none;
}

.bvm-build-article__related-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.13);
  border-radius: 999px;
  background: #fff;
  color: #111;
  font: inherit;
  cursor: pointer;
}

.bvm-build-article__related-controls button:hover:not(:disabled) {
  border-color: #7a542e;
  color: #7a542e;
}

.bvm-build-article__related-controls button:disabled {
  opacity: 0.26;
  cursor: default;
}

.bvm-build-article__related-viewport {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 1px 8px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.bvm-build-article__related-viewport::-webkit-scrollbar {
  display: none;
}

.bvm-build-article__related-viewport:focus-visible {
  outline: 2px solid rgba(122, 84, 46, 0.5);
  outline-offset: 5px;
  border-radius: 12px;
}

.bvm-build-article__related-track {
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: max-content;
  min-width: 100%;
}

.bvm-build-related-card {
  display: flex;
  flex: 0 0 min(46vw, 520px);
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.065);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.035);
  scroll-snap-align: start;
}

.bvm-build-related-card__header {
  min-height: 222px;
  margin-bottom: 20px;
}

.bvm-build-related-card__eyebrow {
  margin: 0 0 12px;
  color: #7a542e;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.bvm-build-related-card h3 {
  margin: 0;
  font-size: clamp(23px, 2.2vw, 29px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.bvm-build-related-card h3 a {
  color: #111;
  text-decoration: none;
}

.bvm-build-related-card h3 a:hover {
  color: #7a542e;
}

.bvm-build-related-card__excerpt {
  display: -webkit-box;
  max-width: 720px;
  margin-top: 13px;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.58);
  font-size: 13.5px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.bvm-build-related-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.bvm-build-related-card__facts span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 7px 10px;
  border: 1px solid rgba(122, 84, 46, 0.16);
  border-radius: 999px;
  color: rgba(0, 0, 0, 0.55);
  font-size: 10px;
  line-height: 1;
  font-weight: 620;
}

.bvm-build-related-card__main-image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 13px;
  background: #ececec;
}

.bvm-build-related-card__main-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bvm-build-related-card__views {
  margin-top: 18px;
}

.bvm-build-related-card__views > p {
  margin: 0 0 10px;
  color: rgba(0, 0, 0, 0.42);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.bvm-build-related-card__thumbs {
  display: flex;
  gap: 10px;
  min-width: 0;
}

.bvm-build-related-card__thumbs a {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 10px;
  background: #ececec;
}

.bvm-build-related-card__thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bvm-build-related-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
}

.bvm-build-related-card__actions .bvm-build-article__button {
  flex: 1 1 180px;
  min-height: 42px;
  white-space: normal;
  text-align: center;
}

@media (max-width: 989px) {
  .bvm-build-related-card {
    flex-basis: min(72vw, 500px);
  }

  .bvm-build-related-card__header {
    min-height: 206px;
  }
}

@media (max-width: 749px) {
  .bvm-build-article__related-builds {
    margin-top: 60px;
    padding-top: 56px;
  }

  .bvm-build-article__related-top {
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
  }

  .bvm-build-article__related-controls button {
    width: 34px;
    height: 34px;
  }

  .bvm-build-article__related-track {
    gap: 13px;
  }

  .bvm-build-related-card {
    flex-basis: 84vw;
    padding: 18px;
    border-radius: 17px;
  }

  .bvm-build-related-card__header {
    min-height: 0;
    margin-bottom: 18px;
  }

  .bvm-build-related-card h3 {
    font-size: 24px;
  }

  .bvm-build-related-card__facts {
    margin-top: 14px;
  }

  .bvm-build-related-card__main-image {
    border-radius: 12px;
  }

  .bvm-build-related-card__thumbs {
    gap: 8px;
  }

  .bvm-build-related-card__thumbs a {
    border-radius: 8px;
  }

  .bvm-build-related-card__actions .bvm-build-article__button {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bvm-build-article__related-viewport {
    scroll-behavior: auto;
  }
}




/* ==========================================================
   Related Bonvent builds carousel
   Add this at the end of assets/bvm-build-article.css
========================================================== */

.bvm-build-article__related-builds,
.bvm-build-article__related-builds *,
.bvm-build-article__related-builds *::before,
.bvm-build-article__related-builds *::after {
  box-sizing: border-box;
}

.bvm-build-article__related-builds {
  min-width: 0;
  margin-top: 78px;
  padding-top: 72px;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
}

.bvm-build-article__related-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
}

.bvm-build-article__related-top .bvm-build-article__section-head {
  max-width: 760px;
  margin-bottom: 0;
}

.bvm-build-article__related-controls {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.bvm-build-article__related-controls[hidden] {
  display: none;
}

.bvm-build-article__related-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.13);
  border-radius: 999px;
  background: #fff;
  color: #111;
  font: inherit;
  cursor: pointer;
}

.bvm-build-article__related-controls button:hover:not(:disabled) {
  border-color: #7a542e;
  color: #7a542e;
}

.bvm-build-article__related-controls button:disabled {
  opacity: 0.26;
  cursor: default;
}

.bvm-build-article__related-viewport {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 1px 8px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.bvm-build-article__related-viewport::-webkit-scrollbar {
  display: none;
}

.bvm-build-article__related-viewport:focus-visible {
  outline: 2px solid rgba(122, 84, 46, 0.5);
  outline-offset: 5px;
  border-radius: 12px;
}

.bvm-build-article__related-track {
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: max-content;
  min-width: 100%;
}

.bvm-build-related-card {
  display: flex;
  flex: 0 0 min(46vw, 520px);
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.065);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.035);
  scroll-snap-align: start;
}

.bvm-build-related-card__header {
  min-height: 222px;
  margin-bottom: 20px;
}

.bvm-build-related-card__eyebrow {
  margin: 0 0 12px;
  color: #7a542e;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.bvm-build-related-card h3 {
  margin: 0;
  font-size: clamp(23px, 2.2vw, 29px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.bvm-build-related-card h3 a {
  color: #111;
  text-decoration: none;
}

.bvm-build-related-card h3 a:hover {
  color: #7a542e;
}

.bvm-build-related-card__excerpt {
  display: -webkit-box;
  max-width: 720px;
  margin-top: 13px;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.58);
  font-size: 13.5px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.bvm-build-related-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.bvm-build-related-card__facts span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 7px 10px;
  border: 1px solid rgba(122, 84, 46, 0.16);
  border-radius: 999px;
  color: rgba(0, 0, 0, 0.55);
  font-size: 10px;
  line-height: 1;
  font-weight: 620;
}

.bvm-build-related-card__main-image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 13px;
  background: #ececec;
}

.bvm-build-related-card__main-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bvm-build-related-card__views {
  margin-top: 18px;
}

.bvm-build-related-card__views > p {
  margin: 0 0 10px;
  color: rgba(0, 0, 0, 0.42);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.bvm-build-related-card__thumbs {
  display: flex;
  gap: 10px;
  min-width: 0;
}

.bvm-build-related-card__thumbs a {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 10px;
  background: #ececec;
}

.bvm-build-related-card__thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bvm-build-related-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
}

.bvm-build-related-card__actions .bvm-build-article__button {
  flex: 1 1 180px;
  min-height: 42px;
  white-space: normal;
  text-align: center;
}

@media (max-width: 989px) {
  .bvm-build-related-card {
    flex-basis: min(72vw, 500px);
  }

  .bvm-build-related-card__header {
    min-height: 206px;
  }
}

@media (max-width: 749px) {
  .bvm-build-article__related-builds {
    margin-top: 60px;
    padding-top: 56px;
  }

  .bvm-build-article__related-top {
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
  }

  .bvm-build-article__related-controls button {
    width: 34px;
    height: 34px;
  }

  .bvm-build-article__related-track {
    gap: 13px;
  }

  .bvm-build-related-card {
    flex-basis: 84vw;
    padding: 18px;
    border-radius: 17px;
  }

  .bvm-build-related-card__header {
    min-height: 0;
    margin-bottom: 18px;
  }

  .bvm-build-related-card h3 {
    font-size: 24px;
  }

  .bvm-build-related-card__facts {
    margin-top: 14px;
  }

  .bvm-build-related-card__main-image {
    border-radius: 12px;
  }

  .bvm-build-related-card__thumbs {
    gap: 8px;
  }

  .bvm-build-related-card__thumbs a {
    border-radius: 8px;
  }

  .bvm-build-related-card__actions .bvm-build-article__button {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bvm-build-article__related-viewport {
    scroll-behavior: auto;
  }
}



.bvm-build-article__related-all {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 26px;
}

.bvm-build-article__related-all .bvm-build-article__button {
  min-width: 260px;
  color: #111;
  text-align: center;
}

.bvm-build-article__related-all .bvm-build-article__button:visited,
.bvm-build-article__related-all .bvm-build-article__button:hover {
  color: #111;
}

@media screen and (max-width: 749px) {
  .bvm-build-article__related-all {
    margin-top: 20px;
  }

  .bvm-build-article__related-all .bvm-build-article__button {
    width: 100%;
    min-width: 0;
  }
}