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:

   • 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 Klikšķiniet uz Sekcijas, Kur Atrodas Poga:

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

Tagad aplūkosim Shopify pogu stilus, kurus varat viegli ievietot savā veikalā, lai padarītu dizainu labāku.

1. Vienkārša Poga

Ieguvums: Tīrs un moderns dizains, kas labi sader ar minimālisma tēmām. Ar šo kodu Jūs varēsiet arī mainīt 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 Apaļiem Stūriem

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ūras Poga

Ieguvums: Elegants un daudzpusīgs, ideāli piemērots izsmalcinātam izskatam vai sekundārajām aicinājuma darbībām.

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. Gradienta Poga

Ieguvums: Pievilcīgs un spilgts, ideāli piemērots, lai pievērstu uzmanību svarīgām darbībām.

Izvēlieties Gradientus Š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. Ēnu Poga

Ieguvums: 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 dinamisku un iesaistošu efektu, 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;
}
            

Secinājums

Pogas ir vairāk nekā tikai klikšķināmi elementi jūsu mājaslapā vai interneta veikalā; tās ir būtiskas lietotāja pieredzes sastāvdaļas un var ievērojami ietekmēt jūsu konversijas rādītājus. Izmantojot pareizos pogu stilus, jūs varat izveidot pievilcīgu un iesaistošu iepirkšanās pieredzi saviem klientiem.

Atcerieties, ka galvenais ir eksperimentēt un redzēt, kuri stili vislabāk atbilst jūsu auditorijai. Nevilcinieties sajaukt un saskaņot šos stilus, lai atrastu perfekto variantu jūsu zīmolam.

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 ir kādi jautājumi vai nepieciešama papildu palīdzība, jūtieties brīvi sazināties ar mums. vai rakstiet komentāros.