Come lavorare sulla Scheda Prodotto 
Autore: Alfonso B.
Visite 923,
Followers 1,
Condiviso 0
Buongiorno a tutti ho una necessità, mi spiego subito.
Nel sito che sto ri-modificando sfruttando le nuove potenzialità di Website mi sono accorto che quando si clicca su di un prodotto e scelgo di visualizzare la scheda prodotto, questa risulta si visibile e chiara l'unico neo è il fatto che risulti anonima.
La mia domanda è come posso lavorare sulla grafica della pagina prodotto? Ad esempio, la scheda prodotto non è altro che un oggetto testo, quando visualizzo la stessa vorrei ad esempio che si vedessero le righe laterali in modo da delimitare la scheda oppure vorrei che si visualizzasse uno sfondo sfumato in modo da rendere la leggibilità più chiara ecc ecc.
Cosa mi consigliate di fare? C'è per caso qualche funzione che non so usare??
Postato il
hai già letto queste guide ?
https://guide.websitex5.com/it/support/solutions/articles/44002165343-cos-%C3%A8-e-come-si-utilizza-la-pagina-scheda-prodotto-
https://guide.websitex5.com/it/support/solutions/articles/44002167233-come-si-compone-la-pagina-scheda-prodotto-
https://guide.websitex5.com/it/support/solutions/articles/44002166619-come-si-agisce-sull-aspetto-grafico-delle-pagine-scheda-prodotto-
Autore
Già avevo fatto ma non sono soddisfacenti.
mi spiace...
non uso l'ecommerce, tranne che per fare degli esperimenti per altro...
Rimani in attesa e posta il link della tua prova online... e immagini esplicative di come lo vorresti...
E' risolvibile in parte e anche io avevo lo stesso problema (segnalato ma mai risolto), non puoi impostare uno sfondo sfumato direttamente dalla scheda prodotto, puoi farlo ma devi creare una pagina e usarla come pagina prodotto e poi collegarla a quest'ultima. Pero' se fai questo non potrai utilizzare di DEFAULT i widget "mostra pulsante ADDTHIS" oppure "mostra prodotti della stessa categoria" Avevo chiesto ai tempi di implementare un WIDGET esterno con la possibiltà di poter mostrare il prodotto della stessa categoria, anche all'interno delle pagine del sito, ma anche quest'ultima richiesta è caduta nel vuoto.
Prova cosi cosi:
E-commerce > prodotti > nome prodotto > impostazione prodotto > dettagli > Collegamento > Collegamento a pagina del sito
Esempio vedi mio sito https://www.orlee.ch/csp021.php#.YuAjgHbP2Uk
le poche modifiche possono essere fatte da : MAPPA > e-commerce SCHEDA PRODOTTO > Proprietà > Grafica
Ma in quest'ultima ipotesi puoi impostare un colore UNICO su tutte le schede prodotto e non sulle singole con effetti sfumati.
oppure sempre in: MAPPA > e-commerce SCHEDA PRODOTTO > Proprietà > Grafica
puoi inserire un'immagine sfumata e usarla come effetto sfumato pero' andrebbe ad intaccare su tutti i prodotti e non su una categoria o su un prodotto singolo
x Alfonso B., ... se puoi, posta il LINK della pagina in questione, ed allega anche uno STAMP per capire cosa vorresti ottenere...
.
Kolasim scusami ma è chiarissimo il messaggio...
Se tu avessi il programma sottomano sicuramente capiresti il problema.
Non è una questione di mettere un CODICE, scusami ma questa tua ostinazione e al quanto scontrosa... e anche irrispettosa...
Autore
Allora, ho seguito le informazioni di Luigi, e sono arrivato alla conclusione di utilizzare il CSS dalla sezione Esperto della pagina. Diciamo che ho bisogno di vedere il codice con i nomi e le indentazioni dei vari DIV, diciamo che è la parte facile. Basta Cambiare una pagina per cambiarle tutte. Ho familiarità con il CSS piano piano vedrò di arrivare all'obiettivo.
esatto Alfonso è l'unica soluzione anche io l'ho personalizzata in questo modo.
Ottimo sono contento che sei arrivato ad una soluzione....
qual'è il css , puoi mettere un esempio cosi lo vediamo anche noi ?
grazie mille , sempre se puoi ovviamente :-)
volendo approfodire se leggi il codice della scheda sotto, troverai nel contenuto stesso il codice custom commentato
https://www.giancarloweb.it/product/?sea---hills1
Autore
Bravo Giancarlo, ho sbirciato nel tuo codice, è proprio questo ciò che stavo dicendo. Quello che ho intenzione di fare. L'unica maniera per rendere diversa la pagina. Invece se volessi mettere qualche animazione? Cosa mi consigliate??
Autore
Avevate chiesto un pò di codice, eccovi accontentati.
<style>
/* INIZIO CODICE PRIMA RIGA DEL CARRELLO */
#im-product-container .lines-ellipsis {
display: inline;
width: 95%px;
height: 40px;
text-align: center;
vertical-align: middle;
padding: 10px 70px;
border: 1px solid #3075ca;
border-radius: 5px;
background: #4ebeff;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#4ebeff), to(#3075ca));
background: -webkit-linear-gradient(#4ebeff, #3075ca);
background: -moz-linear-gradient(#4ebeff, #3075ca);
background: -o-linear-gradient(#4ebeff, #3075ca);
background: linear-gradient(#4ebeff, #3075ca);
text-shadow: #1e497f 1px 1px 1px;
font: normal normal bold 20px abel;
color: #22C75F;
text-decoration: none;
}
#im-product-container .lines-ellipsis:hover,
#im-product-container .lines-ellipsis:focus {
border: 1px solid ##3c92fd;
background: #5ee4ff;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#5ee4ff), to(#3a8cf2));
background: -webkit-linear-gradient(#5ee4ff, #3a8cf2);
background: -moz-linear-gradient(#5ee4ff, #3a8cf2);
background: -o-linear-gradient(#5ee4ff, #3a8cf2);
background: linear-gradient(#5ee4ff, #3a8cf2);
color: #ffffff;
text-decoration: none;
}
#im-product-container .lines-ellipsis:active {
background: #3075ca;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#3075ca), to(#3075ca));
background: -webkit-linear-gradient(#3075ca, #3075ca);
background: -moz-linear-gradient(#3075ca, #3075ca);
background: -o-linear-gradient(#3075ca, #3075ca);
background: linear-gradient(#3075ca, #3075ca);
}
/* #im-product-container .lines-ellipsis:before{
content: "\0000a0";
display: inline-block;
height: 24px;
width: 24px;
line-height: 24px;
margin: 0 4px -6px -4px;
position: relative;
top: 0px;
left: 0px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAC6ElEQVRIicWVTWhUVxTHf+d1CCJdSBEsRSRYECkJBMFVJFYQ/Fh2rhuRBloixTC3FQnD3GIlhryHiJC8iSBdqEgQa+5sSmmNSCohuBHEahdFEN5KXHQVSqkhvuPi3chEJ84EhB643Mf5+P/POffe84QOpGzdRoFzwJdBdRWo+jT+r11sqROCAP4NcD2oToT92/dCABwDrksug3mUIwgU1bQliDok2ARkM1PjNNIE4GnQtZVOCQBersO3cwJja2tmWq64tlWseQZHKi5S4QvgQlBlTeYMQIQ/jHUjoviZepy3wmlZQdm6z1T4DZgBNgBDojrd5DINfB1sP6kwa6zraYUlq4Ar7kMRTgM2kF8Cxnwa/90q2Fj3EXCa4trmwBSqY76eLK4iOGJdpGAo2vEJcBv0pE+Tv1oBtyDaGWIPAs+BU6p6s1FPcgnGOrAf+BOoqsitxuR4y56uJeXvvkdyPQicB3qAOWBYjHUrd3pU4VIjjZfWA/xWNZVaFyLHgTPAohjrFDjj0/hsuVIrCfIxQh+wG9gV1hJwwKfxk9CSHcAs0AU8COs+ykMinvvJeNlYNwr8UAKWgUPGut1AH8UZRAH0CXCHYiwYIF5JFOgGroUE9gMbEHKUZ8a6h8BmYDkCJgJwd+jbSZR+VLeA9Po0HgygzW+mBODTeFAjelV1C0o/xWyaC1h9wETJp/EIMLLOVn+w8tGYiAEWgXthrZL1zKJm6Xgu/X+zKPzFvgKqQZU1mTMAER4b684pXG6k8b8dERjrSsBxoAZsBR4BI0J+87WT6DQqS8GnLlA11iWS648zU8lyuwqOAhcpDmxY0V8b6eogP5nkwI2yrXlBDlNckosayT8UV/edBN0APo37ja1Fgmwz1g0A+4CBEHMX+B10HvQXnyY/hwf7adsWUTw8jHVXgD3A9qDPgAWKqTkAHAuzMjPWLQSfF20JFLzAEPB5yHQcmAfNfJrkBXktAtkWfPaGPQP8m3ivAAjT+5GmFQRMAAAAAElFTkSuQmCC") no-repeat left center transparent;
background-size: 100% 100%;
} */
/* FINE CODICE PRIMA RIGA DEL CARRELLO */
#im-product-container .container-gallery-info .product-title {
padding-top: 2px;
padding-bottom: 2px;
margin: 5px 0; font: normal bold normal 20pt 'Abel';
color: #ffffff;
background-color: transparent;
text-decoration: none;
text-align: center;
border: none;
text-align: center;
}
/* INIZIO CODICE SECONDA RIGA DEL CARRELLO */
#im-product-container .container-gallery-info .product-category {
margin: 0% auto;
display: inline;
width: 120px;
height: 20px;
text-align: center;
vertical-align: middle;
padding: 1px 20px;
border: 1px solid #bc6320;
border-radius: 5px;
background: #ffa134;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffa134), to(#bc6320));
background: -webkit-linear-gradient(#ffa134, #bc6320);
background: -moz-linear-gradient(#ffa134, #bc6320);
background: -o-linear-gradient(#ffa134, #bc6320);
background: linear-gradient(#ffa134, #bc6320);
text-shadow: #763e14 1px 1px 1px;
font: normal normal bold 12px abel;
color: #ffffff;
text-decoration: none;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000FF', endColorstr='#EE82EE', GradientType=0 );
}
#im-product-container .container-gallery-info .product-category:hover,
#im-product-container .container-gallery-info .product-category:focus {
border: 1px solid #eb7c28;
background: #ffc13e;
background: -webkit-gradient(linear, left top, left bottom, from(#ffc13e), to(#e27726));
background: -moz-linear-gradient(top, #ffc13e, #e27726);
background: linear-gradient(to bottom, #ffc13e, #e27726);
color: #ffffff;
text-decoration: none;
}
#im-product-container .container-gallery-info .product-category:active {
background: #bc6320;
background: -webkit-gradient(linear, left top, left bottom, from(#bc6320), to(#bc6320));
background: -moz-linear-gradient(top, #bc6320, #bc6320);
background: linear-gradient(to bottom, #bc6320, #bc6320);
}
/* #im-product-container .container-gallery-info .product-category:before{
content: "\0000a0";
display: inline;
height: 24px;
width: 24px;
line-height: 24px;
margin: 0 4px -6px -4px;
position: relative;
top: 0px;
left: 0px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABnElEQVRIie3Uv4oTURSA8d8dRMRizUwlluIDiIVot2Bn5Y67hVj4FJYh4LpgCGK1hfgES8wg2KpsJWghYmVlZyMyEyXIIm6uRRCTbCZ/bGz2lHPO+b5zhnsvx/G/I6xUXVRraOLCjOx3PJKn7/9N0Ksagi52sT+j4iye4Jo8/fnnY7IivC1Pn8nTPg5wHeuigTz9iK84Pd66WDAJfzGWeYxzuCpo1bWfmAsvqgZ62JGnr6ay5+XpHUV5ivB8dUGvyrBXA4e3imoXDawoKPoNYpe4I89mwQnuiq7ggPhueUGvzEZw2/Jsv67RRjrE679DlQnWiL/qBUV5krA3gqf18Ol4WiVo46U8G4ynpk5RuIQPK8F7/USijR+GHkynJwXRJ1xWlNlS8KJMhNgZwWPLZjqcL7iZfkGT0F0o6VUJoYMBsWVzdvnRizb6PdtzJUWVCDr4Jh625PWz1L9FRbWOJnFLnpUTkwcPUUmSe26cqUXM3mDeJuPwGBbC529wZBMt3MZnh+G+rcbC1uUEI8lF3MIbIRY2ljtkx7FU/AZBvYqMhlO/SgAAAABJRU5ErkJggg==") no-repeat left center transparent;
background-size: 100% 100%; */
}
/* FINE CODICE SECONDO RIGO CARRELLO */
</style>