Pasirinktinio CSS pridėjimas prie Bundlex valdiklio

Bundlex suteikia visavertį vaizdinį valdiklio stiliaus redaktorių, tačiau kartais reikia pasiekti detalę, kurios redaktorius nerodo, arba pakeisti tai, ką valdikliui primeta tema. Pasirinktinis CSS yra būtent tam skirtas pažengusio naudotojo sprendimas. Šiame straipsnyje aprašomos dvi vietos, kuriose galite jį pridėti, ir kaip patikimai pasirinkti valdiklio elementus.

Dvi vietos pasirinktiniam CSS pridėti

Yra du atskiri „Custom CSS“ laukai, kurie skiriasi taikymo apimtimi.

Rinkinio „Custom CSS“ laukas

(1) Išskleiskite „Custom CSS“ skiltį skiltyje „Widget style“. (2) Apribokite taisyklę Bundlex elementais ir prieš išsaugodami patikrinkite rezultatą. Šis pavyzdys po ekrano kopijos padarymo buvo atmestas.

Kiekvienas rinkinys turi atskirą Custom CSS skiltį, pasiekiamą skirtuke Style. Čia įklijuotas CSS išsaugomas kartu su tuo rinkiniu, todėl šis pasirinkimas tinka, kai pakeitimas turi būti taikomas tik ten, kur rodomas konkretus rinkinys.

Atidarykite rinkinį Bundlex valdymo skydelyje.
Atidarykite skirtuką Style ir išskleiskite Custom CSS, paskutinį elementą skiltyje Widget style.
Įklijuokite taisykles į kodo redaktorių. Lauke formato pavyzdys pateikiamas vietos rezervavimo ženklu: .bx-widget-container {margin-bottom: 10px;}.
Išsaugokite rinkinį.

Programos įterpinio „Custom CSS“ laukas

(1) Atidarykite „App embeds“ ir išskleiskite „Bundlex Bundles“. (2) „Show advanced settings“ parodo toliau esančius parinkiklių pakeitimo ir CSS laukus. Ši juodraštinės temos peržiūra buvo atkurta neišsaugojus pakeitimų.

Bundlex programos įterpinys, tai temos programos plėtinys, kurį įjungiate Shopify temos redaktoriaus skiltyje „App embeds“, taip pat turi Custom CSS lauką, matomą įjungus Show advanced settings. Čia įrašytas CSS taikomas visur, kur atvaizduojamas įterpinys, todėl naudokite jį visai temai skirtiems pakeitimams, kurie turi galioti kiekviename produkto puslapyje, kuriame rodomas valdiklis.

Shopify administravimo skiltyje atidarykite Online Store ir spustelėkite Edit theme.
Atidarykite Programėlių įterpimai ir raskite Bundlex Bundles.
Įjunkite Show advanced settings ir įklijuokite taisykles į lauką Custom CSS.
Išsaugokite temą.

Slinkite žemyn „App embeds“ skydelyje, kad pasiektumėte „Custom CSS“. Čia rodomas tuščias laukas liko nepakeistas.

Paprastai tariant, rinkitės bundle lauką konkrečiam rinkiniui skirtiems pakeitimams, o app embed lauką pakeitimams, kurie turi būti taikomi visur, kur rodomas valdiklis.

Valdiklio elementų pasirinkimas

Bundlex žymėjime naudojamos bx- klasės. Tai naudingi dabartinio valdiklio elementų pasirinkimo taikiniai:

.bx-widget-container - valdiklio konteineris.
.bx-widget - valdiklio turinys.
.bx-offer-wrap - pasiūlymo apvalkalas.
.bx-offer - pasiūlymo kortelė tame apvalkale.
.bx-active .bx-offer - pasirinkto pasiūlymo kortelė, aktyvi klasė yra jos apvalkale.
.bx-offer-title ir .bx-offer-subtitle - pasiūlymo tekstas.
.bx-original-price ir .bx-discounted-price - pradinės ir sumažintos kainos tekstai.

Apribokite taisykles valdiklio konteineriu. Pavyzdžiui:

.bx-widget-container .bx-offer-title {
  font-weight: 700;
}

Prieš formuodami stilių patikrinkite elementą produkto puslapyje. Žymėjimas priklauso nuo įjungtų funkcijų, o iš senesnės valdiklio versijos nukopijuotas parinkiklis gali nebeatitikti.

Temos stilių pakeitimas naudojant !important

Pirmiausia naudokite integruotus valdiklius. Norėdami pakeisti valdiklio plotį, išbandykite Style > Widget style > Container > Max width > Full width (100%). Jei temos taisyklė vis tiek pakeičia rezultatą, patikrinkite paveiktą elementą ir naudokite !important tik deklaracijoms, kurioms to reikia. Pavyzdžiui:

.bx-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

Šis pavyzdys užpildo visą galimą pirminio konteinerio plotį, tačiau negali praplėsti siauros temos skilties. Jei taisyklė neveikia, patikrinkite, ar parinkiklis atitinka sugeneruotą elementą, ar įkeltas stiliaus failas ir ar deklaracija galioja. Tada patikrinkite, kuri konkuruojanti taisyklė turi pirmenybę. Gali pakakti konkretesnio parinkiklio, nenaudojant !important.

Kada kreiptis pagalbos į palaikymo komandą

Abiejuose „Custom CSS“ laukuose nurodyta, kad prireikus pagalbos galite susisiekti su Bundlex palaikymo komanda, ir šis pasiūlymas yra tikras. Jei negalite nustatyti tinkamo parinkiklio arba pasirinktinė tema pakeitimus atmeta taip, kad !important nepadeda, nusiųskite palaikymo komandai produkto puslapio nuorodą ir norimo pakeitimo aprašymą. Jie gali pateikti patikrintą parinkiklį, kurį galėsite įklijuoti.

Tas pats taikoma ir parinkiklių laukams, rodomiems naudojant įterpinio parinktį Show advanced settings, skirtiems pasirinktinei vietai, įdėjimo į krepšelį mygtukui, produkto formai ir kiekio arba varianto blokams. Tai taip pat yra CSS parinkikliai, todėl palaikymo komanda gali padėti juos užpildyti pasirinktinėms temoms, kurios neaptinkamos automatiškai.

CSS nekeičia nuolaidų taisyklių, tačiau gali paslėpti kainas, pasirinkimus arba mygtukus ir neleisti pirkėjams naudotis valdikliu. Pritaikę taisyklę darbalaukyje ir mobiliajame įrenginyje išbandykite visas pasiūlymo būsenas, variantų pasirinkimus ir „Add to cart“.

Pasirinktinio CSS pridėjimas prie valdiklio