Vispirms veiciet šīs darbības, lai pievienotu pogu stilus savam Shopify veikalam vai jebkurai citai platformai, piemēram, Mozello un WooCommerce, kur atļauts pielāgot CSS.

1. Atrodiet Savas Pogas DIV Nosaukumu:

   • Vispirms atveriet web-inspektoru. Lūk, kā to izdarīt:

     • Mac, Apple: Nospiediet Cmd + Option + I.

     • Windows, PC: Nospiediet Ctrl + Shift + I.

   • Izpētiet pogas elementu, lai iegūtu tā div nosaukumu vai ID.

2. Atveriet Shopify Theme editoru

• No Shopify admin paneļa, dodieties uz Online Store > Themes > noklikšķiniet uz sadaļas, kur atrodas poga un ielīmējiet kodu Custom CSS laukā.

Tagad aplūkosim dažus pogu stilus, kas var uzlabot jūsu Shopify veikala dizainu, viegli ievietojot savā veikalā.

1. Vienkārša poga 

Ieguvums: šī CSS poga būs piemērota, ar tīru un modernu dizainu, ja vēlaties pieskaņot to minimālistiskai noskaņai, kas būs gan moderni, gan stilīgi. Ar šo kodu jūs varēsiet arī mainīt tās krāsu, platumu, augstumu u.c.

Kopēt

.button {
    background-color: #94e786;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
            

2. Poga ar noapaļotiem stūriem

Ieguvums: Draudzīgi mūsdienīgs tēls, kas padarīs jūsu mājaslapu pievilcīgāku apmeklētājiem.

Kopēt

.button {
    background-color: #2ecc71;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 25px;
}
            

3. Kontūrveida poga

Ieguvums: Elegants, daudzpusīgs stils, kas lieliski piemērots sekundārajiem aicinājumiem uz darbību vai gadījumiem, kad vēlaties, lai poga būtu mazāk redzami uzkrītoša.

Kopēt

.button {
  background-color: white;
  color: #3c9342;
  border: 2px solid #3c9342;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
}
            

4. Krāsas pārejā veidota poga

Ieguvums: Lieliski piemērota, lai pievērstu uzmanību svarīgām darbībām jūsu veikala lapā, pievienojot krāsu dinamiku.

Izvēlieties krāsu pāreju šeit

Kopēt

.button {
  background: linear-gradient(to right, #3c9342, #94e786);
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
}
            

5. Poga ar ēnas efektu

Ieguvums: Šī CSS poga pievieno dziļumu un dimensiju, padarot pogas izskatīgākas un interaktīvākas.

Kopēt

.button {
    background-color: #8e44ad;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
            

6. Poga ar animāciju

Ieguvums: Pievieno dinamiku un piesaista klienta uzmanību, veicinot lietotāju mijiedarbību

Kopēt

.button {
    background-color: #c0392b;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.button:hover {
    background-color: #e74c3c;
}
            

Kopsavilkums

Pogas ir būtiskas ne tikai kā vienkārši klikšķināmi elementi jūsu vietnē, bet tās ir arī izšķiroša sastāvdaļa, kas ietekmē konversiju optimizāciju. Izmantojot pareizos CSS pogu stilus, jūs varat uzlabot lietotāju pieredzi un padarīt savu Shopify veikalu pievilcīgāku un vieglāk lietojamu.

Eksperimentējiet ar dažādiem stiliem un izvēlieties tos, kas vislabāk atbilst jūsu zīmola identitātei un mērķiem. Pogas ir vairāk nekā tikai dizaina elements – tās var būt efektīvs rīks, lai palielinātu pārdošanas veiktspēju un uzlabotu Shopify veikala optimizāciju.

Perfection Media mēs ticam, ka katra detaļa ir svarīga, lai izveidotu izcilu tiešsaistes klātbūtni. Kā mēs vienmēr sakām, "Lielisks dizains dzimst no vienkāršības un skaidrības."

Ja jums nepieciešama palīdzība, Perfection Media komanda ir šeit, lai palīdzētu jums radīt veiksmīgu e-komercijas pieredzi!