Updates

Update a template to use Google Pay (via PayPal)

Version 7.8 introduces the ability to accept Google Pay payments via PayPal.

If you don’t plan to use Google Pay, no changes are required; otherwise you can install an updated version of the template from the store, or follow the steps below to update the template yourself.

The instructions below refer to templates that have not been modified in the files related to the checkout-methods.html page and its CSS. If those files have been modified in your template, you can still use these instructions as a reference.

Changes can be made via the back office Template Editor or with any other editor and an FTP program to upload files to the site.

1. In all templates you need to edit the "checkout-methods.html" file, replacing the variable {{ editor.PayPalLogo }} with the following code

   
     {% if index(string(payment.Choice), "GooglePay") > 0 %}
         <img src="images/google-pay.png" alt="Google Pay" class="googlepay">
     {% else %}
         {{ editor.PayPalLogo }}
     {% end if %}
   

2. Add the logo to the template’s "/images/" folder, which you can download here
3. Update the CSS; this step varies depending on the template
   
   Axis

   Silva

   Supply

   Respy Wide

   Respy Classic

   Valentine

   Slide

   1. Open the file "base.css" in the directory "css"
   2. Replace the line

      fieldset.form.methods label .logos { align-items: center; display: flex; justify-content: center; position: absolute; right: 10px; top: 25%; transform: translate(0, -50%); }

      with the following code:

      fieldset.form.methods label .logos { align-items: center; display: flex; justify-content: center; position: absolute; right: 10px; top: 50%; transform: translate(0, -50%); }

   3. Below the line

      fieldset.form.methods label .logos img { max-height: 20px; width: auto; }

      add:

      fieldset.form.methods label .logos img.googlepay { max-height: 30px; }

   4. Replace the line

      fieldset.form.methods ~ .buttons .continue-button { position: relative; width: 200px; }

      with the following code:

      fieldset.form.methods ~ .buttons .continue-button { position: relative; width: 240px; }

   5. Replace the following code

      .checkout #design-paypal-button { background-color: #0070ba; clip-path: circle(0.0% at 0 100%); transition: visibility .2s, opacity .2s, clip-path .4s; }
      .checkout #design-paypal-button.design-custom-order-button { clip-path: circle(142.2% at 0 100%); }

      with the following code:

      .checkout #design-paypal-button { background-color: #0070ba; clip-path: circle(0.0% at 0 100%); transition: visibility .2s, opacity .2s, clip-path .4s; }
      .checkout #design-googlepay-button { clip-path: circle(0.0% at 0 100%); transition: visibility .2s, opacity .2s, clip-path .4s; }
      .checkout #design-googlepay-button.design-custom-order-button,
      .checkout #design-paypal-button.design-custom-order-button { clip-path: circle(142.2% at 0 100%); }

   1. Open the file "base.css" in the directory "css"
   2. Replace the line

      fieldset.form.methods label .logos { align-items: center; display: flex; justify-content: center; position: absolute; right: 10px; top: 25%; transform: translate(0, -50%); }

      with the following code:

      fieldset.form.methods label .logos { align-items: center; display: flex; justify-content: center; position: absolute; right: 10px; top: 50%; transform: translate(0, -50%); }

   3. Below the line

      fieldset.form.methods label .logos img { max-height: 20px; width: auto; }

      add:

      fieldset.form.methods label .logos img.googlepay { max-height: 30px; }

   4. Replace the line

      fieldset.form.methods ~ .buttons .continue-button { position: relative; width: 200px; }

      with the following code:

      fieldset.form.methods ~ .buttons .continue-button { position: relative; width: 240px; }

   5. Replace the following code

      .checkout #design-paypal-button { background-color: #0070ba; clip-path: circle(0.0% at 0 100%); transition: visibility .2s, opacity .2s, clip-path .4s; }
      .checkout #design-paypal-button.design-custom-order-button { clip-path: circle(142.2% at 0 100%); }

      with the following code:

      .checkout #design-paypal-button { background-color: #0070ba; clip-path: circle(0.0% at 0 100%); transition: visibility .2s, opacity .2s, clip-path .4s; }
      .checkout #design-googlepay-button { clip-path: circle(0.0% at 0 100%); transition: visibility .2s, opacity .2s, clip-path .4s; }
      .checkout #design-googlepay-button.design-custom-order-button,
      .checkout #design-paypal-button.design-custom-order-button { clip-path: circle(142.2% at 0 100%); }

   1. Open the file "base.css" in the directory "css"
   2. Replace the line

      fieldset.form.methods label .logos { align-items: center; display: flex; justify-content: center; position: absolute; right: 10px; top: 25%; transform: translate(0, -50%); }

      with the following code:

      fieldset.form.methods label .logos { align-items: center; display: flex; justify-content: center; position: absolute; right: 10px; top: 50%; transform: translate(0, -50%); }

   3. Below the line

      fieldset.form.methods label .logos img { max-height: 20px; width: auto; }

      add:

      fieldset.form.methods label .logos img.googlepay { max-height: 30px; }

   4. Replace the line

      fieldset.form.methods ~ .buttons .continue-button { position: relative; width: 200px; }

      with the following code:

      fieldset.form.methods ~ .buttons .continue-button { position: relative; width: 240px; }

   5. Replace the following code

      .checkout #design-paypal-button { background-color: #0070ba; clip-path: circle(0.0% at 0 100%); transition: visibility .2s, opacity .2s, clip-path .4s; }
      .checkout #design-paypal-button.design-custom-order-button { clip-path: circle(142.2% at 0 100%); }

      with the following code:

      .checkout #design-paypal-button { background-color: #0070ba; clip-path: circle(0.0% at 0 100%); transition: visibility .2s, opacity .2s, clip-path .4s; }
      .checkout #design-googlepay-button { clip-path: circle(0.0% at 0 100%); transition: visibility .2s, opacity .2s, clip-path .4s; }
      .checkout #design-googlepay-button.design-custom-order-button,
      .checkout #design-paypal-button.design-custom-order-button { clip-path: circle(142.2% at 0 100%); }

   1. Open the file "base.css" in the directory "css"
   2. Replace the line

      fieldset.form.methods label .logos { align-items: center; display: flex; justify-content: center; position: absolute; right: 10px; top: 25%; transform: translate(0, -50%); }

      with the following code:

      fieldset.form.methods label .logos { align-items: center; display: flex; justify-content: center; position: absolute; right: 10px; top: 50%; transform: translate(0, -50%); }

   3. Below the line

      fieldset.form.methods label .logos img { max-height: 20px; width: auto; }

      add:

      fieldset.form.methods label .logos img.googlepay { max-height: 30px; }

   4. Replace the line

      fieldset.form.methods ~ .buttons .continue-button { position: relative; width: 200px; }

      with the following code:

      fieldset.form.methods ~ .buttons .continue-button { position: relative; width: 240px; }

   5. Replace the following code

      .checkout #design-paypal-button { background-color: #0070ba; clip-path: circle(0.0% at 0 100%); transition: visibility .2s, opacity .2s, clip-path .4s; }
      .checkout #design-paypal-button.design-custom-order-button { clip-path: circle(142.2% at 0 100%); }

      with the following code:

      .checkout #design-paypal-button { background-color: #0070ba; clip-path: circle(0.0% at 0 100%); transition: visibility .2s, opacity .2s, clip-path .4s; }
      .checkout #design-googlepay-button { clip-path: circle(0.0% at 0 100%); transition: visibility .2s, opacity .2s, clip-path .4s; }
      .checkout #design-googlepay-button.design-custom-order-button,
      .checkout #design-paypal-button.design-custom-order-button { clip-path: circle(142.2% at 0 100%); }

   1. Open the file "base.css" in the directory "css"
   2. Replace the line

      fieldset.form.methods label .logos { align-items: center; display: flex; justify-content: center; position: absolute; right: 10px; top: 25%; transform: translate(0, -50%); }

      with the following code:

      fieldset.form.methods label .logos { align-items: center; display: flex; justify-content: center; position: absolute; right: 10px; top: 50%; transform: translate(0, -50%); }

   3. Below the line

      fieldset.form.methods label .logos img { max-height: 20px; width: auto; }

      add:

      fieldset.form.methods label .logos img.googlepay { max-height: 30px; }

   4. Replace the line

      fieldset.form.methods ~ .buttons .continue-button { position: relative; width: 200px; }

      with the following code:

      fieldset.form.methods ~ .buttons .continue-button { position: relative; width: 240px; }

   5. Replace the following code

      .checkout #design-paypal-button { background-color: #0070ba; clip-path: circle(0.0% at 0 100%); transition: visibility .2s, opacity .2s, clip-path .4s; }
      .checkout #design-paypal-button.design-custom-order-button { clip-path: circle(142.2% at 0 100%); }

      with the following code:

      .checkout #design-paypal-button { background-color: #0070ba; clip-path: circle(0.0% at 0 100%); transition: visibility .2s, opacity .2s, clip-path .4s; }
      .checkout #design-googlepay-button { clip-path: circle(0.0% at 0 100%); transition: visibility .2s, opacity .2s, clip-path .4s; }
      .checkout #design-googlepay-button.design-custom-order-button,
      .checkout #design-paypal-button.design-custom-order-button { clip-path: circle(142.2% at 0 100%); }

   1. Open the file "pages.css" in the directory "css"
   2. Below the code

      .checkout-page .main .form.methods fieldset label .payment-head .logos img {
          max-height: 25px;
          width: auto;
      }

      add

      .checkout-page .main .form.methods fieldset label .payment-head .logos img.googlepay {
          max-height: 35px;
      }

   3. Replace the code

      .checkout-page .main .form.methods .buttons .continue-button {
          position: relative;
          width: 200px;
      }

      with

      .checkout-page .main .form.methods .buttons .continue-button {
          position: relative;
          width: 240px;
      }

   4. Replace the code

      .checkout-page #design-paypal-button.design-custom-order-button {
          clip-path: circle(142.2% at 0 100%);
      }

      with

      .checkout-methods #design-googlepay-button {
          clip-path: circle(0.0% at 0 100%);
          transition: visibility .2s, opacity .2s, clip-path .4s;
      }
      .checkout-methods #design-googlepay-button.design-custom-order-button,
      .checkout-methods #design-paypal-button.design-custom-order-button {
          clip-path: circle(142.2% at 0 100%);
      }

   1. Open the file "style.css" in the directory "css"
   2. Below the code

      .checkout-methods .checkout-methods__payment-logo img {
          display: block;
          max-height: 20px;
          width: auto;
      }

      add

      .checkout-methods .checkout-methods__payment-logo img.googlepay {
          max-height: 30px;
      }

   3. Replace the code

      .checkout-methods #design-paypal-button.design-custom-order-button {
          clip-path: circle(142.2% at 0 100%);
      }

      with

      .checkout-methods #design-googlepay-button {
          clip-path: circle(0.0% at 0 100%);
          transition: visibility .2s, opacity .2s, clip-path .4s;
      }
      .checkout-methods #design-googlepay-button.design-custom-order-button,
      .checkout-methods #design-paypal-button.design-custom-order-button {
          clip-path: circle(142.2% at 0 100%);
      }

Update a template to show quantity promotions in the cart

Version 7.5 introduces quantity promotions. These promotions can result in different prices for the same SKU in the cart, so the cart page variables and related pages have changed.

If you do not use quantity promotions, no changes are required.

Otherwise you can install an updated version of the template from the store, or follow the steps below to update the template yourself.

The instructions below refer to updating templates that have not been modified in the files related to the cart (cart.html, cart-checkout.html and partials/mini-cart.html). If those files have been modified in your template, you can still use these instructions as a reference.

Changes can be made via the back office Template Editor or with any other editor and an FTP program to upload files to the site.

Update a template to use Stripe and PayPal in quotes

Version 7.4 lets users use Stripe and PayPal Checkout directly when accepting a quote.

If you don’t have one of the new templates already updated to support this feature, you can follow the steps below to update your template yourself.

1. Add the payment section

   First, on the quote acceptance page you need to add a new visual element that will contain the payment method widget.

   In the "view.html" file, immediately after the accept/print buttons, paste the following code block:

   
         <div class="pay design-pay">
           {% if card %}
           <div class="card">
             {% card.SetCssFont("https://fonts.googleapis.com/css?family=Architects+Daughter") %}
             <div class="number ">{{ card.Number }}</div>
             <div class="expire-cvc-row">
             <div class="expiry">{{ card.Expiry }}</div>
             <div class="cvc">{{ card.CVC }}</div>
             </div>
             <div class="name">{{ card.Name }}</div>
             <div class="errors">{{ card.Errors }}</div>
             {{ buttonPay }}
           </div>
           {% end if %}
         </div>
       

