Kiekvieno valdiklio elemento išvaizdos pritaikymas

Skiltyje Valdiklio stilius produkto puslapio valdiklis suskaidomas į atskirus elementus, todėl kiekvieną jų galite stilizuoti atskirai. Atidarykite ją rinkinio redaktoriuje ir rasite akordeono skydelių rinkinį, po vieną kiekvienam elementui, kuriame galite valdyti spalvas, šriftus, kraštines, tarpus, ženklelius ir dar daugiau.

Kaip veikia skiltis „Valdiklio stilius“

Atidarykite rinkinio skirtuką Stilius ir raskite Valdiklio stilius. Spustelėkite skydelio antraštę, kad būtų parodyti to elemento valdikliai. Užvedus pelės žymeklį ant antraštės, peržiūroje paryškinamas atitinkamas elementas. Kai kurie skydeliai rodomi tik tada, kai rinkinyje galima naudoti atitinkamą funkciją.

Daugelyje skydelių naudojami tie patys pagrindiniai valdikliai: spalvų parinkiklis, šrifto dydžio ir šrifto stiliaus parinkikliai. Skydeliuose, kuriuose stilizuojamas langelis, pavyzdžiui, pasiūlymo kortelė ar ženklelis, taip pat galima nustatyti fono spalvą, kraštinės spalvą, kraštinės plotį ir kampų spindulį. Jūsų pakeitimai išsaugomi kartu su likusiais rinkinio nustatymais.

Skydeliai pagal elementus

Antraštė

Valdo valdiklio antraštės teksto spalvą, šrifto dydį ir šrifto stilių. Įveskite antraštės tekstą aukščiau skirtuke „Stilius“, kad būtų parodytas Antraštės lygiavimas: kairėje, centre, centre su linija per vidurį arba dešinėje. Kai lygiavimas nustatytas į Centre su linija per vidurį, šiame skydelyje atsiranda papildomas linijos spalvos ir storio valdiklis.

Pasiūlymo kortelė

Tai langelis aplink kiekvieną pasiūlymą, arba kiekio lygį. Tai didžiausias skydelis, nes jis apima tris vaizdines būsenas:

• Pasiūlymas nepasirinktas: numatytosios būsenos fono spalva, kraštinės spalva ir kraštinės plotis.
• Pasiūlymas užvedus pelės žymeklį: tie patys trys valdikliai, taikomi užvedus pelės žymeklį ant kortelės.
• Pasirinktas pasiūlymas: tie patys trys valdikliai šiuo metu pasirinktam pasiūlymui.

Skydelyje taip pat nustatomos bendros kortelių savybės: kampų spindulys, tarpas tarp kortelių, horizontalusis ir vertikalusis vidinis tarpas bei Radijo mygtuko parinktis, skirta radijo mygtukui rodyti arba slėpti. Animacinis fono efektas nustatomas atskirai, naudojant aukščiau skirtuke „Style“ esantį jungiklį Decoration (Blobs, Rings, Hearts, Starburst, Percent, Stars, Clock arba Money), ir rodomas tik pasirinktame pasiūlyme. Pasiūlymo kortelės spalvos taip pat valdo radijo mygtuko išvaizdą.

Pasiūlymo pavadinimas ir pasiūlymo paantraštė

Du atskiri skydeliai, kuriuose galima nustatyti pasiūlymo pavadinimo ir paantraštės eilučių spalvą, šrifto dydį bei šrifto stilių.

Nuolaidos etiketė

Nustatoma nuolaidos etiketės teksto spalva, fono spalva, šrifto dydis ir šrifto stilius. Atkreipkite dėmesį, kad šie nustatymai taip pat taikomi papildomoms dovanų žymoms.

Pasiūlymo vaizdas

Valdomas pasiūlymo vaizdo dydis, kampų spindulys, kraštinės spalva, kraštinės plotis ir Shadow (None, Small, Medium arba Large). Taip pat nustatoma, kaip rodomas vaizdas:

• Original: išlaikomas natūralus vaizdo kraštinių santykis.
• Square: vaizdas apkerpamas iki kvadrato.
• Square (top): vaizdas apkerpamas iki kvadrato, išlaikant jo viršutinę dalį.
• Square (fit): visas vaizdas sutalpinamas kvadrate jo neapkerpant.

Kiekio žyma

Nustatoma nedidelio kiekio skaičiaus, kuris gali būti rodomas ant pasiūlymo vaizdo, išvaizda. Galite nustatyti jo teksto spalvą, fono spalvą, kampų spindulį, šrifto dydį, šrifto stilių ir Position (Top right, Top left, Bottom right arba Bottom left). Šis skaičius rodomas ant pasiūlymo vaizdo, kai įjungta parinktis „Show quantity badge“.

Varianto etiketė

