Tagg: konkurrens

NyheterTextalk

Responsiv butiksmall till Textalk Webshop!

[ecko_wide]responsiv [/ecko_wide]

Idag har vi har lagt till en ny typ av butiksmall som du kan välja för din butik. Vi kallar denna nya typ av butikstema för “Diversity-teman” och de är byggda med responsiv design. Det innebär att temat automatiskt anpassas efter skärmens storlek. Med andra ord går temat utmärkt att läsa i mobiler, läsplattor och datorer på en och samma gång! Du har även möjlighet att aktivera temat så att det enbart är synligt för mobila enheter. På så vis har du valet att anpassa din webbutik så att den är responsiv att läsa på t.ex. telefoner men samtidigt behåller sitt ursprungliga tema för datorer.

diversity

Aficionado

Det tema som vi lanserar idag kallas “Aficionado”. Temat har en välbekant layout men kan färganpassas så att det upplevs som ditt eget. Aficionado har en hel del inställningar som du kan använda för att sätta din egen prägel på butiken.

Att testa temat

Vi rekommenderar att du börjar med att testa diversity-temat Aficionado i ett inaktivt läge för att bekanta dig med den nya funktionaliteten. Om temat sätts aktivt kommer det att vara detta utseende som blir synligt för dina kunder. Det kan vara bra att vara medveten om detta i synnerhet nu då julhandeln pågår. Du finner mer information i vår manual förTeman

Framtiden

Vi kommer under den närmsta tiden lägga till ett antal ytterligare inställningar i Aficionado, så håll gärna utkik i admin, på vår Facebook-sida, eller i din e-post! Under nästa år kommer vi att erbjuda fler generella teman. Du kommer också att kunna beställa ett specialdesignat Diverisity-tema som ser ut och fungerar exakt enligt dina behov.

 

TextalkTips

Ändra knapparna för ”Fortsätt” och ”Bekräfta” på kassasidorna

[ecko_wide] kassasidorna-css[/ecko_wide]

Idag finns tyvärr inte möjligheten att ändra utseende på knapparna ”Fortsätt” samt ”Bekräfta” på kassasidorna via någon inställning. Det går dock att ändra dessa via CSS, och då är det följande man lägger in under Utseende -> redigera mallen -> CSS:

[ecko_code_highlight language=”css”].checkoutButtonRow .continue-button,
.checkoutConfirmButtonRow input {
/* Nedan anger ni färgen på texten som skall vara i knappen */
color: #FFFFFF;

/* Nedan anger ni storleken på texten som skall vara i knappen */
font-size: 14px;

/* Nedan anger ni bakgrundsfärgen som visas i knappen */
background-color: #000000;

/* Nedan anger ni bredden på knappen: */
width: 160px;

/* Nedan anger ni höjden på knappen: */
height: 30px;
}

.checkoutButtonRow .continue-button:hover,
.checkoutConfirmButtonRow input:hover {
/* Nedan anger ni färgen på texten som skall vara i knappen vid MouseOver */
color: #FFFFFF;

/* Nedan anger ni storleken på texten som skall vara i knappen vid MouseOver */
font-size: 14px;

/* Nedan anger ni bakgrundsfärgen som visas i knappen vid MouseOver */
background-color: #000000;
}[/ecko_code_highlight]

Övriga egenskaper kan man också lägga innanför klamrarna {} för att påverka utseendet:
Kantlinje, tjocklek:

[ecko_code_highlight language=”css”]border: 3px solid; (eller 0 om man inte vill ha någon kantlinje)[/ecko_code_highlight]

Och om ni har en kantlinje kan man även ändra färg:
Kantlinje, färg:

[ecko_code_highlight language=”css”]border-color: #FFFFFF;[/ecko_code_highlight]

Rundade hörn på knappen:

[ecko_code_highlight language=”css”]border-radius: 10px;[/ecko_code_highlight]

TextalkTips

Lägga till text på inloggningssidan

[ecko_wide] inloggningssidan[/ecko_wide]

Vill du ha en egen personlig text på inloggningssidan för dina kunder?
Här är ett script du kan lägga till som gör just detta.

kundinlogg

Hur gör jag?

1. Kopiera koden och klistra in den i ett ”Eget HTML-innehåll” under Utseende > Eget innehåll (notera att det inte ska vara någon länkning). För enklaste hantering döper ni ert egna innehåll till något relevant; exempelvis ”Script – text i inlogg”.

2. Byt ut texten *Text text text* mot det du vill visa för kunderna.