2. Add the translations

   Quote payments introduce two new strings that must be translated.

   To do this, go to the "languages" directory of your template and paste the correct translations into the "system.ini" files for each language.

   First, paste the translations for the "ErrorQuoteChanged" string, in alphabetical order with the other translations under the "# Errors" comment:

   English

   ErrorQuoteChanged=The quote has changed, please reload the page, review the summary, and try the payment again

   Spanish

   ErrorQuoteChanged=La cotización ha cambiado, vuelva a cargar la página, revise el resumen e intente realizar el pago nuevamente

   French

   ErrorQuoteChanged=Le devis a changé, veuillez recharger la page, revoir le récapitulatif et réessayer le paiement

   Italian

   ErrorQuoteChanged=Il preventivo è cambiato, ricarica la pagina, controlla il riepilogo e riprova a effettuare il pagamento

   Next, paste the translations for the "ButtonPayQuote" string, in alphabetical order with the other translations under the "# Card form" comment:

   English

   ButtonPayQuote=Pay

   Spanish

   ButtonPayQuote=Pagar

   French

   ButtonPayQuote=Payer

   Italian

   ButtonPayQuote=Paga

3. Add the CSS

   Finally, add styles to correctly display the new UI elements introduced by the changes to the quote acceptance page.

   Since the instructions vary slightly depending on the template, click the button for your template to view the correct CSS and where to insert it.

   Axis

   Silva

   Supply

   Respy Wide

   Respy Classic

   Valentine

   Axis

   Open the "base.css" file in the "css" directory and find the /* view.html */ comment.

   Paste the CSS between this comment and the next one:

   
       .view-html .pay { background-color: #fff; height: 0; opacity: 0; text-align: center; will-change: opacity; }
       .view-html .pay.design-pay-isopen { display: block; margin: 30px 0; padding: 30px 40px; height: auto; opacity: 1; transition: transform 500ms, opacity 200ms; }
       .view-html .pay .card > div:first-child { margin-top: 0; }
       .view-html .pay .card > div { margin-top: 10px; }
       .view-html .pay .card .expire-cvc-row { column-gap: 10px; display: flex; }
       .view-html .pay .card .expire-cvc-row > div { width: 50%; }
       .view-html .pay .card .cvc,
       .view-html .pay .card .expiry,
       .view-html .pay .card .number,
       .view-html .pay .card .name { background:#F9F9F9; border-radius: 4px; border: 2px solid #eee; width: 100%; padding: 0; }
       .view-html .pay .card .cvc > div,
       .view-html .pay .card .expiry > div,
       .view-html .pay .card .number > div,
       .view-html .pay .card .name input { padding: 10px 15px; }
       .view-html .pay .card .name input { background-color: transparent; border: 0; height: 40px; max-width: none; width: 100%; }
       .view-html .pay .card .name input::placeholder { color: #333; text-transform: uppercase; }
       .view-html .pay .card .pay-button { margin-top: 15px; }
       .view-html .pay .card .design-cc-button-paying { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
       .view-html .pay .card .errors { color: #c00; font-weight: 600; text-align: center; margin-bottom: 10px; }
       .view-html .pay .card .design-cc-number,
       .view-html .pay .card .design-cc-expiry,
       .view-html .pay .card .design-cc-cvc { height: 41px; }
       .view-html [name="acceptQuote"].design-accept-quote-button-loading { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
       .view-html [name="acceptQuote"].design-accept-quote-button-hidden { display: none; }
       .view-html #design-paypal-button { margin: auto; width: 250px;  }
       .view-html .document-frame { box-shadow: unset; }
           

   Still in "base.css", check whether there are CSS declarations for the selectors #design-paypal-button, #design-paypal-button.design-custom-order-button and #design-order-button.design-cc-button-paying.

   If those selectors are present, add the .checkout prefix followed by a space, to limit those styles to the checkout page only and prevent them from affecting the new elements on the quotes page.

   Silva

   Open the "base.css" file in the "css" directory and find the /* view.html */ comment.

   Paste the CSS between this comment and the next one:

   
       .view-html .pay { background-color: #fff; height: 0; opacity: 0; text-align: center; will-change: opacity; }
       .view-html .pay.design-pay-isopen { display: block; margin: 30px 0; padding: 30px 40px; height: auto; opacity: 1; transition: transform 500ms, opacity 200ms; }
       .view-html .pay .card > div:first-child { margin-top: 0; }
       .view-html .pay .card > div { margin-top: 10px; }
       .view-html .pay .card .expire-cvc-row { column-gap: 10px; display: flex; }
       .view-html .pay .card .expire-cvc-row > div { width: 50%; }
       .view-html .pay .card .cvc,
       .view-html .pay .card .expiry,
       .view-html .pay .card .number,
       .view-html .pay .card .name { background:#F9F9F9; border-radius: 4px; border: 2px solid #eee; width: 100%; padding: 0; }
       .view-html .pay .card .cvc > div,
       .view-html .pay .card .expiry > div,
       .view-html .pay .card .number > div,
       .view-html .pay .card .name input { padding: 10px 15px; }
       .view-html .pay .card .name input { background-color: transparent; border: 0; height: 40px; max-width: none; width: 100%; }
       .view-html .pay .card .name input::placeholder { color: #333; text-transform: uppercase; }
       .view-html .pay .card .pay-button { margin-top: 15px; }
       .view-html .pay .card .design-cc-button-paying { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
       .view-html .pay .card .errors { color: #c00; font-weight: 600; text-align: center; margin-bottom: 10px; }
       .view-html .pay .card .design-cc-number,
       .view-html .pay .card .design-cc-expiry,
       .view-html .pay .card .design-cc-cvc { height: 41px; }
       .view-html [name="acceptQuote"].design-accept-quote-button-loading { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
       .view-html [name="acceptQuote"].design-accept-quote-button-hidden { display: none; }
       .view-html #design-paypal-button { margin: auto; width: 250px;  }
       .view-html .document-frame { box-shadow: unset; }
           

   Still in "base.css", check whether there are CSS declarations for the selectors #design-paypal-button, #design-paypal-button.design-custom-order-button and #design-order-button.design-cc-button-paying.

   If those selectors are present, add the .checkout prefix followed by a space, to limit those styles to the checkout page only and prevent them from affecting the new elements on the quotes page.

   Supply

   Open the "base.css" file in the "css" directory and find the /* view.html */ comment.

   Paste the CSS between this comment and the next one:

   
       .view-html .pay { background-color: #fff; height: 0; opacity: 0; text-align: center; will-change: opacity; }
       .view-html .pay.design-pay-isopen { display: block; margin: 30px 0; padding: 30px 40px; height: auto; opacity: 1; transition: transform 500ms, opacity 200ms; }
       .view-html .pay .card > div:first-child { margin-top: 0; }
       .view-html .pay .card > div { margin-top: 10px; }
       .view-html .pay .card .expire-cvc-row { column-gap: 10px; display: flex; }
       .view-html .pay .card .expire-cvc-row > div { width: 50%; }
       .view-html .pay .card .cvc,
       .view-html .pay .card .expiry,
       .view-html .pay .card .number,
       .view-html .pay .card .name { background:#F9F9F9; border-radius: 4px; border: 2px solid #eee; width: 100%; padding: 0; }
       .view-html .pay .card .cvc > div,
       .view-html .pay .card .expiry > div,
       .view-html .pay .card .number > div,
       .view-html .pay .card .name input { padding: 10px 15px; }
       .view-html .pay .card .name input { background-color: transparent; border: 0; height: 40px; max-width: none; width: 100%; }
       .view-html .pay .card .name input::placeholder { color: #333; text-transform: uppercase; }
       .view-html .pay .card .pay-button { margin-top: 15px; }
       .view-html .pay .card .design-cc-button-paying { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
       .view-html .pay .card .errors { color: #c00; font-weight: 600; text-align: center; margin-bottom: 10px; }
       .view-html .pay .card .design-cc-number,
       .view-html .pay .card .design-cc-expiry,
       .view-html .pay .card .design-cc-cvc { height: 41px; }
       .view-html [name="acceptQuote"].design-accept-quote-button-loading { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
       .view-html [name="acceptQuote"].design-accept-quote-button-hidden { display: none; }
       .view-html #design-paypal-button { margin: auto; width: 250px;  }
       .view-html .document-frame { box-shadow: unset; }
           

   Still in "base.css", check whether there are CSS declarations for the selectors #design-paypal-button, #design-paypal-button.design-custom-order-button and #design-order-button.design-cc-button-paying.

   If those selectors are present, add the .checkout prefix followed by a space, to limit those styles to the checkout page only and prevent them from affecting the new elements on the quotes page.

   Respy Wide

   Open the "base.css" file in the "css" directory and find the /* view.html */ comment.

   Paste the CSS between this comment and the next one:

   
       .view-html .pay { background-color: #fff; height: 0; opacity: 0; text-align: center; will-change: opacity; }
       .view-html .pay.design-pay-isopen { display: block; margin: 30px 0; padding: 30px 40px; height: auto; opacity: 1; transition: transform 500ms, opacity 200ms; }
       .view-html .pay .card > div:first-child { margin-top: 0; }
       .view-html .pay .card > div { margin-top: 10px; }
       .view-html .pay .card .expire-cvc-row { column-gap: 10px; display: flex; }
       .view-html .pay .card .expire-cvc-row > div { width: 50%; }
       .view-html .pay .card .cvc,
       .view-html .pay .card .expiry,
       .view-html .pay .card .number,
       .view-html .pay .card .name { background:#F9F9F9; border-radius: 4px; border: 2px solid #eee; width: 100%; padding: 0; }
       .view-html .pay .card .cvc > div,
       .view-html .pay .card .expiry > div,
       .view-html .pay .card .number > div,
       .view-html .pay .card .name input { padding: 10px 15px; }
       .view-html .pay .card .name input { background-color: transparent; border: 0; height: 40px; max-width: none; width: 100%; }
       .view-html .pay .card .name input::placeholder { color: #333; text-transform: uppercase; }
       .view-html .pay .card .pay-button { margin-top: 15px; }
       .view-html .pay .card .design-cc-button-paying { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
       .view-html .pay .card .errors { color: #c00; font-weight: 600; text-align: center; margin-bottom: 10px; }
       .view-html .pay .card .design-cc-number,
       .view-html .pay .card .design-cc-expiry,
       .view-html .pay .card .design-cc-cvc { height: 41px; }
       .view-html [name="acceptQuote"].design-accept-quote-button-loading { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
       .view-html [name="acceptQuote"].design-accept-quote-button-hidden { display: none; }
       .view-html #design-paypal-button { margin: auto; width: 250px;  }
       .view-html .document-frame { box-shadow: unset; }
           

   Still in "base.css", check whether there are CSS declarations for the selectors #design-paypal-button, #design-paypal-button.design-custom-order-button and #design-order-button.design-cc-button-paying.

   If those selectors are present, add the .checkout prefix followed by a space, to limit those styles to the checkout page only and prevent them from affecting the new elements on the quotes page.

   Respy Classic

   Open the "base.css" file in the "css" directory and find the /* view.html */ comment.

   Paste the CSS between this comment and the next one:

   
       .view-html .pay { background-color: #fff; height: 0; opacity: 0; text-align: center; will-change: opacity; }
       .view-html .pay.design-pay-isopen { display: block; margin: 30px 0; padding: 30px 40px; height: auto; opacity: 1; transition: transform 500ms, opacity 200ms; }
       .view-html .pay .card > div:first-child { margin-top: 0; }
       .view-html .pay .card > div { margin-top: 10px; }
       .view-html .pay .card .expire-cvc-row { column-gap: 10px; display: flex; }
       .view-html .pay .card .expire-cvc-row > div { width: 50%; }
       .view-html .pay .card .cvc,
       .view-html .pay .card .expiry,
       .view-html .pay .card .number,
       .view-html .pay .card .name { background:#F9F9F9; border-radius: 4px; border: 2px solid #eee; width: 100%; padding: 0; }
       .view-html .pay .card .cvc > div,
       .view-html .pay .card .expiry > div,
       .view-html .pay .card .number > div,
       .view-html .pay .card .name input { padding: 10px 15px; }
       .view-html .pay .card .name input { background-color: transparent; border: 0; height: 40px; max-width: none; width: 100%; }
       .view-html .pay .card .name input::placeholder { color: #333; text-transform: uppercase; }
       .view-html .pay .card .pay-button { margin-top: 15px; }
       .view-html .pay .card .design-cc-button-paying { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
       .view-html .pay .card .errors { color: #c00; font-weight: 600; text-align: center; margin-bottom: 10px; }
       .view-html .pay .card .design-cc-number,
       .view-html .pay .card .design-cc-expiry,
       .view-html .pay .card .design-cc-cvc { height: 41px; }
       .view-html [name="acceptQuote"].design-accept-quote-button-loading { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
       .view-html [name="acceptQuote"].design-accept-quote-button-hidden { display: none; }
       .view-html #design-paypal-button { margin: auto; width: 250px;  }
       .view-html .document-frame { box-shadow: unset; }
           

   Still in "base.css", check whether there are CSS declarations for the selectors #design-paypal-button, #design-paypal-button.design-custom-order-button and #design-order-button.design-cc-button-paying.

   If those selectors are present, add the .checkout prefix followed by a space, to limit those styles to the checkout page only and prevent them from affecting the new elements on the quotes page.

   Valentine

   Open the "pages.css" file in the "css" directory and find the /* || View - 'view.html' */ comment.

   Paste the CSS between this comment and the next one:

   
       .view-page .pay { 
         background-color: #fff; 
         height: 0; 
         opacity: 0; 
         text-align: center; 
         will-change: opacity;
         max-width: 600px;
         margin-left: auto;
         margin-right: auto;
     }
     
     .view-page .pay.design-pay-isopen { 
         display: block; 
         margin-top: 30px;
         padding: 30px 40px; 
         height: auto; 
         opacity: 1; 
         transition: transform 500ms, opacity 200ms; 
     }
     
     .view-page .pay .card > div:first-child { 
         margin-top: 0; 
     }
     
     .view-page .pay .card > div { 
         margin-top: 10px; 
     }
     
     .view-page .pay .card .expire-cvc-row { 
         column-gap: 10px; 
         display: flex; 
     }
     
     .view-page .pay .card .expire-cvc-row > div { 
         width: 50%; 
     }
     
     .view-page .pay .card .cvc,
     .view-page .pay .card .expiry,
     .view-page .pay .card .number,
     .view-page .pay .card .name { 
         background:#F9F9F9; 
         border-radius: 4px; 
         border: 2px solid #eee; 
         width: 100%; 
         padding: 0; 
     }
     
     .view-page .pay .card .cvc > div,
     .view-page .pay .card .expiry > div,
     .view-page .pay .card .number > div,
     .view-page .pay .card .name input { 
         padding: 10px 15px; 
     }
     
     .view-page .pay .card .name input { 
         background-color: transparent; 
         border: 0; 
         height: 40px; 
         max-width: none; 
         width: 100%; 
     }
     
     .view-page .pay .card .name input::placeholder { 
         color: #333; 
         text-transform: uppercase; 
     }
     
     .view-page .pay .card .pay-button { 
         margin-top: 15px; 
     }
     
     .view-page .pay .card .design-cc-button-paying { 
         background: url("../images/loader.gif") no-repeat center center; 
         font-size: 0; 
     }
     
     .view-page .pay .card .errors { 
         color: #c00; 
         font-weight: 600; 
         text-align: center; 
         margin-bottom: 10px; 
     }
     
     .view-page .pay .card .design-cc-number,
     .view-page .pay .card .design-cc-expiry,
     .view-page .pay .card .design-cc-cvc { 
         height: 41px; 
     }
     
     .view-page [name="acceptQuote"] {
         transition: unset!important;
     }
     
     .view-page [name="acceptQuote"].design-accept-quote-button-loading { 
         background: url("../images/loader.gif") no-repeat center center; 
         font-size: 0; 
     }
     
     .view-page [name="acceptQuote"].design-accept-quote-button-loading:hover { 
         background-color: unset!important;
         cursor: default;
     }
     
     .view-page [name="acceptQuote"].design-accept-quote-button-hidden { 
         display: none; 
     }
     
     .view-page #design-paypal-button { 
         margin: auto; 
         width: 250px;  
     }
     
     .view-page .document-frame { 
         box-shadow: unset; 
     }
           

   Still in "pages.css", check whether there are CSS declarations for the selectors #design-paypal-button and #design-paypal-button.design-custom-order-button.

   If those selectors are present, add the .checkout-page prefix followed by a space, to limit those styles to the checkout page only and prevent them from affecting the new elements on the quotes page.

Update a template with additional collections

Version 7.2, released in March 2022, allows the Advanced B2B edition to show a customer’s additional collections on the site together with their products.

Additional collections are product collections a customer can access. Products can be the same as those shown in the main catalog or different. The collections variable represents all of the customer’s additional collections and can be used on any page.

The "collection.html" template file shows the page of an additional collection together with its products.

Update a template for Stripe

Version 7.2, released in March 2022, enables payments via Stripe during checkout. The customer pays by credit card directly on the store and the order is created only after payment is completed. To support Stripe, you must modify the checkout flow, which requires template changes.

If you use Stripe, the checkout steps go from 4 to 3. The "checkout-review.html" page, where customers could review and confirm the order, has been removed. Order confirmation now happens directly on the "checkout-methods.html" page, where the customer chooses shipping and payment methods, and the order summary is shown on all checkout pages before the confirmation page.

The new templates you can install from the Template Store are already adapted with these changes. Previous templates must be updated; below we explain how.

Modify the template

Changes can be made via the back office Template Editor or with any other editor and an FTP program to upload files to the site.

1. Add the credit card fields

   First, to enable payments via Stripe, you need to add the form where the user will enter their credit card details.

   Open the "checkout-methods.html" file, which displays the list of available payment methods, and modify its HTML code.

   Select all the lines after the closing tag of the "<div class="steps">" element (except for the final line "{% end macro %}", if present) and paste the following HTML code in their place:

   
           {% if title %}<h1>{{ title }}</h1>{% end %}
   
           <div class="main-column">
   
             <div class="image">{{ image }}</div>
             <div class="content">{{ content }}</div>
   
             <form action="checkout-methods" method="post">
   
             {{ statusMessage }}
   
             <fieldset class="form methods payments">
               <legend>{{ translate("Checkout payment") }}</legend>
               {% for i, payment := range payments %}
               <div>
                 {{ payment.Choice }}
                 <label for="design-payments-choice-{{i}}">
                   <div class="name">{{ payment.Name }}</div>
                   {% if payment.Description %}
                   <div class="description">{{ payment.Description }}</div>
                   {% end if %}
                 </label>
                 {% if payment.Pay %}
                 <div class="pay">
                   {% if card, ok := payment.Pay.(CreditCard); ok %}
                   {% card.SetCssFont("https:[your-template-URL]") %}
                   <div class="number ">{{ card.Number }}</div>
                   <div class="expire-cvc-row">
                     <div class="expiry">{{ card.Expiry }}</div>
                     <div class="cvc">{{ card.CVC }}</div>
                   </div>
                   <div class="name">{{ card.Name }}</div>
                   <div class="errors">{{ card.Errors }}</div>
                   {% end %}
                 </div>
                 {% end if %}
               </div>
               {% end for %}
             </fieldset>
   
             <fieldset class="form methods shippings">
               <legend>{{ translate("Checkout shipping") }}</legend>
               {% for i, shipping := range shippings %}
               <div>
                 {{ shipping.Choice }}
                 <label for="design-shippings-choice-{{i}}">
                   <div class="name">{{ shipping.Name }}</div>
                 </label>
               </div>
               {% end for %}
             </fieldset>
   
             <fieldset class="form requests">
               <legend>{{ translate("Order requests") }}</legend>
               {{ requests }}
             </fieldset>
   
             <div class="buttons">
               <div class="go-back-button">{{ buttonGoBack }}</div>
               <div class="continue-button main-button">{{ buttonOrder }}</div>
             </div>
   
             </form>
   
           </div>
         

   In the previous code, note the following line:

   
         {% card.SetCssFont("https:[your-template-URL]") %}
         

   This line sets the Stripe font, i.e., the typography shown inside the credit card fields.

   Each template built for Open2b uses a different typography style (and therefore a different font). Stripe, on the other hand, sets a different default typography style than the templates. To make the typography consistent and avoid interface elements clashing, you must insert the URL corresponding to your font in the previous call to the SetCssFont method.

   First open the "standard.html" file in the "layouts" directory: inside the "<head></head>" element there will be an HTML line similar to this:

   
         <link href="//fonts.googleapis.com/css?family=Raleway|Roboto:300" rel="stylesheet">
         

   The "href" attribute of this "link" element contains the URL of the font used in your template. Copy and paste the URL into the card.SetCssFont method call, replacing the placeholder text "[your-template-URL]", like this:

   
         {% card.SetCssFont("https://fonts.googleapis.com/css?family=Raleway|Roboto:300") %}
         

2. Create the new order summary

   In addition to adding Stripe support, the previous code replaces the button that in earlier versions led to the order summary page with a button that confirms the order directly.

   This replacement, in effect, removes the ability for the user to review items and costs before paying. In the next steps, we will guide you through creating a new interface section that will show the order summary on all checkout pages prior to the confirmation page.

   Create a file named "checkout-cart.html" in the root directory of your template containing the following HTML:

   
           <div class="items">
             <table>
               <thead>
               <tr>
                 <th class="product">{{ translate("Cart products") }}</th>
                 <th colspan="2" class="price-quantity">{{ translate("Cart quantity and price") }}</th>
                 <th class="total-price">{{ translate("Cart total price") }}</th>
               </tr>
               </thead>
               <tbody>
               {% for item in cart.Items %}
               <tr>
                 <td class="image">{{ item.Image }}</td>
                 <td class="details">
                   <div class="name">{{ item.Name }}</div>
                   {{ item.Warning }}
                   {% if item.InfoForRequests %}
                   <div class="requests">
                     <label>{{ item.InfoForRequests }}</label>
                     <div>{{ item.Requests }}</div>
                   </div>
                   {% end if %}
                 </td>
                 <td class="quantity-price">
                   <div>{{ item.Quantity }} × {{ item.Price }}</div>
                 </td>
                 <td class="total-price">
                   {% if item.ToQuote %}
                   <div class="to-quote">{{ translate("Price to quote") }}</div>
                   {% else %}
                   <div>{{ item.TotalPrice }}</div>
                   {% end if %}
                 </td>
               </tr>
               {% end for %}
               </tbody>
               <tfoot>
               {% if not cart.ToQuote %}
               {% for discount in cart.Discounts %}
               <tr class="discount">
                 <td colspan="3"><label>{{ translate("Cart discount") }}:</label></td>
                 <td><span>{{ discount }}</span></td>
               </tr>
               {% end for %}
               <tr class="subtotal">
                 <td colspan="3"><label>{{ translate("Cart subtotal") }}:</label></td>
                 <td>{{ cart.Subtotal }}</td>
               </tr>
               <tr class="shipping">
                 <td colspan="3">
                   <label>{{ translate("Cart shipping") }}:</label>
                   {{ cart.Shipping }}
                 </td>
                 <td>{{ cart.ShippingCost }}</td>
               </tr>
               <tr class="payment">
                 <td colspan="3">
                   <label>{{ translate("Cart payment") }}:</label>
                   {{ cart.Payment }}
                 </td>
                 <td>{{ cart.PaymentCost }}</td>
               </tr>
               {% end if %}
               <tr class="total">
                 <td colspan="3"><label>{{ translate("Cart total") }}:</label></td>
                 <td>
                   {% if cart.ToQuote %}
                   <span class="to-quote">{{ translate("Price to quote") }}</span>
                   {% else %}
                   {{ cart.Total.Gross }}
                   {% end if %}
                 </td>
               </tr>
               </tfoot>
             </table>
           </div>
           

   This new file contains all the information about items and costs in the current order.

3. Create the partial containing the order summary

   To make sure the order summary is updated after a change in shipping or payment method, we first need to place it inside an HTML element with the ID: "design-checkout-cart". This ID allows the system to identify the section and update it after the user’s choices.

   For this purpose, go to the "partials" directory and create a new file called "checkout-cart-partial.html", pasting the following HTML into it.

   
             <div class="mobile-checkout-cart-button" data-design-open="checkout-cart-slider">{{ translate("Show cart") }} </div>
     
             <div id="checkout-cart-slider">
                 <div class="mobile-checkout-cart-close" data-design-close> </div>
                 <div id="design-checkout-cart">
                   {{ render "/checkout-cart.html" }}
                 </div>
             </div>
           

   Note that the <div id="design-checkout-cart"> element is wrapped in another element, <div id="checkout-cart-slider">. This additional element (enabled only on smartphones and tablets) can be opened full screen and then closed by the user by tapping the related buttons (the elements with class "mobile-checkout-cart-button" and "mobile-checkout-cart-close"), making the information easy to read even on small devices.

   More details
   

   • The {{ render }} instruction in our Scriggo template engine “injects” the content of an HTML file into another HTML file that called it.
   • A "partial" is a file containing HTML code that will later be reused in multiple parts of the template. Creating a partial is a way to keep code in a single file that can be reused in several places, avoiding duplication and making future changes faster and easier.

4. Show the order summary on checkout pages

   We can finally add the new order summary to the checkout pages. To do this, just add the following line at the bottom of the "checkout-addresses.html", "checkout-methods.html" and "checkout-quote-request.html" pages:

   
           {{ render "partials/checkout-cart-partial.html" }}
           

   In addition, note that the "checkout-quote-request.html" page already contained a brief order summary, displayed at the bottom. To avoid duplicating information, remove the following line from the file:

   
           {{ render "partials/checkout-quote-items.html" }}
           

5. Remove references to checkout-review

   Now that you have successfully reduced the checkout steps from 4 to 3, you can remove references to the “checkout review” step, which is no longer used.

   In the "checkout-addresses.html" and "checkout-methods.html" pages, remove the following line. It will be inside the <div class="steps"> HTML element and displayed “checkout review” as the third step in the UI.

   
           <li>{{ translate("Checkout review") }}</li>
           

   Similarly, in the "checkout-confirmation.html" page and still inside the "<div class="steps">" HTML element, remove the following line:

   
           <li class="done"><div>{{ translate("Checkout review") }}</div></li>  
           

6. Add the translations

   During this template update procedure, two elements were added that require translations to display in the correct language. The following instructions cover English, Spanish, French, and Italian, but the same steps can be used for any language enabled in your website.

   The first element that needs a translation is the button that opens the order summary, shown on smartphones and tablets. To add translations, open the "languages" directory. You will find several folders, each named after a language code used by your site ("en" for English, "es" for Spanish, "fr" for French and "it" for Italian). In each folder, open the "template.ini" file and add the translation for the button, placing it in alphabetical order with the other translations already present.
   
   English

   Show cart=Show cart

   Spanish

   Show cart=Mostrar carro

   French

   Show cart=Afficher le panier

   Italian

   Show cart=Mostra carrello

   The second element that needs a translation is the placeholder text displayed in the “card holder” credit card field. As before, open the folder for the language you want to translate, but this time open the "system.ini" file. Add the translation, placing it at the bottom of the file.
   
   English

   CreditCardName=Card holder

   Spanish

   CreditCardName=Titular de la tarjeta

   French

   CreditCardName=Titulaire de la carte

   Italian

   CreditCardName=Intestatario carta

7. Add the CSS

   To complete the update, new CSS rules must be added, i.e., the rules that tell the browser the layout and style to use when displaying the interface elements.

   In our case, the main goals of the new CSS are: define the credit card layout and position the new order summary, both on desktop monitors and on mobile devices.

   Since the instructions vary slightly depending on the template, click the button for your template to view the correct CSS and where to insert it.

   Axis

   Silva

   Supply

   Respy Wide

   Respy Classic

   Axis

   Open the "base.css" file in the "css" directory and find the /* checkout-(…).html */ comment.

   Between this comment and the next you will find all the CSS for checkout pages: select and delete that CSS, then paste the following rules in its place.

   
               .checkout header > .cart, .checkout header > .banners { display: none; }
               .checkout .steps { float: left; grid-area: steps; margin-bottom: 50px; margin-top: 50px; width: 100%; }
               .checkout .steps ol { align-items: center; column-gap: 40px; counter-reset: li; cursor: default; display: flex; justify-content: center; list-style: none; margin-left: 2px; padding: 0; }
               .checkout .steps li { color: #A0A0A0; font-size: 15px; height: 26px; line-height: 26px; margin: 12px 0 0 35px; position: relative; text-transform: uppercase; }
               .checkout .steps li a { color: #A0A0A0; }
               .checkout .steps li:before { background: #A0A0A0; border-radius: 20px; color: #FFF; content: counter(li); counter-increment: li; left: -33px; position: absolute; text-align: center; top: 0; width: 26px; }
               .checkout .steps li.current { color: #222; }
               .checkout .steps li.current:before { background: #222; }
               .checkout .main { column-gap: 100px; display: grid; grid-template-areas: "steps steps" "title title" "form cart"; grid-template-columns: 1fr 1fr; padding: 0px 20px; }
               html.checkout-review-html .checkout .main { display: inherit!important; }
               html.checkout-confirmation-html .checkout .main { display: block; }
               .checkout .main h1 { grid-area: title; text-align: center }
               .checkout .main form { margin-top: 20px; }
               .checkout .main-column { clear: none; grid-area: form; margin-left: 0; width: 100%; }
               fieldset.form#billing-address input { max-width: 300px; }
               fieldset.form.methods > div { align-items: center; background: #FFF; border: 1px solid #EEE; border-bottom: none; color: #333; display: grid!important; grid-template-areas: "input label" "pay pay"; grid-template-columns: max-content 1fr; padding: 10px; width: 100%; }
               fieldset.form.methods > div:first-of-type { border-top-left-radius: 5px; border-top-right-radius: 5px; }
               fieldset.form.methods > div:last-of-type { border-bottom: 1px solid #EEE; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
               fieldset.form.methods label { background: transparent; border: none!important; border-bottom: none!important; cursor: pointer; display: block; padding: 0px!important; white-space: unset!important; }
               fieldset.form.methods input[type=radio] { margin: 0 20px 0 10px }
               fieldset.form.methods .name { color: #333; font-size: 16px; margin-left: 0; padding-right: 15px; }
               fieldset.form.methods .description { color: #666; margin-left: 0; padding-right: 15px; }
               fieldset.form.methods .pay { display: none; grid-area: pay; margin-top: 10px; padding-top: 5px; text-align: center; }
               fieldset.form.methods input[type=radio]:checked ~ .pay { display: block; padding-left: 10px; padding-right: 10px; }
               fieldset.form.methods .pay > div { margin-top: 10px; }
               fieldset.form.methods .pay .expire-cvc-row { column-gap: 10px; display: flex; }
               fieldset.form.methods .pay .expire-cvc-row > div { width: 50%; }
               fieldset.form.methods .pay .cvc,
               fieldset.form.methods .pay .expiry,
               fieldset.form.methods .pay .number,
               fieldset.form.methods .pay .name { background:#F9F9F9; border-radius: 4px; border: 2px solid #eee; width: 100%; padding: 0; }
               fieldset.form.methods .pay .cvc > div,
               fieldset.form.methods .pay .expiry > div,
               fieldset.form.methods .pay .number > div,
               fieldset.form.methods .pay .name input { padding: 10px 15px; }
               fieldset.form.methods .pay .name input { background-color: transparent; border: 0; height: 40px; max-width: none; width: 100%; }
               fieldset.form.methods .pay .name input::placeholder { color: #333; text-transform: uppercase; }
               fieldset.form.methods .pay .pay-button.main-button { clear: both; margin-top: 15px; padding-right: 0; }
               fieldset.form.methods .pay .logos { background-color: #FFF; background: url('../images/cards.png') 20px center no-repeat #FFF; background-size: auto 25px; border-bottom: 1px solid #EEE; height: 50px; margin: 0 -20px 20px -20px; }
               fieldset.form.methods .pay .logos span { color: #b3b3b3; padding: 20px 0 0 125px; vertical-align: middle; }
               fieldset.form.methods .pay .errors { color: #c00; font-weight: 600; text-align: center; }
               #design-order-button.design-cc-button-paying { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
               .checkout textarea[name="requests"] { height: 100px; width: 100%; }
               .checkout .ship-to-another-address { display: block; margin: 20px 0; }
               .checkout .accept-terms { display: block; line-height: 2em; margin: 15px 0; }
               .checkout .buttons { display: table; margin-top: 50px; margin-bottom: 20px; width: 100%; }
               .checkout .buttons > div { display: table-cell; }
               .checkout .go-back-button input { min-width: 180px; }
               .checkout .continue-button, .checkout .order-button { text-align: right; }
               .checkout .send-quote-request-button { text-align: right; }
               .checkout .continue-button input, .checkout .order-button input, .checkout .send-quote-request-button input { min-width: 200px; }
               .checkout .pay-button { text-align: center; }
               .checkout .pay-button input { min-width: 180px; }
               @media screen and (min-width:1024px) {
                 .checkout .pay-button { padding-right: 190px; }
               }
               .order h2 { margin-bottom: 10px; }
               .order .addresses { display: table; width: 100%; }
               .order .addresses .billing-address { display: table-cell; padding-right: 10px; width: 50%; }
               .order .addresses .billing-address .contact-address { margin-top: 10px; }
               .order .addresses .shipping-address { display: table-cell; padding-right: 10px; width: 50%; }
               .checkout #checkout-cart-slider { grid-area: cart; }
               .checkout #checkout-cart-slider table { padding: 10px; } 
               .checkout #checkout-cart-slider th.product { padding-left: 10px!important; }
               .checkout #checkout-cart-slider td.image img { height: auto; max-width: 90px; }
               @media screen and (min-width: 1024px) {  
                 .checkout .mobile-checkout-cart-button,
                 .checkout .mobile-checkout-cart-close { display: none; }
               }
               .checkout .items { clear: both; padding-top: 0; }
               .checkout .items table { border-collapse: separate; width: 100%; }
               .checkout .items th { border-bottom: 1px solid #E5E5E5; padding: 0 10px 10px 10px; font-size: 13px; font-weight: normal; text-align: right; text-transform: uppercase; }
               .checkout .items th.product { font-size: 15px; padding-left: 0; text-align: left; }
               .checkout .items tbody tr { background: #FFF; }
               .checkout .items td { padding: 10px; }
               .checkout .items td:first-child { border-left: 1px solid #EEE; }
               .checkout .items td:last-child { border-right: 1px solid #EEE; }
               .checkout .items td.details { width: 100%; }
               .checkout .items td.quantity-price { text-align: center; white-space: nowrap; }
               .checkout .items td.total-price { text-align: right; white-space: nowrap; }
               .checkout .items td.total-price .to-quote { color: #999; }
               .checkout .items tbody tr { border-top: 1px solid #EEE; }
               .checkout .items tbody tr:last-child td { border-bottom: 1px solid #E5E5E5; }
               .checkout .items tfoot tr { background: #F9F9F9; }
               .checkout .items tfoot td { text-align: right; }
               .checkout .items .subtotal label { font-size: 15px; }
               .checkout .items .subtotal span { font-size: 15px; }
               .checkout .items .total { background: none; }
               .checkout .items .total td { border: none; border-top: 1px solid #E5E5E5; }
               .checkout .items .total label { font-size: 22px; }
               .checkout .items .total span { font-size: 22px; }
               .checkout .confirmation { margin: 20px 0; }
               .checkout .confirmation p { margin-bottom: 10px; margin-top: 10px; }
               .checkout .confirmation p em { font-style: normal; }
               

   Now open the "mobile.css" file, still in the "css" directory. Unlike "base.css", this file contains two sections with checkout-related CSS rules for different device sizes.

   Find the first /* checkout-(…).html */ comment. Select all CSS between this comment and the next, and replace it with the following CSS rules:

   
               .checkout .main { display: grid; grid-template-areas: "steps" "title" "cart" "form"; grid-template-columns: 1fr; }
               .checkout .main form { margin-right: 10px; }
               .checkout .order,
               .checkout .confirmation { margin-left: 10px; margin-right: 10px; }
               .checkout #checkout-cart-slider { background-color: #F9F9F9; height: 100%; overflow-y: scroll; padding-top: 10px; position: fixed; right: -100%; top: 0; transition: right .5s ease-out; width: 100%; z-index: 99999; }
               .checkout #checkout-cart-slider.design-isopen { right: 0; }
               .checkout .mobile-checkout-cart-close { border-radius: 6px; height: 40px; margin-left: auto; position: relative; right: 15px; width: 40px; }
               .checkout .mobile-checkout-cart-close:before, .checkout .mobile-checkout-cart-close:after { background-color: #000; content:''; height: 2px; position: absolute; top: 20px; width: 20px; }
               .checkout .mobile-checkout-cart-close:before { left: 10px; transform: rotate(45deg); }
               .checkout .mobile-checkout-cart-close:after { right: 10px; transform: rotate(-45deg); }
               .checkout .items { padding-top: 10px; }
               .checkout .mobile-checkout-cart-button { background: #f5f5f5; border: 1px solid #e3e3e3; box-shadow: 0 1px 0 1px #cacaca; color: #6f6f6f; font-size: 16px; margin-bottom: 50px; margin: auto; outline: none; padding: 8px 30px; position: relative; width: max-content; }
               fieldset.form.methods > div { grid-template-columns: max-content 1fr; }
               .checkout form fieldset input { max-width: 432px; }
               

   Now find the second /* checkout-(…).html */ comment. Select and delete the first 4 lines of CSS after the comment. Replace them with the following CSS:

   
               .checkout .steps { float: none; margin-top: 5px; margin-bottom: 20px; overflow: hidden; width: auto; }
               .checkout .steps ol { display: table; width: 100%; padding-left: 33px; }
               .checkout .steps li { display: table-cell; font-size: 11px; width: 33.33%; }
               .checkout .steps li:last-child { display: none; }
               .checkout .steps > ol { flex-flow: row wrap; justify-content: left; }
               

   Silva

   Open the "base.css" file in the "css" directory and find the /* checkout-(…).html */ comment.

   Between this comment and the next you will find all the CSS for checkout pages: select and delete that CSS, then paste the following rules in its place.

   
               @media screen and (min-width:1024px) {
                 .checkout nav { display: none; }
               }
               .checkout header > .cart, .checkout header > .banners { display: none; }
               .checkout .steps { float: left; grid-area: steps; margin-bottom: 50px; margin-top: 50px; width: 100%; }
               .checkout .steps ol { align-items: center; column-gap: 40px; counter-reset: li; cursor: default; display: flex; justify-content: center; list-style: none; margin-left: 2px; padding: 0; }
               .checkout .steps li { color: #A0A0A0; font-size: 15px; height: 26px; line-height: 26px; margin: 12px 0 0 35px; position: relative; text-transform: uppercase; }
               .checkout .steps li a { color: #A0A0A0; }
               .checkout .steps li:before { background: #A0A0A0; border-radius: 20px; color: #FFF; content: counter(li); counter-increment: li; left: -33px; position: absolute; text-align: center; top: 0; width: 26px; }
               .checkout .steps li.current { color: #222; }
               .checkout .steps li.current:before { background: #222; }
               .checkout .main { column-gap: 100px; display: grid; grid-template-areas: "steps steps" "title title" "form cart"; grid-template-columns: 1fr 1fr; padding: 0px 20px; }
               html.checkout-review-html .checkout .main { display: inherit!important; }
               html.checkout-confirmation-html .checkout .main { display: block; }
               .checkout .main h1 { grid-area: title; text-align: center }
               .checkout .main form { margin-top: 20px; }
               .checkout .main-column { clear: none; grid-area: form; margin-left: 0; width: 100%; }
               fieldset.form#billing-address input { max-width: 300px; }
               fieldset.form.methods > div { align-items: center; background: #FFF; border: 1px solid #EEE; border-bottom: none; color: #333; display: grid!important; grid-template-areas: "input label" "pay pay"; grid-template-columns: max-content 1fr; padding: 10px; width: 100%; }
               fieldset.form.methods > div:first-of-type { border-top-left-radius: 5px; border-top-right-radius: 5px; }
               fieldset.form.methods > div:last-of-type { border-bottom: 1px solid #EEE; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
               fieldset.form.methods label { background: transparent; border: none!important; border-bottom: none!important; cursor: pointer; display: block; padding: 0px!important; white-space: unset!important; }
               fieldset.form.methods input[type=radio] { margin: 0 20px 0 10px }
               fieldset.form.methods .name { color: #333; font-size: 16px; margin-left: 0; padding-right: 15px; }
               fieldset.form.methods .description { color: #666; margin-left: 0; padding-right: 15px; }
               fieldset.form.methods .pay { display: none; grid-area: pay; margin-top: 10px; padding-top: 5px; text-align: center; }
               fieldset.form.methods input[type=radio]:checked ~ .pay { display: block; padding-left: 10px; padding-right: 10px; }
               fieldset.form.methods .pay > div { margin-top: 10px; }
               fieldset.form.methods .pay .expire-cvc-row { column-gap: 10px; display: flex; }
               fieldset.form.methods .pay .expire-cvc-row > div { width: 50%; }
               fieldset.form.methods .pay .cvc,
               fieldset.form.methods .pay .expiry,
               fieldset.form.methods .pay .number,
               fieldset.form.methods .pay .name { background:#F9F9F9; border-radius: 4px; border: 2px solid #eee; width: 100%; padding: 0; }
               fieldset.form.methods .pay .cvc > div,
               fieldset.form.methods .pay .expiry > div,
               fieldset.form.methods .pay .number > div,
               fieldset.form.methods .pay .name input { padding: 10px 15px; }
               fieldset.form.methods .pay .name input { background-color: transparent; border: 0; height: 40px; max-width: none; width: 100%; }
               fieldset.form.methods .pay .name input::placeholder { color: #333; text-transform: uppercase; }
               fieldset.form.methods .pay .pay-button.main-button { clear: both; margin-top: 15px; padding-right: 0; }
               fieldset.form.methods .pay .logos { background-color: #FFF; background: url('../images/cards.png') 20px center no-repeat #FFF; background-size: auto 25px; border-bottom: 1px solid #EEE; height: 50px; margin: 0 -20px 20px -20px; }
               fieldset.form.methods .pay .logos span { color: #b3b3b3; padding: 20px 0 0 125px; vertical-align: middle; }
               fieldset.form.methods .pay .errors { color: #c00; font-weight: 600; text-align: center; }
               #design-order-button.design-cc-button-paying { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
               .checkout textarea[name="requests"] { height: 100px; width: 100%; }
               .checkout .ship-to-another-address { display: block; margin: 20px 0; }
               .checkout .accept-terms { display: block; line-height: 2em; margin: 15px 0; }
               .checkout .buttons { display: table; margin-top: 50px; margin-bottom: 20px; width: 100%; }
               .checkout .buttons > div { display: table-cell; }
               .checkout .go-back-button input { min-width: 180px; }
               .checkout .continue-button, .checkout .order-button { text-align: right; }
               .checkout .send-quote-request-button { text-align: right; }
               .checkout .continue-button input, .checkout .order-button input, .checkout .send-quote-request-button input { min-width: 200px; }
               .checkout .pay-button { text-align: center; }
               .checkout .pay-button input { min-width: 180px; }
               @media screen and (min-width:1024px) {
                 .checkout .pay-button { padding-right: 190px; }
               }
               .order h2 { margin-bottom: 10px; }
               .order .addresses { display: table; width: 100%; }
               .order .addresses .billing-address { display: table-cell; padding-right: 10px; width: 50%; }
               .order .addresses .billing-address .contact-address { margin-top: 10px; }
               .order .addresses .shipping-address { display: table-cell; padding-right: 10px; width: 50%; }
               .checkout #checkout-cart-slider { grid-area: cart; }
               .checkout #checkout-cart-slider table { padding: 10px; } 
               .checkout #checkout-cart-slider th.product { padding-left: 10px!important; }
               .checkout #checkout-cart-slider td.image img { height: auto; max-width: 90px; }
               @media screen and (min-width: 1024px) {  
                 .checkout .mobile-checkout-cart-button,
                 .checkout .mobile-checkout-cart-close { display: none; }
               }
               .checkout .items { clear: both; padding-top: 0; }
               .checkout .items table { border-collapse: separate; width: 100%; }
               .checkout .items th { border-bottom: 1px solid #E5E5E5; padding: 0 10px 10px 10px; font-size: 13px; font-weight: normal; text-align: right; text-transform: uppercase; }
               .checkout .items th.product { font-size: 15px; padding-left: 0; text-align: left; }
               .checkout .items tbody tr { background: #FFF; }
               .checkout .items td { padding: 10px; }
               .checkout .items td:first-child { border-left: 1px solid #EEE; }
               .checkout .items td:last-child { border-right: 1px solid #EEE; }
               .checkout .items td.details { width: 100%; }
               .checkout .items td.quantity-price { text-align: center; white-space: nowrap; }
               .checkout .items td.total-price { text-align: right; white-space: nowrap; }
               .checkout .items td.total-price .to-quote { color: #999; }
               .checkout .items tbody tr { border-top: 1px solid #EEE; }
               .checkout .items tbody tr:last-child td { border-bottom: 1px solid #E5E5E5; }
               .checkout .items tfoot tr { background: #F9F9F9; }
               .checkout .items tfoot td { text-align: right; }
               .checkout .items .subtotal label { font-size: 15px; }
               .checkout .items .subtotal span { font-size: 15px; }
               .checkout .items .total { background: none; }
               .checkout .items .total td { border: none; border-top: 1px solid #E5E5E5; }
               .checkout .items .total label { font-size: 22px; }
               .checkout .items .total span { font-size: 22px; }
               .checkout .confirmation { margin: 20px 0; }
               .checkout .confirmation p { margin-bottom: 10px; margin-top: 10px; }
               .checkout .confirmation p em { font-style: normal; }
               

   Now open the "mobile.css" file, still in the "css" directory. Unlike "base.css", this file contains two sections with checkout-related CSS rules for different device sizes.

   Find the first /* checkout-(…).html */ comment. Select all CSS between this comment and the next, and replace it with the following CSS rules:

   
               .checkout .main { display: grid; grid-template-areas: "steps" "title" "cart" "form"; grid-template-columns: 1fr; }
               .checkout .main form { margin-right: 10px; }
               .checkout .order,
               .checkout .confirmation { margin-left: 10px; margin-right: 10px; }
               .checkout #checkout-cart-slider { background-color: #F9F9F9; height: 100%; overflow-y: scroll; padding-top: 10px; position: fixed; right: -100%; top: 0; transition: right .5s ease-out; width: 100%; z-index: 99999; }
               .checkout #checkout-cart-slider.design-isopen { right: 0; }
               .checkout .mobile-checkout-cart-close { border-radius: 6px; height: 40px; margin-left: auto; position: relative; right: 15px; width: 40px; }
               .checkout .mobile-checkout-cart-close:before, .checkout .mobile-checkout-cart-close:after { background-color: #000; content:''; height: 2px; position: absolute; top: 20px; width: 20px; }
               .checkout .mobile-checkout-cart-close:before { left: 10px; transform: rotate(45deg); }
               .checkout .mobile-checkout-cart-close:after { right: 10px; transform: rotate(-45deg); }
               .checkout .items { padding-top: 10px; }
               div.mobile-checkout-cart-button { background: linear-gradient(to bottom, hsla(134, 50%, 35%, 1), #2d862d); border-radius: 0.3em; border: 0; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 30%); color: #fff; cursor: pointer; font-size: 16px; margin-bottom: 50px; margin: auto; outline: none; padding: 8px 30px; position: relative; text-shadow: 0 0 1px #000; top: 0; transition: top 0.3s cubic-bezier(0.19, 1, 0.22, 1); width: max-content; }
               fieldset.form.methods > div { grid-template-columns: max-content 1fr; }
               .checkout form fieldset input { max-width: 432px; }
               

   Now find the second /* checkout-(…).html */ comment. Select and delete the first 4 lines of CSS after the comment. Replace them with the following CSS:

   
               .checkout .steps { float: none; margin-top: 5px; margin-bottom: 20px; overflow: hidden; width: auto; }
               .checkout .steps ol { display: table; width: 100%; padding-left: 33px; }
               .checkout .steps li { display: table-cell; font-size: 11px; width: 33.33%; }
               .checkout .steps li:last-child { display: none; }
               .checkout .steps > ol { flex-flow: row wrap; justify-content: left; }
               

   Supply

   Open the "base.css" file in the "css" directory and find the /* checkout-(…).html */ comment.

   Between this comment and the next you will find all the CSS for checkout pages: select and delete that CSS, then paste the following rules in its place.

   
               @media screen and (min-width:1024px) {
                 .checkout nav { display: none; }
               }
               .checkout header > .cart, .checkout header > .banners { display: none; }
               .checkout .steps { float: left; grid-area: steps; margin-bottom: 50px; margin-top: 50px; width: 100%; }
               .checkout .steps ol { align-items: center; column-gap: 40px; counter-reset: li; cursor: default; display: flex; justify-content: center; list-style: none; margin-left: 2px; padding: 0; }
               .checkout .steps li { color: #A0A0A0; font-size: 15px; height: 26px; line-height: 26px; margin: 12px 0 0 35px; position: relative; text-transform: uppercase; }
               .checkout .steps li a { color: #A0A0A0; }
               .checkout .steps li:before { background: #A0A0A0; border-radius: 20px; color: #FFF; content: counter(li); counter-increment: li; left: -33px; position: absolute; text-align: center; top: 0; width: 26px; }
               .checkout .steps li.current { color: #222; }
               .checkout .steps li.current:before { background: #222; }
               .checkout .main { column-gap: 100px; display: grid; grid-template-areas: "steps steps" "title title" "form cart"; grid-template-columns: 1fr 1fr; padding: 0px 20px; }
               html.checkout-review-html .checkout .main { display: inherit!important; }
               html.checkout-confirmation-html .checkout .main { display: block; }
               .checkout .main h1 { grid-area: title; text-align: center }
               .checkout .main form { margin-top: 20px; }
               .checkout .main-column { clear: none; grid-area: form; margin-left: 0; width: 100%; }
               fieldset.form#billing-address input { max-width: 300px; }
               fieldset.form.methods > div { align-items: center; background: #FFF; border: 1px solid #EEE; border-bottom: none; color: #333; display: grid!important; grid-template-areas: "input label" "pay pay"; grid-template-columns: max-content 1fr; padding: 10px; width: 100%; }
               fieldset.form.methods > div:first-of-type { border-top-left-radius: 5px; border-top-right-radius: 5px; }
               fieldset.form.methods > div:last-of-type { border-bottom: 1px solid #EEE; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
               fieldset.form.methods label { background: transparent; border: none!important; border-bottom: none!important; cursor: pointer; display: block; padding: 0px!important; white-space: unset!important; }
               fieldset.form.methods input[type=radio] { margin: 0 20px 0 10px }
               fieldset.form.methods .name { color: #333; font-size: 16px; margin-left: 0; padding-right: 15px; }
               fieldset.form.methods .description { color: #666; margin-left: 0; padding-right: 15px; }
               fieldset.form.methods .pay { display: none; grid-area: pay; margin-top: 10px; padding-top: 5px; text-align: center; }
               fieldset.form.methods input[type=radio]:checked ~ .pay { display: block; padding-left: 10px; padding-right: 10px; }
               fieldset.form.methods .pay > div { margin-top: 10px; }
               fieldset.form.methods .pay .expire-cvc-row { column-gap: 10px; display: flex; }
               fieldset.form.methods .pay .expire-cvc-row > div { width: 50%; }
               fieldset.form.methods .pay .cvc,
               fieldset.form.methods .pay .expiry,
               fieldset.form.methods .pay .number,
               fieldset.form.methods .pay .name { background:#F9F9F9; border-radius: 4px; border: 2px solid #eee; width: 100%; padding: 0; }
               fieldset.form.methods .pay .cvc > div,
               fieldset.form.methods .pay .expiry > div,
               fieldset.form.methods .pay .number > div,
               fieldset.form.methods .pay .name input { padding: 10px 15px; }
               fieldset.form.methods .pay .name input { background-color: transparent; border: 0; height: 40px; max-width: none; width: 100%; }
               fieldset.form.methods .pay .name input::placeholder { color: #333; text-transform: uppercase; }
               fieldset.form.methods .pay .pay-button.main-button { clear: both; margin-top: 15px; padding-right: 0; }
               fieldset.form.methods .pay .logos { background-color: #FFF; background: url('../images/cards.png') 20px center no-repeat #FFF; background-size: auto 25px; border-bottom: 1px solid #EEE; height: 50px; margin: 0 -20px 20px -20px; }
               fieldset.form.methods .pay .logos span { color: #b3b3b3; padding: 20px 0 0 125px; vertical-align: middle; }
               fieldset.form.methods .pay .errors { color: #c00; font-weight: 600; text-align: center; }
               #design-order-button.design-cc-button-paying { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
               .checkout textarea[name="requests"] { height: 100px; width: 100%; }
               .checkout .ship-to-another-address { display: block; margin: 20px 0; }
               .checkout .accept-terms { display: block; line-height: 2em; margin: 15px 0; }
               .checkout .buttons { display: table; margin-top: 50px; margin-bottom: 20px; width: 100%; }
               .checkout .buttons > div { display: table-cell; }
               .checkout .go-back-button input { min-width: 180px; }
               .checkout .continue-button, .checkout .order-button { text-align: right; }
               .checkout .send-quote-request-button { text-align: right; }
               .checkout .continue-button input, .checkout .order-button input, .checkout .send-quote-request-button input { min-width: 200px; }
               .checkout .pay-button { text-align: center; }
               .checkout .pay-button input { min-width: 180px; }
               @media screen and (min-width:1024px) {
                 .checkout .pay-button { padding-right: 190px; }
               }
               .order h2 { margin-bottom: 10px; }
               .order .addresses { display: table; width: 100%; }
               .order .addresses .billing-address { display: table-cell; padding-right: 10px; width: 50%; }
               .order .addresses .billing-address .contact-address { margin-top: 10px; }
               .order .addresses .shipping-address { display: table-cell; padding-right: 10px; width: 50%; }
               .checkout #checkout-cart-slider { grid-area: cart; }
               .checkout #checkout-cart-slider table { padding: 10px; } 
               .checkout #checkout-cart-slider th.product { padding-left: 10px!important; }
               .checkout #checkout-cart-slider td.image img { height: auto; max-width: 90px; }
               @media screen and (min-width: 1024px) {  
                 .checkout .mobile-checkout-cart-button,
                 .checkout .mobile-checkout-cart-close { display: none; }
               }
               .checkout .items { clear: both; padding-top: 0; }
               .checkout .items table { border-collapse: separate; width: 100%; }
               .checkout .items th { border-bottom: 1px solid #E5E5E5; padding: 0 10px 10px 10px; font-size: 13px; font-weight: normal; text-align: right; text-transform: uppercase; }
               .checkout .items th.product { font-size: 15px; padding-left: 0; text-align: left; }
               .checkout .items tbody tr { background: #FFF; }
               .checkout .items td { padding: 10px; }
               .checkout .items td:first-child { border-left: 1px solid #EEE; }
               .checkout .items td:last-child { border-right: 1px solid #EEE; }
               .checkout .items td.details { width: 100%; }
               .checkout .items td.quantity-price { text-align: center; white-space: nowrap; }
               .checkout .items td.total-price { text-align: right; white-space: nowrap; }
               .checkout .items td.total-price .to-quote { color: #999; }
               .checkout .items tbody tr { border-top: 1px solid #EEE; }
               .checkout .items tbody tr:last-child td { border-bottom: 1px solid #E5E5E5; }
               .checkout .items tfoot tr { background: #F9F9F9; }
               .checkout .items tfoot td { text-align: right; }
               .checkout .items .subtotal label { font-size: 15px; }
               .checkout .items .subtotal span { font-size: 15px; }
               .checkout .items .total { background: none; }
               .checkout .items .total td { border: none; border-top: 1px solid #E5E5E5; }
               .checkout .items .total label { font-size: 22px; }
               .checkout .items .total span { font-size: 22px; }
               .checkout .confirmation { margin: 20px 0; }
               .checkout .confirmation p { margin-bottom: 10px; margin-top: 10px; }
               .checkout .confirmation p em { font-style: normal; }
               

   Now open the "mobile.css" file, still in the "css" directory. Unlike "base.css", this file contains two sections with checkout-related CSS rules for different device sizes.

   Find the first /* checkout-(…).html */ comment. Select all CSS between this comment and the next, and replace it with the following CSS rules:

   
               .checkout .main { display: grid; grid-template-areas: "steps" "title" "cart" "form"; grid-template-columns: 1fr; }
               .checkout .main form { margin-right: 10px; }
               .checkout .order,
               .checkout .confirmation { margin-left: 10px; margin-right: 10px; }
               .checkout #checkout-cart-slider { background-color: #F9F9F9; height: 100%; overflow-y: scroll; padding-top: 10px; position: fixed; right: -100%; top: 0; transition: right .5s ease-out; width: 100%; z-index: 99999; }
               .checkout #checkout-cart-slider.design-isopen { right: 0; }
               .checkout .mobile-checkout-cart-close { border-radius: 6px; height: 40px; margin-left: auto; position: relative; right: 15px; width: 40px; }
               .checkout .mobile-checkout-cart-close:before, .checkout .mobile-checkout-cart-close:after { background-color: #000; content:''; height: 2px; position: absolute; top: 20px; width: 20px; }
               .checkout .mobile-checkout-cart-close:before { left: 10px; transform: rotate(45deg); }
               .checkout .mobile-checkout-cart-close:after { right: 10px; transform: rotate(-45deg); }
               .checkout .items { padding-top: 10px; }
               div.mobile-checkout-cart-button { -webkit-appearance: none; background: #FFF; border: 1px solid #1267bc; color: #1267bc; cursor: pointer; font-size: 16px; margin-bottom: 50px; margin: auto; outline: none; outline: none; padding: 8px 30px; position: relative; text-transform: uppercase; top: 0; width: max-content; }
               fieldset.form.methods > div { grid-template-columns: max-content 1fr; }
               .checkout form fieldset input { max-width: 432px; }
               

   Now find the second /* checkout-(…).html */ comment. Select and delete the first 4 lines of CSS after the comment. Replace them with the following CSS:

   
               .checkout .steps { float: none; margin-top: 5px; margin-bottom: 20px; overflow: hidden; width: auto; }
               .checkout .steps ol { display: table; width: 100%; padding-left: 33px; }
               .checkout .steps li { display: table-cell; font-size: 11px; width: 33.33%; }
               .checkout .steps li:last-child { display: none; }
               .checkout .steps > ol { flex-flow: row wrap; justify-content: left; }
               

   Respy Wide

   Open the "base.css" file in the "css" directory and find the /* checkout-(…).html */ comment.

   Between this comment and the next you will find all the CSS for checkout pages: select and delete that CSS, then paste the following rules in its place.

   
               @media screen and (min-width:1024px) {
                 .checkout nav { display: none; }
               }
               .checkout header > .cart, .checkout header > .banners { display: none; }
               .checkout .steps { float: left; grid-area: steps; margin-bottom: 50px; margin-top: 50px; width: 100%; }
               .checkout .steps ol { align-items: center; column-gap: 40px; counter-reset: li; cursor: default; display: flex; justify-content: center; list-style: none; margin-left: 2px; padding: 0; }
               .checkout .steps li { color: #A0A0A0; font-size: 15px; height: 26px; line-height: 26px; margin: 12px 0 0 35px; position: relative; text-transform: uppercase; }
               .checkout .steps li a { color: #A0A0A0; }
               .checkout .steps li:before { background: #A0A0A0; border-radius: 20px; color: #FFF; content: counter(li); counter-increment: li; left: -33px; position: absolute; text-align: center; top: 0; width: 26px; }
               .checkout .steps li.current { color: #222; }
               .checkout .steps li.current:before { background: #222; }
               .checkout .main { column-gap: 100px; display: grid; grid-template-areas: "steps steps" "title title" "form cart"; grid-template-columns: 1fr 1fr; margin-left: 0; padding: 0px 20px; }
               html.checkout-review-html .checkout .main { display: inherit!important; }
               html.checkout-confirmation-html .checkout .main { display: block; }
               .checkout .main h1 { grid-area: title; text-align: center }
               .checkout .main form { margin-top: 20px; }
               .checkout .main-column { clear: none; grid-area: form; margin-left: 0; width: 100%; }
               fieldset.form#billing-address input { max-width: 300px; }
               fieldset.form.methods > div { align-items: center; background: #FFF; border: 1px solid #EEE; border-bottom: none; color: #333; display: grid!important; grid-template-areas: "input label" "pay pay"; grid-template-columns: max-content 1fr; padding: 10px; width: 100%; }
               fieldset.form.methods > div:first-of-type { border-top-left-radius: 5px; border-top-right-radius: 5px; }
               fieldset.form.methods > div:last-of-type { border-bottom: 1px solid #EEE; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
               fieldset.form.methods label { background: transparent; border: none!important; border-bottom: none!important; cursor: pointer; display: block; padding: 0px!important; white-space: unset!important; }
               fieldset.form.methods input[type=radio] { margin: 0 20px 0 10px }
               fieldset.form.methods .name { color: #333; font-size: 16px; margin-left: 0; padding-right: 15px; }
               fieldset.form.methods .description { color: #666; margin-left: 0; padding-right: 15px; }
               fieldset.form.methods .pay { display: none; grid-area: pay; margin-top: 10px; padding-top: 5px; text-align: center; }
               fieldset.form.methods input[type=radio]:checked ~ .pay { display: block; padding-left: 10px; padding-right: 10px; }
               fieldset.form.methods .pay > div { margin-top: 10px; }
               fieldset.form.methods .pay .expire-cvc-row { column-gap: 10px; display: flex; }
               fieldset.form.methods .pay .expire-cvc-row > div { width: 50%; }
               fieldset.form.methods .pay .cvc,
               fieldset.form.methods .pay .expiry,
               fieldset.form.methods .pay .number,
               fieldset.form.methods .pay .name { background:#F9F9F9; border-radius: 4px; border: 2px solid #eee; width: 100%; padding: 0; }
               fieldset.form.methods .pay .cvc > div,
               fieldset.form.methods .pay .expiry > div,
               fieldset.form.methods .pay .number > div,
               fieldset.form.methods .pay .name input { padding: 10px 15px; }
               fieldset.form.methods .pay .name input { background-color: transparent; border: 0; height: 40px; max-width: none; width: 100%; }
               fieldset.form.methods .pay .name input::placeholder { color: #333; text-transform: uppercase; }
               fieldset.form.methods .pay .pay-button.main-button { clear: both; margin-top: 15px; padding-right: 0; }
               fieldset.form.methods .pay .logos { background-color: #FFF; background: url('../images/cards.png') 20px center no-repeat #FFF; background-size: auto 25px; border-bottom: 1px solid #EEE; height: 50px; margin: 0 -20px 20px -20px; }
               fieldset.form.methods .pay .logos span { color: #b3b3b3; padding: 20px 0 0 125px; vertical-align: middle; }
               fieldset.form.methods .pay .errors { color: #c00; font-weight: 600; text-align: center; }
               #design-order-button.design-cc-button-paying { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
               .checkout textarea[name="requests"] { height: 100px; width: 100%; }
               .checkout .ship-to-another-address { display: block; margin: 20px 0; }
               .checkout .accept-terms { display: block; line-height: 2em; margin: 15px 0; }
               .checkout .buttons { display: table; margin-top: 50px; margin-bottom: 20px; width: 100%; }
               .checkout .buttons > div { display: table-cell; }
               .checkout .go-back-button input { min-width: 180px; }
               .checkout .continue-button, .checkout .order-button { text-align: right; }
               .checkout .send-quote-request-button { text-align: right; }
               .checkout .continue-button input, .checkout .order-button input, .checkout .send-quote-request-button input { min-width: 200px; }
               .checkout .pay-button { text-align: center; }
               .checkout .pay-button input { min-width: 180px; }
               @media screen and (min-width:1024px) {
                 .checkout .pay-button { padding-right: 190px; }
               }
               .order h2 { margin-bottom: 10px; }
               .order .addresses { display: table; width: 100%; }
               .order .addresses .billing-address { display: table-cell; padding-right: 10px; width: 50%; }
               .order .addresses .billing-address .contact-address { margin-top: 10px; }
               .order .addresses .shipping-address { display: table-cell; padding-right: 10px; width: 50%; }
               .checkout #checkout-cart-slider { grid-area: cart; }
               .checkout #checkout-cart-slider table { padding: 10px; } 
               .checkout #checkout-cart-slider th.product { padding-left: 10px!important; }
               .checkout #checkout-cart-slider td.image img { height: auto; max-width: 90px; }
               @media screen and (min-width: 1151px) {  
                 .checkout .mobile-checkout-cart-button,
                 .checkout .mobile-checkout-cart-close { display: none; }
               }
               .checkout .items { clear: both; padding-top: 0; }
               .checkout .items table { border-collapse: separate; width: 100%; }
               .checkout .items th { border-bottom: 1px solid #E5E5E5; padding: 0 10px 10px 10px; font-size: 13px; font-weight: normal; text-align: right; text-transform: uppercase; }
               .checkout .items th.product { font-size: 15px; padding-left: 0; text-align: left; }
               .checkout .items tbody tr { background: #FFF; }
               .checkout .items td { padding: 10px; }
               .checkout .items td:first-child { border-left: 1px solid #EEE; }
               .checkout .items td:last-child { border-right: 1px solid #EEE; }
               .checkout .items td.details { width: 100%; }
               .checkout .items td.quantity-price { text-align: center; white-space: nowrap; }
               .checkout .items td.total-price { text-align: right; white-space: nowrap; }
               .checkout .items td.total-price .to-quote { color: #999; }
               .checkout .items tbody tr { border-top: 1px solid #EEE; }
               .checkout .items tbody tr:last-child td { border-bottom: 1px solid #E5E5E5; }
               .checkout .items tfoot tr { background: #F9F9F9; }
               .checkout .items tfoot td { text-align: right; }
               .checkout .items .subtotal label { font-size: 15px; }
               .checkout .items .subtotal span { font-size: 15px; }
               .checkout .items .total { background: none; }
               .checkout .items .total td { border: none; border-top: 1px solid #E5E5E5; }
               .checkout .items .total label { font-size: 22px; }
               .checkout .items .total span { font-size: 22px; }
               .checkout .confirmation { margin: 20px 0; }
               .checkout .confirmation p { margin-bottom: 10px; margin-top: 10px; }
               .checkout .confirmation p em { font-style: normal; }
               

   Now open the "mobile.css" file, still in the "css" directory. Unlike "base.css", this file contains two sections with checkout-related CSS rules for different device sizes.

   Find the first /* checkout-(…).html */ comment. Select all CSS between this comment and the next, and replace it with the following CSS rules:

   
               .checkout .main { display: grid; grid-template-areas: "steps" "title" "cart" "form"; grid-template-columns: 1fr; }
               .checkout .main form { margin-right: 10px; }
               .checkout .order,
               .checkout .confirmation { margin-left: 10px; margin-right: 10px; }
               .checkout #checkout-cart-slider { background-color: #F9F9F9; height: 100%; overflow-y: scroll; padding-top: 10px; position: fixed; right: -100%; top: 0; transition: right .5s ease-out; width: 100%; z-index: 99999; }
               .checkout #checkout-cart-slider.design-isopen { right: 0; }
               .checkout .mobile-checkout-cart-close { border-radius: 6px; height: 40px; margin-left: auto; position: relative; right: 15px; width: 40px; }
               .checkout .mobile-checkout-cart-close:before, .checkout .mobile-checkout-cart-close:after { background-color: #000; content:''; height: 2px; position: absolute; top: 20px; width: 20px; }
               .checkout .mobile-checkout-cart-close:before { left: 10px; transform: rotate(45deg); }
               .checkout .mobile-checkout-cart-close:after { right: 10px; transform: rotate(-45deg); }
               .checkout .items { padding-top: 10px; }
               div.mobile-checkout-cart-button { background-color: #952C2C; color: #ffffff; font-size: 16px; margin-bottom: 50px; margin: auto; padding: 8px 30px; width: max-content; }
               fieldset.form.methods > div { grid-template-columns: max-content 1fr; }
               .checkout form fieldset input { max-width: 432px; }
               

   Now find the second /* checkout-(…).html */ comment. Select and delete the first 4 lines of CSS after the comment. Replace them with the following CSS:

   
               .checkout .steps { float: none; margin-top: 5px; margin-bottom: 12px; overflow: hidden; width: auto; }
               .checkout .steps ol { display: table; width: 100%; padding-left: 33px; }
               .checkout .steps li { display: table-cell; font-size: 11px; width: 33.33%; }
               .checkout .steps li:last-child { display: none; }
               .checkout div.steps > ol { flex-flow: row wrap; justify-content: left; }
               .checkout div.steps { margin-bottom: 20px; }
               

   Respy Classic

   Open the "base.css" file in the "css" directory and find the /* checkout-(…).html */ comment.

   Between this comment and the next you will find all the CSS for checkout pages: select and delete that CSS, then paste the following rules in its place.

   
               @media screen and (min-width:1024px) {
                 .checkout nav { display: none; }
               }
               .checkout header > .cart, .checkout header > .banners { display: none; }
               .checkout .steps { float: left; grid-area: steps; margin-bottom: 50px; margin-top: 50px; width: 100%; }
               .checkout .steps ol { align-items: center; column-gap: 40px; counter-reset: li; cursor: default; display: flex; justify-content: center; list-style: none; margin-left: 2px; padding: 0; }
               .checkout .steps li { color: #A0A0A0; font-size: 15px; height: 26px; line-height: 26px; margin: 12px 0 0 35px; position: relative; text-transform: uppercase; }
               .checkout .steps li a { color: #A0A0A0; }
               .checkout .steps li:before { background: #A0A0A0; border-radius: 20px; color: #FFF; content: counter(li); counter-increment: li; left: -33px; position: absolute; text-align: center; top: 0; width: 26px; }
               .checkout .steps li.current { color: #222; }
               .checkout .steps li.current:before { background: #222; }
               .checkout .main { column-gap: 100px; display: grid; grid-template-areas: "steps steps" "title title" "form cart"; grid-template-columns: 1fr 1fr; padding: 0px 20px; }
               html.checkout-review-html .checkout .main { display: inherit!important; }
               html.checkout-confirmation-html .checkout .main { display: block; }
               .checkout .main h1 { grid-area: title; text-align: center }
               .checkout .main form { margin-top: 20px; }
               .checkout .main-column { clear: none; grid-area: form; margin-left: 0; width: 100%; }
               fieldset.form#billing-address input { max-width: 300px; }
               fieldset.form.methods > div { align-items: center; background: #FFF; border: 1px solid #EEE; border-bottom: none; color: #333; display: grid!important; grid-template-areas: "input label" "pay pay"; grid-template-columns: max-content 1fr; padding: 10px; width: 100%; }
               fieldset.form.methods > div:first-of-type { border-top-left-radius: 5px; border-top-right-radius: 5px; }
               fieldset.form.methods > div:last-of-type { border-bottom: 1px solid #EEE; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
               fieldset.form.methods label { background: transparent; border: none!important; border-bottom: none!important; cursor: pointer; display: block; padding: 0px!important; white-space: unset!important; }
               fieldset.form.methods input[type=radio] { margin: 0 20px 0 10px }
               fieldset.form.methods .name { color: #333; font-size: 16px; margin-left: 0; padding-right: 15px; }
               fieldset.form.methods .description { color: #666; margin-left: 0; padding-right: 15px; }
               fieldset.form.methods .pay { display: none; grid-area: pay; margin-top: 10px; padding-top: 5px; text-align: center; }
               fieldset.form.methods input[type=radio]:checked ~ .pay { display: block; padding-left: 10px; padding-right: 10px; }
               fieldset.form.methods .pay > div { margin-top: 10px; }
               fieldset.form.methods .pay .expire-cvc-row { column-gap: 10px; display: flex; }
               fieldset.form.methods .pay .expire-cvc-row > div { width: 50%; }
               fieldset.form.methods .pay .cvc,
               fieldset.form.methods .pay .expiry,
               fieldset.form.methods .pay .number,
               fieldset.form.methods .pay .name { background:#F9F9F9; border-radius: 4px; border: 2px solid #eee; width: 100%; padding: 0; }
               fieldset.form.methods .pay .cvc > div,
               fieldset.form.methods .pay .expiry > div,
               fieldset.form.methods .pay .number > div,
               fieldset.form.methods .pay .name input { padding: 10px 15px; }
               fieldset.form.methods .pay .name input { background-color: transparent; border: 0; height: 40px; max-width: none; width: 100%; }
               fieldset.form.methods .pay .name input::placeholder { color: #333; text-transform: uppercase; }
               fieldset.form.methods .pay .pay-button.main-button { clear: both; margin-top: 15px; padding-right: 0; }
               fieldset.form.methods .pay .logos { background-color: #FFF; background: url('../images/cards.png') 20px center no-repeat #FFF; background-size: auto 25px; border-bottom: 1px solid #EEE; height: 50px; margin: 0 -20px 20px -20px; }
               fieldset.form.methods .pay .logos span { color: #b3b3b3; padding: 20px 0 0 125px; vertical-align: middle; }
               fieldset.form.methods .pay .errors { color: #c00; font-weight: 600; text-align: center; }
               #design-order-button.design-cc-button-paying { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
               .checkout textarea[name="requests"] { height: 100px; width: 100%; }
               .checkout .ship-to-another-address { display: block; margin: 20px 0; }
               .checkout .accept-terms { display: block; line-height: 2em; margin: 15px 0; }
               .checkout .buttons { display: table; margin-top: 50px; margin-bottom: 20px; width: 100%; }
               .checkout .buttons > div { display: table-cell; }
               .checkout .go-back-button input { min-width: 180px; }
               .checkout .continue-button, .checkout .order-button { text-align: right; }
               .checkout .send-quote-request-button { text-align: right; }
               .checkout .continue-button input, .checkout .order-button input, .checkout .send-quote-request-button input { min-width: 200px; }
               .checkout .pay-button { text-align: center; }
               .checkout .pay-button input { min-width: 180px; }
               @media screen and (min-width:1024px) {
                 .checkout .pay-button { padding-right: 190px; }
               }
               .order h2 { margin-bottom: 10px; }
               .order .addresses { display: table; width: 100%; }
               .order .addresses .billing-address { display: table-cell; padding-right: 10px; width: 50%; }
               .order .addresses .billing-address .contact-address { margin-top: 10px; }
               .order .addresses .shipping-address { display: table-cell; padding-right: 10px; width: 50%; }
               .checkout #checkout-cart-slider { grid-area: cart; }
               .checkout #checkout-cart-slider table { padding: 10px; } 
               .checkout #checkout-cart-slider th.product { padding-left: 10px!important; }
               .checkout #checkout-cart-slider td.image img { height: auto; max-width: 90px; }
               @media screen and (min-width: 1024px) {  
                 .checkout .mobile-checkout-cart-button,
                 .checkout .mobile-checkout-cart-close { display: none; }
               }
               .checkout .items { clear: both; padding-top: 0; }
               .checkout .items table { border-collapse: separate; width: 100%; }
               .checkout .items th { border-bottom: 1px solid #E5E5E5; padding: 0 10px 10px 10px; font-size: 13px; font-weight: normal; text-align: right; text-transform: uppercase; }
               .checkout .items th.product { font-size: 15px; padding-left: 0; text-align: left; }
               .checkout .items tbody tr { background: #FFF; }
               .checkout .items td { padding: 10px; }
               .checkout .items td:first-child { border-left: 1px solid #EEE; }
               .checkout .items td:last-child { border-right: 1px solid #EEE; }
               .checkout .items td.details { width: 100%; }
               .checkout .items td.quantity-price { text-align: center; white-space: nowrap; }
               .checkout .items td.total-price { text-align: right; white-space: nowrap; }
               .checkout .items td.total-price .to-quote { color: #999; }
               .checkout .items tbody tr { border-top: 1px solid #EEE; }
               .checkout .items tbody tr:last-child td { border-bottom: 1px solid #E5E5E5; }
               .checkout .items tfoot tr { background: #F9F9F9; }
               .checkout .items tfoot td { text-align: right; }
               .checkout .items .subtotal label { font-size: 15px; }
               .checkout .items .subtotal span { font-size: 15px; }
               .checkout .items .total { background: none; }
               .checkout .items .total td { border: none; border-top: 1px solid #E5E5E5; }
               .checkout .items .total label { font-size: 22px; }
               .checkout .items .total span { font-size: 22px; }
               .checkout .confirmation { margin: 20px 0; }
               .checkout .confirmation p { margin-bottom: 10px; margin-top: 10px; }
               .checkout .confirmation p em { font-style: normal; }
               

   Now open the "mobile.css" file, still in the "css" directory. Unlike "base.css", this file contains two sections with checkout-related CSS rules for different device sizes.

   Find the first /* checkout-(…).html */ comment. Select all CSS between this comment and the next, and replace it with the following CSS rules:

   
               .checkout .main { display: grid; grid-template-areas: "steps" "title" "cart" "form"; grid-template-columns: 1fr; }
               .checkout .main form { margin-right: 10px; }
               .checkout .order,
               .checkout .confirmation { margin-left: 10px; margin-right: 10px; }
               .checkout #checkout-cart-slider { background-color: #F9F9F9; height: 100%; overflow-y: scroll; padding-top: 10px; position: fixed; right: -100%; top: 0; transition: right .5s ease-out; width: 100%; z-index: 99999; }
               .checkout #checkout-cart-slider.design-isopen { right: 0; }
               .checkout .mobile-checkout-cart-close { border-radius: 6px; height: 40px; margin-left: auto; position: relative; right: 15px; width: 40px; }
               .checkout .mobile-checkout-cart-close:before, .checkout .mobile-checkout-cart-close:after { background-color: #000; content:''; height: 2px; position: absolute; top: 20px; width: 20px; }
               .checkout .mobile-checkout-cart-close:before { left: 10px; transform: rotate(45deg); }
               .checkout .mobile-checkout-cart-close:after { right: 10px; transform: rotate(-45deg); }
               .checkout .items { padding-top: 10px; }
               div.mobile-checkout-cart-button { background-color: #952C2C; color: #ffffff; font-size: 16px; margin-bottom: 50px; margin: auto; padding: 8px 30px; width: max-content; }
               fieldset.form.methods > div { grid-template-columns: max-content 1fr; }
               .checkout form fieldset input { max-width: 432px; }
               

   Now find the second /* checkout-(…).html */ comment. Select and delete the first 4 lines of CSS after the comment. Replace them with the following CSS:

   
               .checkout .steps { float: none; margin-top: 5px; margin-bottom: 12px; overflow: hidden; width: auto; }
               .checkout .steps ol { display: table; width: 100%; padding-left: 33px; }
               .checkout .steps li { display: table-cell; font-size: 11px; width: 33.33%; }
               .checkout .steps li:last-child { display: none; }
               .checkout div.steps > ol { flex-flow: row wrap; justify-content: left; }
               .checkout div.steps { margin-bottom: 20px; }
               

8. Review and apply the changes

   Now, in the back office go to the "Website" section and click the "Preview" link for the template you modified. Check that the changes are correct. If everything works as expected, return to the "Website" section, click the three dots (...) next to the "Customize" button, and then click "Apply to site" from the drop-down menu that appears.

   At this point the template update will have been applied to your site and the procedure is complete.

Update a template for Electronic Invoicing

The 2018 Electronic Invoicing version, introduced in December 2018, includes the features needed to comply with the new electronic invoicing regulation.

On the site, when a customer enters their billing details, it is now possible to collect the recipient code or PEC for the electronic invoice. This field will then appear in the customer profile, in the order, and therefore in the invoice.

The new templates you can install from the Template Store already include this new field. Previous templates must be updated; below we explain how.

Changes can be made via the back office Template Editor or with any other editor and an FTP program to upload files to the site.

1. Open the "/includes/billing-address.html" file (do not confuse it with "print-billing-address.html", which will be modified later) and add:

   
       <!-- .if invoiceRecipient -->
       <div>
         <label for="design-invoice-recipient">{Invoice recipient}:</label>
         <div>
           <!-- .show invoiceRecipient --> <!-- .end -->
           <div style="clear:left">{Invoice recipient note}</div>
         </div>
       </div>
       <!-- .end if -->
       

   just before the line:

       <div class="street">

2. Open the "/includes/print-billing-address.html" file and add:

   
         <!-- .if invoiceRecipient -->
         <div>{Print invoice recipient}: <!-- .show invoiceRecipient --> <!-- .end --></div>
         <!-- .end if  -->
       

   just before the line:

         <!-- .if billingPhoneNumber -->

3. If you are using the Template Editor, go to Translations > Italian and under the Template tab add, at the end, the following entries:

   Invoice recipient=Codice o PEC fatturazione
   Invoice recipient note=Compilare se si desidera la fattura elettronica
   Print invoice recipient=Destinatario fattura elettronica

   If you are editing files via FTP, edit the "/languages/it/template.ini" file in the template folder instead.

   If you use multiple languages on the site, the text for the other languages is provided below:

   English

   Invoice recipient=Electronic invoice recipient
   Invoice recipient note=Fill in with you PEC or recipient code if you need an electronic invoice
   Print invoice recipient=Electronic invoice recipient

   French

   Invoice recipient=Destinataire de facture électronique
   Invoice recipient note=Entrez votre PEC ou votre code de destinataire si vous souhaitez une facture électronique
   Print invoice recipient=Destinataire de facture électronique

   Spanish

   Invoice recipient=Destinatario factura electrónica
   Invoice recipient note=Rellene con su PEC o código de destinatario si desea una factura electrónica
   Print invoice recipient=Destinatario factura electrónica

4. Review the changes in the template preview and, if they look good, apply the template to the site.

Update a template to the 2018 GDPR version

The 2018 GDPR version, introduced in May 2018, includes the features needed to comply with the new GDPR privacy regulation.

When personal data is collected on the site, customers must be informed about how their data will be processed and, when required, consent must be requested.

The new templates provided with the update ("Respy Classic GDPR", "Respy Wide GDPR" and "Axis") are already prepared. Previous templates must be updated; below we explain how.

Changes can be made via the back office Template Editor or with any other editor and an FTP program to upload files to the site.

Registration and checkout pages

1. Create a new file named, for example, "/includes/privacy-processings.html" with the following content:

   
   <!-- .if processings -->
   <div class="privacy-processings">
   
       <!-- .for processings -->
       <div class="processing">
   
         <label class="title">
           <!-- .show consent --><!-- .end -->
           <span><!-- .show title --> Data processing <!-- .end --></span>
           <!-- .if isConsentRequired --><span class="design-required">*</span><!-- .end -->
         </label>
   
         <div class="description">
           <span><!-- .show description --> We collect data from our customers for advertising purposes <!-- .end --></span>
           <span class="more-info"><!-- .show moreInfo --> (More info...) <!-- .end --></span>
         </div>
   
       </div>
       <!-- .end for -->
   
   </div>
   <!-- .end if -->
       

2. Include the privacy-processings.html file in the following template pages:
   • sign-up-user.html
   • user-data.html
   • checkout-addresses.html ( or checkout-form.html )
   • checkout-quote-request.html

   by adding the following code to the pages:

   
       <!-- .include "/includes/privacy-processings.html" -->
       

   between the <form> and </form> tags, preferably before the buttons at the end of the form.
3. Add the following line in the Template Editor under Translations > System (or alternatively directly in the "languages/it/system.ini" file):

   
       PrivacyProcessingMoreInfo=(Maggiori informazioni...)
       

   If you have multiple languages on the site, do this for all languages.
4. Modify the template CSS by adding the following code:

   
   .privacy-processings { padding: 1em 0; }
   .privacy-processings .processing { margin-bottom: 1.5em; }
   .privacy-processings .processing:last-child { margin-bottom: 0; }
   .privacy-processings .processing label { cursor: pointer; }
   .privacy-processings .processing input[type="checkbox"] { position: relative; top: 2px; }
   .privacy-processings .processing .title { padding: .35em 0; }
   .privacy-processings .processing .description { padding: 0 1.4em; word-break: break-word; }
   .privacy-processings .processing .more-info a:hover { text-decoration: underline; }
   .privacy-processings .processing .design-required { color: red; }
   .sign-up-user-html .privacy-processings { padding-top: 0; }
   .sign-up-user-html .privacy-processings .processing,
   .user-data-html    .privacy-processings .processing { margin: 0 2px; padding: .35em .625em .75em; }
   .design-highlight-consent-required { background-color: #FFF1A8; }
       

   If you are using an unmodified Respy Wide or Respy Classic template, just add this CSS to the end of the "/css/base.css" file. If you are using a custom template, you may need to adapt the CSS to the template in use.

5. Review the changes in the template preview and, if they look good, apply the template to the site.

Orders and quotes pages

To add processing and consent information to existing orders and quotes, allowing customers to view consents given, revoke consent, or give consent that was previously not given, follow these instructions to update the template:

<!-- .if processings -->
<form method="post">
  <div>
      <!-- .include "includes/privacy-processings.html" -->
      <div class="buttons">
          <input type="submit" value="Save consents">
      </div>
  </div>
</form>
<!-- .end if -->