Aggiunta di una tabella delle taglie alle pagine del prodotto

Attenzione

I temi vintage non sono disponibili nel Theme Store. Questi temi non dispongono delle funzionalità incluse nei temi dell'Online Store 2.0 di Shopify e i temi vintage gratuiti di Shopify non ricevono aggiornamenti oltre alle correzioni di sicurezza.

Nota

Se utilizzi un tema gratuito di Shopify, puoi contattare l'Assistenza Shopify per ricevere aiuto con questo tutorial. Sono necessari 15 minuti di tempo di progettazione. Per maggiori informazioni, consulta la pagina Assistenza per i temi.

Nota

Questa personalizzazione è per i temi Shopify vintage e non si applica ai temi dell'Online Store 2.0.

• Scopri la versione della struttura del tuo tema
• Esplora le opzioni di personalizzazione del tema dell'Online Store 2.0.

Se vendi articoli di abbigliamento il cui acquisto richiede che i clienti conoscano le taglie, puoi aggiungere una tabella delle taglie personalizzata alla pagina del prodotto.

Tutti i prodotti che fanno riferimento alla tabella delle taglie devono avere un'opzione Taglia:

Attenzione

Questo tutorial non funziona con il tema Express senza codice aggiuntivo.

Potresti aver bisogno di modificare il CSS della tabella a seconda del tema.

Inoltre, le tabelle delle taglie non sono adattive per tutti i dispositivi. Se si aggiungono troppe colonne di informazioni, sui dispositivi mobili le tabelle potrebbero risultare tagliate sul lato della pagina.

Creazione di una pagina con la tabella delle taglie

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Pagine.
2. Clicca su Aggiungi pagina.

3. Inserisci il titolo della pagina.

   • Se desideri creare un una tabella delle taglie che venga visualizzata in tutte le parti del sito, per il titolo della pagina inserisci Size Chart. Nella sezione Anteprima inserzione per i motori di ricerca*, l'URL della pagina deve terminare con /size-chart.
   • Se desideri creare una tabella che venga visualizzata solo sui prodotti di un fornitore specifico, inserisci il nome del fornitore seguito da Size Chart.
     Ad esempio, se il fornitore si chiama Great Owls, per il titolo della pagina inserisci Great Owls Size Chart. Nella sezione Anteprima inserzione per i motori di ricerca l'URL della pagina deve terminare con /great-owls-size-chart.
   • Se desideri creare una tabella che venga visualizzata solo su un tipo di prodotto specifico, inserisci il tipo di prodotto seguito da Size Chart.
     Ad esempio, se desideri mostrare una tabella delle taglie specifica per le scarpe, per il titolo della pagina inserisci Shoes Size Chart. Nella sezione Anteprima inserzione per i motori di ricerca l'URL della pagina deve terminare con /shoes-size-chart.

4. Nella casella Contenuto crea una tabella con le informazioni della tabella delle taglie e personalizzala perché abbia l'aspetto che desideri:

   

5. Nella sezione Visibilità assicurati che la pagina sia impostata su Visibile.

6. Clicca su Salva.

iPhone

1. Nell'app di Shopify tocca il pulsante ….
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Clicca Pagine.
4. Clicca su Aggiungi pagina.

5. Inserisci il titolo della pagina.

   • Se desideri creare un una tabella delle taglie che venga visualizzata in tutte le parti del sito, per il titolo della pagina inserisci Size Chart. Nella sezione Anteprima inserzione per i motori di ricerca*, l'URL della pagina deve terminare con /size-chart.
   • Se desideri creare una tabella che venga visualizzata solo sui prodotti di un fornitore specifico, inserisci il nome del fornitore seguito da Size Chart.
     Ad esempio, se il fornitore si chiama Great Owls, per il titolo della pagina inserisci Great Owls Size Chart. Nella sezione Anteprima inserzione per i motori di ricerca l'URL della pagina deve terminare con /great-owls-size-chart.
   • Se desideri creare una tabella che venga visualizzata solo su un tipo di prodotto specifico, inserisci il tipo di prodotto seguito da Size Chart.
     Ad esempio, se desideri mostrare una tabella delle taglie specifica per le scarpe, per il titolo della pagina inserisci Shoes Size Chart. Nella sezione Anteprima inserzione per i motori di ricerca l'URL della pagina deve terminare con /shoes-size-chart.

6. Nella casella Contenuto crea una tabella con le informazioni della tabella delle taglie e personalizzala perché abbia l'aspetto che desideri:

   

7. Nella sezione Visibilità assicurati che la pagina sia impostata su Visibile.

8. Clicca su Salva.

Android

1. Nell'app di Shopify tocca il pulsante ….
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Clicca Pagine.
4. Clicca su Aggiungi pagina.

