Ecommerce uye RetailTsvaga Kutengesa

Iyo Iri Nyore Nzira Yekuita Yako Shopify CSS Iyo Yakavakwa Uchishandisa Liquid Variables.

Takagadzira kunze a Shopify Uyezve saiti yemutengi ine akati wandei marongero ezvitaera zvavo mune chaiyo theme faira. Kunyange izvo zvichinyatso batsira kugadzirisa masitayipi nyore, zvinoreva kuti hauna static cascading style sheets (CSS) faira raunogona nyore mini (kuderedza saizi). Dzimwe nguva izvi zvinodaidzwa seCSS Compression uye compressing CSS yako.

Chii chinonzi CSS Minification?

Paunenge uchinyorera kune stylesheet, unotsanangura manyorerwo echimwe chinhu cheHTML kamwe, wobva waishandisa kakawanda pane chero nhamba yemapeji ewebhu. Semuenzaniso, kana ndaida kuseta mamwe maratidziro ekuti mafonti angu aitaridzika sei pasaiti yangu, ndaigona kuronga CSS yangu sezvinotevera:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Mukati meiyo stylesheet, nzvimbo yega yega, mutsara wekudzoka, uye tebhu zvinotora nzvimbo. Kana ndikabvisa zvese izvo, ndinogona kuderedza saizi yeiyo stylesheet nepamusoro pe40% kana iyo CSS ikaderedzwa! Mhedzisiro ndeiyi…

h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}

CSS minification chinhu chinodiwa kana iwe uchida kukurumidzira saiti yako uye kune akati wandei maturusi online anogona kukubatsira kudzvanya CSS yako faira zvakanaka. Ingotsvaga compress CSS chishandiso or minify CSS chishandiso paIndaneti.

Fungidzira faira reCSS hombe uye kuti inzvimbo yakawanda sei inogona kuchengetwa nekudzikisa CSS yayo… kazhinji ishoma ye20% uye inogona kukwira pamusoro pemakumi mana muzana ebhajeti ravo. Kuve nediki CSS peji rinotaurwa pasaiti yako yese kunogona kuchengetedza nguva dzekuremerwa pane yega peji peji, kunogona kuwedzera chinzvimbo chesaiti yako, kunatsiridza kuita kwako, uye pakupedzisira kunatsiridza metric yako yekushandura.

Iyo yakadzika, hongu, ndeyekuti kune mutsetse mumwechete mune yakadzvanywa CSS faira saka iwo akanyanya kuoma kunetsa kana kugadzirisa.

Shopify CSS Liquid

Mukati meShopify theme, unogona kuisa marongero aunogona kugadzirisa zviri nyore. Isu tinoda kuita izvi patinenge tichiyedza uye nekugadzirisa masaiti kuitira kuti isu tigone kungogadzirisa dingindira nekuona pane kuchera mukodhi. Saka, yedu Stylesheet inovakwa neLiquid (Shopify's scripting language) uye isu tinowedzera zvinosiyana kugadzirisa Stylesheet. Inogona kutaridzika seizvi:

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

Nepo izvi zvichishanda nemazvo, haugone kungokopa kodhi uye kushandisa chishandiso chepamhepo kuideredza nekuti script yavo hainzwisise ma tag emvura. Muchokwadi, iwe unoparadza zvachose CSS yako kana ukaedza! Nhau huru ndedzekuti nekuti yakavakwa neLiquid... unogona KUSHANDISA scripting kuderedza zvinobuda!

Shopify CSS Minification In Liquid

Shopify inoita kuti iwe ugone kunyora zviri nyore mavara uye kugadzirisa zvinobuda. Muchiitiko ichi, tinogona kunyatsoputira CSS yedu kuita shanduko yemukati tobva tazvibata kuti tibvise ma tabo ese, mitsara inodzoka, uye nzvimbo! Ndakawana iyi kodhi mu

Shopify Nharaunda kubva Tim (tairli) uye yakashanda zvakanaka!

{%- capture content %}

ALL Your CSS CODE HERE

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minifed: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

Saka, kumuenzaniso wangu uri pamusoro, peji rangu retheme.css.liquid raizotaridzika seizvi:

{%- capture content %}

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minified: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

Pandinomhanyisa kodhi, inobuda CSS ndeiyi inotevera, yakanyatso kucheneswa:

/* CSS minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}

Douglas Karr

Douglas Karr ndiye CMO OpenINSIGHTS uye muvambi we Martech Zone. Douglas akabatsira akawanda ekubudirira kweMarTech kutanga, akabatsira mukushingairira kweanopfuura madhora mashanu emadhora mukutenga nekudyara kweMartech, uye anoenderera mberi nekubatsira makambani kuita nekuita otomatiki nzira dzawo dzekutengesa nekutengesa. Douglas inyanzvi inozivikanwa pasi rese yedhijitari uye MarTech nyanzvi uye mutauri. Douglas zvakare munyori akaburitswa wegwaro raDummie uye bhuku rehutungamiriri hwebhizinesi.

Related Articles

Kudzoka kumusoro
pedyo

Adblock Yaonekwa

Martech Zone inokwanisa kukupa izvi zvemukati pasina muripo nekuti isu tinoita mari saiti yedu kuburikidza nemari yekushambadza, affiliate links, uye kutsigira. Tinozotenda kana iwe ukabvisa yako ad blocker iwe paunoona yedu saiti.