Com augmentar la venda online a les rebaixes

Comparteix aquest article

Podem anunciar alt i clar que ja han començat les rebaixes! No cal anar gaire lluny per trobar botigues pel carrer que ho posen de manifest als seus aparadors: grans cartells vermells amb la paraula “REBAIXES” en majúscules acompanyada de percentatges de descompte. Cal aprofitar al màxim aquestes ocasions en què la predisposició dels compradors a adquirir els nostres productes o serveis és més gran per augmentar el volum de vendes del negoci. En conseqüència, hem de prestar atenció a totes les vies de venda amb què es compten, i com a tal no ens podem oblidar de la botiga online del nostre lloc web.

Avui compartim amb vosaltres algunes idees perquè els vostres aparadors online no siguin menys que els de la vostra botiga física i pugueu maximitzar les vostres vendes online. En aquest article i videotutorial us expliquem i us mostrem com podeu adaptar el disseny de la home de la vostra botiga en línia o lloc web al període de rebaixes.

Què necessiteu per fer-ho? Nosaltres hem utilitzat Elementor en la seva versió PRO. Aquest plugin de WordPress us facilitarà en gran mesura les tasques de maquetació i personalització de la vostra web. A Dimoteca confiem en Elementor i el recomanem 100%.

Contingut

1. Categoria de productes rebaixats

Per començar, crearem una categoria de productes rebaixats i la inclourem i destacarem al menú principal. Amb tots els productes rebaixats agrupats sota una mateixa pàgina i estant ressaltada al menú principal, hi haurà més possibilitats d’augmentar la venda online.

  • Creem una nova categoria des de “Productes” > “Categories”: inserim el nom (“Rebaixes -35%”) i el slug que es mostrarà a la URL de la pàgina de la categoria (“rebaixes”).
  • Afegim alguns productes a la nova categoria, que són els que trobareu a la pàgina de productes rebaixats. Des de “Productes” > “Tots els productes”, marquem la categoria “Rebaixes -35%” en aquells productes rebaixats que desitgem.
  • A continuació incorporem la nova categoria al menú principal del lloc web, i per això ens dirigim a “Apariència” > “Menús”. Primer de tot, hem de canviar les opcions de pantalla (Molt important! Sense aquest pas no podrem realitzar els següents): obrim el panell “Opcions de pantalla” a la cantonada superior dreta i activem les caselles de “Categories del producte” i “ Classes CSS”. Un cop activades, anem a “Categories del producte”, seleccionem “Rebaixes -35%” i l’afegim al menú. Després arrosseguem aquesta categoria fins a dalt del tot perquè sigui la primera que aparegui al menú principal.
  • Obrim la pestanya de la nova categoria per editar-la i li donem una classe CSS que després ens serà necessària per modificar l’estil d’aquest ítem en concret. En aquest cas nosaltres li donem la classe “destacar-categoria”.
  • Ara editem el header del lloc web, i per això anem a “Plantilles” > “Maquetador de temes” > “Header” > “Editar”. D’entrada, veiem que ja ha aparegut el nou ítem al menú principal, i el que farem és destacar-lo perquè sobresurti respecte a la resta d’ítems. Per això, seleccionem el contenidor del menú de navegació i ens dirigim a “Avançat” > “CSS personalitzat”. Un cop allà, s’obre l’editor per inserir codi CSS manualment. En aquest moment és quan toca utilitzar la classe CSS que hem donat prèviament a l’ítem del menú “Rebaixes -35%”, que en aquest cas ha estat “destacar-categoria”. Introduïm la classe al costat del tipus d’element en qüestió per seleccionar-lo i tot seguit escrivim entre claus les instruccions perquè aparegui l’ítem destacat en negreta. El codi a introduir seria el següent:

.destacar-categoria a {
font-weight: bold !important;
}

*Hem afegit “!important” perquè aquesta regla se sobrescrigui a d’altres prèviament establertes. No sol ser necessari, però en aquest cas ho ha estat perquè sense aquesta especificació Elementor ignorava el codi manualment afegit.

2. Barra superior que cridi l'atenció