5. Inserisci il titolo della pagina.

   • Se desideri creare un una tabella delle taglie che venga visualizzata in tutte le parti del sito, per il titolo della pagina inserisci Size Chart. Nella sezione Anteprima inserzione per i motori di ricerca*, l'URL della pagina deve terminare con /size-chart.
   • Se desideri creare una tabella che venga visualizzata solo sui prodotti di un fornitore specifico, inserisci il nome del fornitore seguito da Size Chart.
     Ad esempio, se il fornitore si chiama Great Owls, per il titolo della pagina inserisci Great Owls Size Chart. Nella sezione Anteprima inserzione per i motori di ricerca l'URL della pagina deve terminare con /great-owls-size-chart.
   • Se desideri creare una tabella che venga visualizzata solo su un tipo di prodotto specifico, inserisci il tipo di prodotto seguito da Size Chart.
     Ad esempio, se desideri mostrare una tabella delle taglie specifica per le scarpe, per il titolo della pagina inserisci Shoes Size Chart. Nella sezione Anteprima inserzione per i motori di ricerca l'URL della pagina deve terminare con /shoes-size-chart.

6. Nella casella Contenuto crea una tabella con le informazioni della tabella delle taglie e personalizzala perché abbia l'aspetto che desideri:

   

7. Nella sezione Visibilità assicurati che la pagina sia impostata su Visibile.

8. Clicca su Salva.

Navigazione nell'editor di codice

Desktop

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.

iPhone

1. Nell'app di Shopify tocca il pulsante ….
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.
4. Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.

Android

1. Nell'app di Shopify tocca il pulsante ….
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.
4. Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.

Scelta di una delle opzioni seguenti e creazione di un frammento della tabella delle taglie

Site-wide

Nota

Scegliendo l'opzione per la visualizzazione in ogni parte del sito, la tabella delle taglie viene visualizzata su tutte le pagine del prodotto con l'opzione Taglia.

Creazione di uno snippet della tabella delle taglie

1. Nella directory Frammenti, clicca su Aggiungi un nuovo frammento.

2. Assegna al frammento il nome size-chart e clicca su Crea frammento:

3. Copia il codice seguente nel frammento size-chart:

<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages.size-chart.content }}</span>
  </div>
</div>

<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 0;
    width: 100%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
  }
</style>

{% block "note" %} È necessario apportare alcune modifiche alla definizione dello stile CSS per i temi Simple e Minimal. {% endblock %}

Se utilizzi il tema Simple, utilizza questo codice:

<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages.size-chart.content }}</span>
  </div>
</div>

<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 8px;
    width: 50%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
    .trigger-pop-up {
      width: 100%;
    }
  }
  </style>

Se utilizzi il tema Minimal, utilizza il seguente codice:

<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages.size-chart.content }}</span>
  </div>
</div>

<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 0;
    width: 100%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
  }
  @media only screen and (min-width: 750px) {
    .trigger-pop-up {
      width: 50%;
    }
  }
</style>

Aggiunta del frammento della tabella delle taglie a theme.liquid

1. Nella directory Layout clicca sul file theme.liquid per aprirlo.
2. Trova il tag di chiusura </body>. Subito sopra il tag di chiusura </body> incolla il codice seguente:

{% if request.page_type == 'product' %}
    {% if product.options contains 'Size' %}
        {% render 'size-chart' %}
    {% endif %}
{% endif %}

Aggiunta di un pulsante Tabella delle taglie

1. Nella directory Sezioni clicca sul file product-template.liquid o, se non hai il file product.liquid, su product-template.liquid per aprirlo.
2. Incolla il codice seguente sopra il pulsante Aggiungi al carrello:

{% if product.options contains 'Size' %}
    <a class="trigger-pop-up btn">See Size Chart</a>
{% endif %}

In genere, il pulsante Aggiungi al carrello inizia con una riga simile a <button type="submit" name="add". Se la lingua del tuo negozio non è l'inglese, sostituisci See Size Chart con il testo che preferisci utilizzare.

Nota

Nel tema Narrative devi inserire il codice di cui sopra all'interno del file product-form.liquid, che si trova nella directory Frammenti.

Type

Nota

Scegliendo l'opzione Tipo di prodotto, la tabella delle taglie viene visualizzata su tutte le pagine del prodotto con l'opzione Taglia e il tipo di prodotto specificato.

Creazione di uno snippet della tabella delle taglie

1. Nella directory Frammenti, clicca su Aggiungi un nuovo frammento.

2. Assegna al frammento il nome size-chart e clicca su Crea frammento:

3. Copia il codice seguente nel frammento size-chart:

{% assign chart = product.type | handleize | append: "-size-chart" %} {% unless
pages[chart].empty? or pages[chart].content == blank %}
<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages[chart].content }}</span>
  </div>
</div>
{% endunless %}
<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 0;
    width: 100%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
  }
</style>

Nota

È necessario apportare alcune modifiche alla definizione dello stile CSS per i temi Simple e Minimal.

Se stai utilizzando il tema Simple, sostituisci la porzione di codice che inizia da .trigger-pop-up e finisce appena sopra a </style> con questo codice:

