Prestashop - Guiden til farver der sælger.

Når du skal lave din egen shop, er det vigtigt at farverne er i orden. Der er mange måder at lave dem om på, men vi kan lige så godt bruge de værktøjer som ikke ødelægger noget. Download evt. et lille gratis program her (selvfølgelig på eget ansvar): https://dh42.com/free-prestashop-modules/prestashop-free-css-module/

Programmet går simpelthen ind og overskriver de originale indstillinger. MIDLERTIDIGT. Fjerner du funktioner i CSS Editing Module, kommer de gamle indstillinger frem igen. Så man kan altid fortryde. Jeg vil prøve at forklare nogle af de ting jeg har gjort. Her under et eksempel.

.pb-center-column #product_reference {
display: none;
}

Referencekode:

den kode som du bruger for at finde din leverandørs varenummer. Det rager jo bare ikke dine kunder hvor du køber dine varer. Derfor kan du slette referencen på din side. Du kan selvfølgelig også bare lade den blive... Se billede her under:

.pb-center-column #product_reference {
display: none;
}

Når du laver nye varer i shoppen, kan de få en label der fortæller at de er nye.

.new-label:before - Den lille snip "før" der er lidt mørkere end selve mærket
.new-label - er farven på dit mærke der hvor der står NY
.new-label:after - Den lille snip "efter"  der er lidt mørkere end selve mærket

Se billede her under:


.new-label:before {
border-color: #BF4443 transparent transparent transparent;

}
.new-label {
background: #FD5B59;
}

.new-label:after {

border-color: #BF4443 transparent transparent transparent;
}

Priser kan også have en farve. Dem kan du ændre her

Her er teksten grøn og baggrunden er hvid: Se billede her under.


.price.product-price {
color: #078E12 !important;
}

div.content_price {
background: white !important;
color: black !important;
}

Når du ændrer knappen i din shop, kan det godt være lidt besværligt. Derfor er det beskrevet på en nem måde her. Der er 2 forskellige knapper med LÆG I KURV. Der er den som ligger på produktet og den der ligger i hurtigvisning. 

Der er forskellige browsere som skal kunne aflæse knappen, så derfor har du disse linier: 

eksempel: background-image: -webkit-gradient(linear,left 0,left 100%,from(Green),to(Black));
eksempel: background-image: -webkit-linear-gradient(top,Green,0%,Black,100%);
eksempel: background-image: -moz-linear-gradient(top,Green 0,Black 100%);
eksempel: background-image: linear-gradient(to bottom,Green 0,Black 100%);

Bemærk at farverne BLACK og GREEN går igen. Det er dem du skal rette for at få andre farver på knappen.

Det samme går igen for de næste koder.


.box-info-product .exclusive og 
.box-info-product .exclusive

 

.button.ajax_add_to_cart_button span {
border: 1px solid;
border-color: none;
padding: 10px 14px;
display: block;
background: none;
background-image: -webkit-gradient(linear,left 0,left 100%,from(Green),to(Black));
background-image: -webkit-linear-gradient(top,Green,0%,Black,100%);
background-image: -moz-linear-gradient(top,Green 0,Black 100%);
background-image: linear-gradient(to bottom,Green 0,Black 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='Green',endColorstr='Black',GradientType=0);
}

.button.ajax_add_to_cart_button {
font: 700 17px/21px Arial,Helvetica,sans-serif;
color: #fff;
text-shadow: 1px 1px rgba(0, 0, 0, 0.73);
padding: 0;

border-color: white;
}

.button.ajax_add_to_cart_button:hover span {

background-image: linear-gradient(to bottom,Black 0, Green 100%);
border: None !important;
}

.button.ajax_add_to_cart_button:hover {
border-color: white;
}


.box-info-product .exclusive {
padding: 0;
border-top: none;
border-right: none;
border-left: none;
border-bottom: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
position: relative;
display: block;
background-image: linear-gradient(Black ,Green 100% );

}

.box-info-product .exclusive:hover {

padding: 0;
border-top: none;
border-right: none;
border-left: none;
border-bottom: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
position: relative;
display: block;
background-image: linear-gradient(Green ,Black 100% );

}