3. Spara och lägg till ditt innehåll i ett fält som visas på inloggningssidan (exempelvis Sidfot, Vänsterspalt eller högerspalt).

Notera att du även kan lägga till viss HTML-kod för att justera texten.

Scriptet:

[ecko_code_highlight language=”javascript”]// [/ecko_code_highlight]

 

TextalkTips

Förvald leveransmetod i kassan

[ecko_wide] leveransmetod[/ecko_wide]

Hallå där!

Här kommer ett tips på hur du lägger till en förvald leveransmetod i kassan för dina kunder.

förvald leverensmetod i kassan

Gå in under Utseende → Eget innehåll och skapa ett ”Nytt HTML-innehåll”. Kopiera koden och klistra in den i textfältet. Det ska inte vara någon länkning på detta.

Lägg sedan till ditt innehåll i ett av fälten som finns under Utseende → Fältlayout  (vanligast är Sidfoten).

[ecko_code_highlight language=”javascript”]// 0;
var hasNoSelectedShipmentMethod = $(‘input[name=”tws_shipmentmethod”]:checked’).length == 0;

if ( isPayPage && hasShipmentMethods && hasNoSelectedShipmentMethod ) {
$(‘input[name=”tws_shipmentmethod”]:first’).prop(”checked”, true);
$(‘form[name=”thisform”]’).submit();
}
});
// ]]>[/ecko_code_highlight]

Mer information om hur du skapar och lägger till eget innhåll hittar du i vår manual här:http://www.e-handel.info/eget-innehall

TextalkTips

Ny funktion – Sökträffar i realtid

[ecko_wide] sök i realtid[/ecko_wide]

För ett tag sedan lanserade vi en ny sökfunktion som resulterat till bättre relevans i dina kunders sökningar. Idag utökar vi denna sökfunktion ytterligare. Du kan nu erbjuda dina kunder en förhandsvisning av sökresultatet medan de skriver sökordet.

sök i realtid i webshoppen

Vill du aktivera detta i din butik så går du till Utseende -> Redigera mallen -> Fältlayout -> väljer det fält där du har placerat ditt sökfält.

Här finns en ny inställning som heter ”Autokomplettering”.
Ingen – Detta innebär att besökarna inte får något realtidsförslag.
Förslag – Detta innebär att besökarna får realtidsförslag.
Förslag med bilder – Detta innebär att besökarna får realtidsförslag kompletterat med bilder (som i bilden ovan).

sök i realtid

Läs mer om detta i vår manual. Har ni några frågor är ni välkomna att kontakta oss på shop@textalk.se eller 031-14 33 14.

TextalkTips

Snygga till din kassa med hjälp av CSS

[ecko_wide]snygga till kassan med css [/ecko_wide]

Med hjälp av CSS kan du i stor utsträckning påverka utseendet i din butik.
För dig som inte kan, vill eller har tid att själv skriva egen kod finns här en kod som förändrar utseendet i kassan.

Ny-kassa

[ecko_alert color=”orange”]Notera att denna färdiga mall inte är optimerad för Klarna Checkout. Om du vill använda denna CSS och Klarna Checkout samtidigt kan du justera koden efter eget bevåg. [/ecko_alert]

snygga till din kassa med CSS

Gör så här:

1. Skapa en ny kopia på din aktiva mall under Utseende. Detta för att inte påverka er aktiva butik. ( ni kan behöva ställa in mått osv först, om så krävs.)

2. Kopiera koden nedan och klistra in den under ”Utseende” →  [Redigera mall] →  Fliken ”CSS”.

3. Visa mallen och gå till kassan för att se vad ni behöver justera i höjd och bredd. (Punkt 1 & 2 i CSS nedan)

4. Ser det bra ut, aktivera mallen.

Punkt 1 CSS:
Detta sätter en höjd på boxen för att linjera i botten med de högerställda boxarna. ( Inget måste att justera, men det ser snyggare ut.)

Punkt 2 CSS:
Sätter bredden på boxarna i högerspalt, justera så det blir likvärdig marginal mot vänsterboxen som under boxarna.

Punkt 3 CSS:
Vill ni öka eller minska avståndet under boxarna kan ni göra detta här.