.trigger-pop-up {
  margin: 10px 0 10px 8px;
  width: 50%;
}
@media only screen and (max-width: 749px) {
  .pop-up-content,
  .size-chart-content table {
    width: 100%;
  }
  .size-chart-content th,
  .size-chart-content td {
    padding: 10px;
  }
  .trigger-pop-up {
    width: 100%;
  }
}

Se usi il tema Minimal, aggiungi il codice seguente sopra il tag di chiusura </style>:

@media only screen and (min-width: 750px) {
  .trigger-pop-up {
    width: 50%;
  }
}

Aggiunta del frammento della tabella delle taglie a theme.liquid

1. Nella directory Layout clicca sul file theme.liquid per aprirlo.
2. Trova il tag di chiusura </body>. Subito sopra il tag di chiusura </body> incolla il codice seguente:

{% if request.page_type == 'product' %}
    {% if product.options contains 'Size' %}
      {% assign chart = product.type | handleize | append: "-size-chart" %}
      {% unless pages[chart].empty? or pages[chart].content == blank %}
        {% render 'size-chart' %}
      {% endunless %}
    {% endif %}
  {% endif %}

Aggiunta di un pulsante Tabella delle taglie

1. Nella directory Sezioni clicca sul file product-template.liquid o, se non hai il file product.liquid, su product-template.liquid per aprirlo.
2. Incolla il codice seguente sopra il pulsante Aggiungi al carrello:

{% if product.options contains 'Size' %}
      {% assign chart = product.type | handleize | append: "-size-chart" %}
      {% unless pages[chart].empty? or pages[chart].content == blank %}
        <a class="trigger-pop-up btn">See Size Chart</a>
      {% endunless %}
    {% endif %}

In genere, il pulsante Aggiungi al carrello inizia con una riga simile a <button type="submit" name="add". Se la lingua del tuo negozio non è l'inglese, sostituisci See Size Chart con il testo che preferisci utilizzare.

Nota

Nel tema Narrative devi inserire il codice di cui sopra all'interno del file product-form.liquid, che si trova nella directory Frammenti.

Vendor

Nota

Se si sceglie Fornitore prodotto, la tabella delle taglie viene visualizzata su tutte le pagine del prodotto con l'opzione Taglia e il fornitore del prodotto specificato.

Creazione di uno snippet della tabella delle taglie

1. Nella directory Frammenti, clicca su Aggiungi un nuovo frammento.

2. Assegna al frammento il nome size-chart e clicca su Crea frammento:

3. Copia il codice seguente nel frammento size-chart:

{% assign chart = product.vendor | handleize | append: "-size-chart" %} {%
unless pages[chart].empty? or pages[chart].content == blank %}
<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages[chart].content }}</span>
  </div>
</div>
{% endunless %}
<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 0;
    width: 100%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
  }
</style>

Nota

È necessario apportare alcune modifiche alla definizione dello stile CSS per i temi Simple e Minimal.

Se stai utilizzando il tema Simple, sostituisci la porzione di codice che inizia da .trigger-pop-up e finisce appena sopra a </style> con questo codice:

.trigger-pop-up {
  margin: 10px 0 10px 8px;
  width: 50%;
}
@media only screen and (max-width: 749px) {
  .pop-up-content,
  .size-chart-content table {
    width: 100%;
  }
  .size-chart-content th,
  .size-chart-content td {
    padding: 10px;
  }
  .trigger-pop-up {
    width: 100%;
  }
}

Se usi il tema Minimal, aggiungi il codice seguente sopra il tag di chiusura </style>:

@media only screen and (min-width: 750px) {
  .trigger-pop-up {
    width: 50%;
  }
}

Aggiunta del frammento della tabella delle taglie a theme.liquid

1. Nella directory Layout clicca sul file theme.liquid per aprirlo.
2. Trova il tag di chiusura </body>. Subito sopra il tag di chiusura </body> incolla il codice seguente:

{% if request.page_type == 'product' %}
    {% if product.options contains 'Size' %}
      {% assign chart = product.vendor | handleize | append: "-size-chart" %}
      {% unless pages[chart].empty? or pages[chart].content == blank %}
        {% render 'size-chart' %}
      {% endunless %}
    {% endif %}
  {% endif %}

Aggiunta di un pulsante Tabella delle taglie

1. Nella directory Sezioni clicca sul file product-template.liquid o, se non hai il file product.liquid, su product-template.liquid per aprirlo.
2. Incolla il codice seguente sopra il pulsante Aggiungi al carrello:

{% if product.options contains 'Size' %}
      {% assign chart = product.vendor | handleize | append: "-size-chart" %}
      {% unless pages[chart].empty? or pages[chart].content == blank %}
        <a class="trigger-pop-up btn">See Size Chart</a>
      {% endunless %}
    {% endif %}

In genere, il pulsante Aggiungi al carrello inizia con una riga simile a <button type="submit" name="add". Se la lingua del tuo negozio non è l'inglese, sostituisci See Size Chart con il testo che preferisci utilizzare.

Nota

Nel tema Narrative devi inserire il codice di cui sopra all'interno del file product-form.liquid, che si trova nella directory Frammenti.