.box-info-product .exclusive span {

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
font-weight: 700;
font-size: 20px;
line-height: 22px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: none;
text-shadow: 0 1px #000000;
padding: 12px 36px 14px 60px;
color: #fff;
display: block !important;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.box-info-product .exclusive:before {
font-family: "FontAwesome";
position: absolute;
top: 0;
left: 0;
bottom: 0;
color: #fff;
font-size: 25px;
line-height: 47px;
text-shadow: 0 1px #000000;
content: "f07a";
z-index: 2;
width: 51px;
text-align: center;
border: none;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px;
border-radius: 5px 0 0 5px;
}


.box-info-product .exclusive:after {
background: none;
position: absolute;
top: 0;
bottom: 0;
left: 51px;
content: "";
width: 1px;
z-index: 2;
}

Du kan også ændre farve, på prisen på varen

Se den grønne pris på billedet her under:


.our_price_display .price {
font-weight: 600;
font-size: 29px;
line-height: 32px;
color: #078E12;
}

Prisreduktion har også farver. Her gul bund og rød tekst.

Se billede her under:

#reduction_percent, #reduction_amount {
margin-right: 10px;
padding: 1px 2px;
font-weight: 600;
font-family: "Open Sans",sans-serif;
font-size: 21px;
line-height: 23px;
color: #EC0C0C;
background: #EDF109;
border: none;
}

Man kan ændre alle farver og former på shoppen.

Hvis du højreklikker og trykker på "undersøg" kan du få mange flere gode påfund. Resten af koderne er fra min shop.
Jeg kan dårligt huske hvad der gør hvad, men prøv dig frem.

ul.product_list.grid > li .product-container .product-image-container .content_price {
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
background: rgba(255, 255, 255, 0.71) !important;
padding: 9px 0;
display: none;
}

div.cat_desc {
background: none !important;
color: white;
font-size: medium;
font-weight: 600;
text-shadow: 1px 1px rgba(0, 0, 0, 0.66);
padding: 5px;
}

Når man går ind i en menu er der en grim plade med tekst på.

Denne plade skal være der. Hvis den bliver for lille, bliver teksten ved varerne ikke vist. Se billede her under: Billedet ligger ikke en gang på mit domæne. Her under finder du kategorien MC Hjelme

.content_scene_cat .content_scene_cat_bg {
padding: 18px 10px 10px 42px;
background-color: #FFFFFF !important;
background: white !important;
background-image: url(http://www.kidsonline.dk/menu-tapet1.jpg) !important;
min-height: 10px !important;
background-attachment: fixed !important;

}


.content_scene_cat {
margin: 16px 0 26px 0;
box-shadow: 5px 5px 10px 1px rgb(0, 0, 0);
}

Når du har en vare på tilbud kommer der et tilbudsbanner på varen. Se det grønne tilbud her under.

.sale-label {
background: Green;
}

.sale-label:before {
border-color: #1E4E0E transparent transparent transparent;
}

.sale-label:after {
border-color: #1E4E0E transparent transparent transparent;
}

ul.product_list .availability span {
color: #333;

}

I toppen til højre er der bruger info, kontakt link og tlf ovre til venstre.

Se billede her under: Det kan også ændres

.header_user_info a {

color: #FD7900;
font-weight: bold;
display: block;
padding: 8px 9px 11px 8px;
cursor: pointer;
line-height: 18px;
}

#contact-link a {
display: block;
color: #FD7900;
font-weight: bold;
padding: 8px 10px 11px 10px;
cursor: pointer;
line-height: 18px;
}

.shop-phone strong {
color: #FD7900;
}

Man kan ændre søgeknappen

.btn.button-search:hover {
color: #007823;
}

#search_block_top .btn.button-search:hover {
color: #0B7E28;
}

#search_block_top .btn.button-search {
background: #060606;
display: block;
position: absolute;
top: 0;
right: 0;
border: none;
color: #FD7900;
width: 50px;
text-align: center;
padding: 10px 0 11px 0;
}

Hvis varen kommer på lager senere kan du gøre det mere synligt.

Se billede her under: Dato står nederst på billedet med rød skrift.

#availability_date_label {
display: inline-block;
width: 125px;
font-weight: 700;
font-size: 12px;
text-align: right;
color: #FF3201;
}

På billedet her under, har jeg lavet teksten om ved tjek ud siden.

.checkbox label {
color: #2F710E;
}

.checkbox label {
display: inline;
margin-bottom: 0;
font-weight: bold;
cursor: pointer;
}