A continuació, inserirem una barra damunt del header del lloc web que enllaci la pàgina de productes rebaixats i modificarem el seu estil perquè no passi desapercebuda per a cap usuari que visiti la nostra botiga online.

  • Creem una nova secció i l’arrosseguem fins a dalt de tot.
  • Li afegim un widget tipus “Editor de text” i inserim el text: “REBAIXES D’ESTIU 35% DTE: COMPRAR”. Ressaltem la xifra del descompte seleccionant aquesta part del text al mateix editor i activant l’opció d’aplicar negreta.
  • Convertirem la paraula “COMPRAR” en un enllaç que dirigeixi a la pàgina de productes rebaixats. Per fer-ho seleccionem la paraula i fem clic a l’opció de l’editor “Inserir/editar un enllaç”. Aleshores s’obre una pestanya on poder introduir-lo. Per fer-ho fàcilment, podem seleccionar l’URL de la home a la barra superior del navegador (en aquest cas: http://tuweben4dias.dimoteca.com/), l’enganxem a la pestanya i després afegim el slug corresponent a la pàgina del lloc web que volem enllaçar. En aquest cas hi afegirem “rebaixes”, que és el slug que hem assignat a la categoria de productes rebaixats en crear-la. Seleccionem la paraula “COMPRAR” i la subratllem amb l’opció de l’editor de text perquè es pugui identificar fàcilment com a enllaç.
  • Canviem els estils per aconseguir una barra que cridi més l’atenció: seleccionem un vermell intens com a color de fons de la secció, canviem el color de text a blanc, l’alineem al centre i pugem el pes de la tipografia a 500.
  • Reduirem l’amplada de la secció per fer-la més prima. Com el que li dóna la mida que té és la mesura del widget que conté, reduirem el marge de l’editor de text, establint un marge inferior de -15px.

3. Banner principal

L’últim pas serà actualitzar el missatge del banner de la pàgina d’inici i dirigir el botó de crida a l’acció cap als productes rebaixats, una vegada més amb la intenció de cridar l’atenció i intentar maximitzar la venda en línia del nostre negoci.

  • Anem a la pàgina principal del lloc web i veiem que ja s’han aplicat els canvis duts a terme fins ara. Des d’aquí veiem la barra superior i fem clic a “Edita amb Elementor” > “Fitxer de productes” per editar la pàgina d’inici, que en el cas d’aquest lloc web coincideix amb el fitxer de productes.
  • Un cop obert l’editor d’Elementor, seleccionem el giny de diapositives i editem el text de la diapositiva actual. Com a títol posem “REBAIXES”, i com a descripció escrivim “Fins al -35% online i en botigues”.
  • Pel que fa al botó, el que farem serà modificar també el text (posem “VEURE DESCOMPTES”) i l’enllaç (procedim de la mateixa manera que anteriorment: seleccionem l’URL de la home, l’enganxem i afegim el slug de la pàgina de productes rebaixats ).
  • Finalment, canviem els estils perquè sigui més atractiu. Posem el títol de color vermell, n’augmentem la mida i ampliem l’espaiat entre lletres perquè aparegui de forma prominent. Augmentem també la mida de la descripció per realçar el missatge i substituïm el verd de WhatsApp que hi havia al botó pel negre perquè l’estil quedi unificat.

4. Resultat

Si analitzem el resultat obtingut i el comparem amb l’estat previ de la home, constatem a primera vista que després dels canvis el lloc web està molt més ben adaptat per a l’època de rebaixes. En crear una nova categoria s’aconsegueix que tots els productes rebaixats es presentin unificats sota una mateixa pàgina. El fet d’enllaçar aquesta pàgina a diferents punts de la web (el menú principal, la barra superior i el botó call to action del bàner principal) permet que l’usuari hi pugui accedir amb gran facilitat. A nivell estètic, l’ús del color vermell característic de les rebaixes i l’ús de negretes per destacar alguns aspectes són grans aliats per cridar l’atenció i dirigir-la cap a on ens interessa. Després de realitzar tots aquests canvis serà molt més probable que puguem aprofitar la gran oportunitat que brinden les rebaixes per augmentar la venda en línia del nostre e-commerce.

ABANS

DESPRÉS

Necessites ajuda amb el teu projecte web? Et donem un cop de mà!

Subscriu-te a La nostra Newsletter

Estaràs a la última en temes web

Responsable de les dades: Dimoteca Digital S.L. Finalitat de les dades: Formulari de contacte. Emmagatzematge de les dades: Base de dades allotjada a SiteGround Spain S.L. (UE) Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *

Articles d'interès

Dóna Un boost a la teva Empresa

Augmenta la teva presència Digital

portada servicio de diseño web
small_c_popup.png

Parlem sobre el teu projecte

T'Ajudem A Créixer

small_c_popup.png

Tengamos una charla

Te ayudamos a crecer

Diseño web

Desarrollo web

Se optó por utilizar la plataforma WordPress, y se realizó teniendo en cuenta la importancia de la fotografía y la orientación a conversión en petición de presupuestos.

Compártelo

Diseño Web Notaría Portada Opt
Notaria Mobile Opt
Servicios Resized Opt
Mercantil Resized Opt
Contacto Resized Opt
small_c_popup.png

No te'n vagis encara

Rep informació i ofertes de marketing digital