Importante

Esto interesa hacerlo con la tienda recién instalada o en un clon de la tienda en producción, porque el cambio de tema elimina todas las personalizaciones de diseño y módulos realizadas a través de la interfaz web en el anterior tema.

Creación

Trastienda -> PERSONALIZAR -> Diseño -> Tema y logotipo -> Personalización avanzada -> Descargar tema -> guardar localmente (child_classic.zip) -> Cargar tema subordinado -> seleccionar el .zip descargado-> abrir/guardar -> Tema y logotipo -> seleccionar Child theme of classic's theme como tema del sitio.

Modificación

Desactivar temporalmente todas las cachés en Parámetros Avanzados -> Rendimiento.

Crear localmente la carpeta /themes/child_classic, descargar los ficheros a personalizar, modificarlos y subirlos.

Si hay que añadir algún fichero que no exista en el tema, se crea localmente y se sube por FTP.

Reactivar las cachés.

custom.css

/themes/child_classic/assets/css/custom.css

Ejemplo de hoja de estilo personalizada (forma4huelva.com):

/* PROVISIONAL */
/* Ocultar imágenes de categorías mientras no existan */
#subcategories ul li .subcategory-image a{display:none}

/* COLORES */
a:hover,a,.footer-container li a:hover,.product-miniature .highlighted-informations .quick-view:hover,.product-price,#blockcart-modal .product-name,.pagination .current a,.has-discount.product-price, .has-discount p, .has-discount .page-content.page-cms ul, .page-content.page-cms .has-discount ul,#product-availability .product-last-items,.carousel .carousel-control .icon-next:hover i, .carousel .carousel-control .icon-prev:hover i{color:#ae2d4a}
.tabs .nav-tabs .nav-link.active{color:#ae2d4a;border-bottom: #ae2d4a 3px solid}
#subcategories ul li .subcategory-name:hover{color:#1B4CA6}
#subcategories ul li:hover .subcategory-image a{border:5px solid #1B4CA6}
.btn-primary:hover{background-color:#1B4CA6}
.product-flags li.product-flag.on-sale,.product-flags li.product-flag,.has-discount .discount,.group-span-filestyle .btn-default, .group-span-filestyle .bootstrap-touchspin .btn-touchspin, .bootstrap-touchspin .group-span-filestyle .btn-touchspin{background:#ae2d4a}
.product-flags li.product-flag.discount,.btn-primary,#header .header-nav .cart-preview.active{background-color:#ae2d4a}

/* SUPRACABECERA */
#contact-link a{margin-left:1em}
#contact-link a:hover,.user-info a:hover{color:#ae2d4a!important}

/* MENÚ PRINCIPAL IZQUIERDA*/
/* Ocultar en la cabecera de pantallas grandes */
#header #_desktop_top_menu{display:none}
/* Adaptación a columna lateral izquierda */
#left-column #top-menu{background-color:#FFF;text-transform:uppercase;padding:0.5em}
#left-column #top-menu .sub-menu{margin-left:90%;width:inherit;min-width:inherit;top:auto!important;margin-top:-40px}
#left-column #top-menu .dropdown-item:hover{color:#ae2d4a;background-color:#F6F6F6}
#left-column #top-menu .sub-menu .dropdown-item:hover{background:none}
/* Corrección de palabras y frases largas */
#left-column #top-menu .dropdown-item{display:block;min-width:200px!important;white-space:normal;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word}

/* CARRUSEL */
.carousel .carousel-inner{height:246px!important}
.carousel .carousel-item .caption{background-color:rgba(174, 45, 74, 0.9)!important;padding:1em;margin:auto;text-align:center;
-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;
bottom:20%;left:231.5px}

/* FOOTER */
.footer-container{background:#F6F6F6}

nav.tpl

/themes/child_classic/modules/ps_contactinfo/nav.tpl

Mostrar enlace contacto

Por defecto, sólo se muestra si el teléfono no está configurado.

Para que se muestren ambos:

<div id="_desktop_contact_link">
  <div id="contact-link">
    {if $contact_infos.phone}
      <span>Call us: {$contact_infos.phone}</span>
    {/if}
    <a href="{$urls.pages.contact}">{l s='Contact us' d='Modules.Contactinfo.Shop'}</a>
  </div>
</div>

Otra opción:

<div id="_desktop_contact_link">
  <div id="contact-link">
    Contacto:&nbsp;&nbsp;
    {if $contact_infos.phone}
      <a href="tel:{$contact_infos.phone}" title="Teléfono">{$contact_infos.phone}</a>&nbsp;&nbsp;|&nbsp;&nbsp;
    {/if}
    <a href="{$urls.pages.contact}">{$contact_infos.email}</a>
  </div>
</div>

WCAG 2.1 AA

Modificaciones necesarias para superar las validaciones automáticas de wave.webaim.org y algunas manuales para obtener más puntos en el XLSX de Accesibilidad del Kit Digital: Tema hijo WCAG 2.1 AA.