Nustatoma varianto parinkčių pavadinimų, pavyzdžiui, Size arba Color, ir jų eilučių numerių spalva, šrifto dydis bei šrifto stilius.

Išskleidžiamasis sąrašas

Variantų išskleidžiamiesiems sąrašams naudokite atskirą skydelį Dropdown, kuriame galima koreguoti tekstą, foną, kraštinę, kampus ir vidinius tarpus.

Pasiūlymo žyma

Žyma yra pasiūlymo akcentas, pavyzdžiui, „Most popular“. Be įprastų teksto spalvos, fono spalvos, šrifto dydžio ir šrifto stiliaus nustatymų, šiame skydelyje yra Badge shape parinkiklis su daugybe išankstinių nustatymų:

• Default, Folded, Pill
• Arrow Right, Arrow Left
• Square
• Banner, Banner Rounded
• Corner Ribbon, Side Ribbon, Side Ribbon Alt, Side Ribbon Rounded

Kaina

Kainos skydelyje sugrupuoti trys teksto stiliai, kurių kiekvienas turi atskirą spalvą, šrifto dydį ir šrifto stilių:

• Pagrindinė kaina: aktyvi pardavimo kaina.
• Palyginamoji kaina: perbraukta ankstesnė kaina.
• Tekstas už vienetą: vieneto kainos tekstas.

Rinkinys

Produktų rinkiniuose taip pat yra skydelis Bundle, skirtas produkto pavadinimo tekstui, kraštinei tarp rinkinio elementų ir pliuso ženklui tarp produktų.

Privalumai

Nustatoma privalumų sąrašo su ženkleliais išvaizda. Čia nustatomas bendras šrifto dydis ir šrifto stilius, taip pat atskira teksto spalva ir piktogramos spalva, kad piktogramų ir teksto spalvos galėtų skirtis.

Dovana ir papildomas pasiūlymas

Nemokamos dovanos blokas formuojamas dviem būsenomis, kurių kiekviena turi fono spalvą, pavadinimo spalvą, šrifto dydį ir šrifto stilių:

• Pasirinkto pasiūlymo dovana: dovanos blokas pasirinktame pasiūlyme.
• Nepasirinkto pasiūlymo dovana: dovanos blokas kituose pasiūlymuose.

Trečioje grupėje, Gift image, nustatomas dovanos vaizdo plotis ir kampų spindulys.

Dovanų ir „Mix & match“ iškylančiųjų langų vaizdai

Atidarykite Style > Modal style > Gift modal ir raskite Image fit. Šiuos valdiklius taip pat galite pasiekti šalia dovanų arba „Mix & match“ parinkiklio pasirinkę Customize modal style. Pasirinkite Original, kad išlaikytumėte visas nuotraukos proporcijas, arba Square, kad miniatiūros būtų vienodo formato. Šis nustatymas bendrinamas dovanų pasirinkimo ir rinkinio produktų grupės iškylančiuosiuose languose, naudojamuose šioje nuolaidoje, o pagrindinio valdiklio vaizdams taikomi atskiri pasiūlymo vaizdo nustatymai.

Poraštė

Nustatoma valdiklio poraštės teksto spalva, šrifto dydis ir šrifto stilius.

Konteineris ir didžiausias plotis

Skydelyje „Container“ bendras valdiklio plotis valdomas naudojant nustatymą Max width:

• Shopify default (44rem): valdiklio plotis apribojamas iki 44rem galimoje erdvėje.
• Full width (100%): valdiklis išplečiamas per visą jo konteinerio plotį.
• Custom: parodomas Width laukas, kuriame įvedama reikšmė pikseliais.

Šiame skydelyje taip pat yra Alert color, naudojama mažo likučio įspėjimo tekstui.

Naudokite Margin top ir Margin bottom, kad pakoreguotumėte tarpą aplink šios nuolaidos valdiklį prieš pridėdami pasirinktinį CSS.

„Full width“ užpildo valdiklio pirminio konteinerio plotį. Ši parinktis negali išplėsti siauros produkto informacijos skilties jūsų temoje.

Redagavimo patarimai

• Dirbdami stebėkite tiesioginę peržiūrą. Užvedus pelės žymeklį ant skydelio antraštės paryškinamas atitinkamas elementas, todėl prieš keičiant reikšmę galite patikrinti, ar redaguojate tinkamą dalį.
• Kartu nustatykite tris pasiūlymo kortelės būsenas: nepasirinkta, užvedus pelės žymeklį ir pasirinkta, kad pasirinkta būsena aiškiai išsiskirtų iš kitų.
• Jei reikia stiliaus nustatymų, kurių skydeliuose nėra, skilties apačioje esančiame skydelyje Custom CSS galite pridėti CSS, kuris pakeis valdiklio stilius.