Punkt 4 CSS:
Detta är enbart så ni kan ändra utseendet på boxarna (förklaring nedan,#f7f7f7 är färgkoden)

Bakgrundsfärgen background-color:#F7F7F7;
Kantlinjen: border: 1px solid #CCCCCC;
Marginalen innanför boxen: padding: 15px;

Punkt 5 CSS:
Detta är enbart så ni kan ändra utseendet på textfält (förklaring nedan, #f7f7f7 är färgkoden)

Sätter avståndet i textfält padding:6px;
Kantlinjen: border: 1px solid #ccc;
Rundade hörn border-radius: 2px;
Skall inte röras width:100% !important;

Kod som skall infogas i fliken CSS:

[ecko_code_highlight language=”css”]/* Sätter höjden på boxen till vänster så den linjerar med högersidan, ändra värdet tills den linjerar / CSS Punkt 1 */

.checkoutBuyerForm {
min-height: 617px;
}

/* Sätter bredden på boxarna på högersidan / CSS Punkt 2 */

.checkoutMessageToShop, .checkoutSelectDelivery, .checkoutSelectPayment, .checkoutSelectCurrency, .checkoutDiscountCode {
width: 41%;
}

/* Sätter avståndet under boxarna / CSS Punkt 3 */

.checkoutBox, .checkoutButtonRow {
margin-bottom: 20px;
}

/* Sätter utseendet på boxarna / CSS Punkt 4 */

.checkoutBox, .basketBox, .basketPageBasketBox {
background-color: #F7F7F7;
border: 1px solid #CCCCCC;
padding: 15px;
}

/* Sätter utseendet på text-fält och textrutor / CSS Punkt 5 */

input.buyerfield, .checkoutBox select, .checkoutBox textarea, .contactfieldtext, .loginfieldtext, .contactfieldvalue input[type=”text”],.registerfieldtext, input[name=”by_username”], input[name=”by_email”], .checkoutDiscountCode input[type=”text”], input#giftcode {
padding: 6px;
border: 1px solid #ccc;
border-radius: 2px;
width: 100% !important;
}

/* Detta skall ni inte behöva röra */

.checkoutDiscountCode input[type=”text”], input#giftcode {
margin: 0 0 3px 0;
}

#buyerField_city, #buyerField_zip, #buyerField_deliv_zip, #buyerField_deliv_city {
width: 45% !important;
}

.checkoutBuyerForm {
width: 45%;
float: left;
}

.checkoutMessageToShop, .checkoutSelectDelivery, .checkoutSelectPayment, .checkoutSelectCurrency, .checkoutDiscountCode {
float: right;
clear: right;
}

.checkoutMessageToShop textarea, .checkoutDiscountCode input[type=”text”] {
width: 100% !important;
}

.checkoutBox, .checkoutButtonRow {
margin-top: 0;
}

.checkoutAcceptance {
clear: both;
}

.checkoutButtonRow {
clear: both;
}[/ecko_code_highlight]

E-handelTextalk WebshopTips

Nyttiga CSS-koder till din butik

css-koder

Ibland kan man behöva använda sig av CSS för att göra sidan lite mer personlig.
Här har vi samlat några av de vanligaste CSS-koderna vi i supporten får frågor om hur man gör.

För att lägga till någon av dessa koder kopierar du kodmaterialet och klistrar in under ”Utseende” > [Redigera mall] > Fliken ”CSS”.

Dölj ”Powered by Textalk Webshop”-loggan i footern

För att dölja logotypen längst ner i footern på din butik som säger ”powered by textalk webshop” lägger du bara till följande css:

.fabrikk--footer--made-by { 
  display: none !important;
}

Fixera bakgrundsbilden

.body {
  background-attachment: fixed;
}

Ha dina extrapriser i en annan färg.

I exemplet nedan så står #FF0000 för röd.

.reducedPrice {
  color: #FF0000;
}

Ändra textstorlek och färg på undergrupp till undergrupp

I exemplet nedan är texten 12 pixlar. Detta kan ni öka eller minska som ni vill genom att ändra siffrorna.
Färgen bestäms av raden color: #FF0000. Vill ni inte byta färg kan ni ta bort denna rad efter att ni klistrat in koden. Ni kan ändra färg genom att byta ut färgkoden som i detta fall är svart.

a.leftnavcontentsub:link, 
a.leftnavcontentsub:active, 
a.leftnavcontentsub:visited, 
a.leftnavcontentsub:hover, 
a.leftnavcontentsubselected:link, 
a.leftnavcontentsubselected:active, 
a.leftnavcontentsubselected:visited, 
a.leftnavcontentsubselected:hover {
  font-size: 12px;
  color: #000000;
}

Inlägget kommer uppdateras löpande med nya CSS-tips.