API tools faq
paste
Advertisement
Guest User

shopify

a guest
Sep 19th, 2019
301
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.14 KB | None | 0 0
raw download clone embed print report
  1. <!-- /sections/index-banner-grid.liquid -->
  2. {%- assign image_size = section.settings.image_width | append: 'x' | append: section.settings.image_height -%}
  3. <div class="{{ section.settings.display }}" data-section-id="{{ section.id }}" data-section-type="banner-section">
  4. <div class="grid-container">
  5. <div class="box border-none index-banner-grid-container">
  6. {%- if section.settings.title != blank or section.settings.sub_title != blank -%}
  7. <div class="box-divider grid-x">
  8. {%- if section.settings.title != blank -%}
  9. <h2 class="box-title width-100">{{ section.settings.title }}</h2>
  10. {%- endif -%}
  11. {%- if section.settings.sub_title != blank -%}
  12. <p class="sub-title width-100">{{ section.settings.sub_title }}</p>
  13. {%- endif -%}
  14. </div>
  15. {%- endif -%}
  16. <div class="box-content">
  17. {%- if section.blocks.size > 0 -%}
  18. <div class="index-banner-grid-list grid-x grid-margin-x align-center">
  19. {%- for block in section.blocks -%}
  20. <div class="cell small-{{ block.settings.column_small }} medium-{{ block.settings.column_medium }} large-{{ block.settings.column_large }} xlarge-{{ block.settings.column_xlarge }} xxlarge-{{ block.settings.column_xxlarge }} xxxlarge-{{ block.settings.column_xxxlarge }} text-center">
  21. <div class="index-banner-grid-item effect effect-scope">
  22. {%- unless block.settings.image == blank -%}
  23. <a href="{{ block.settings.link }}" class="index-banner-grid-image display-block">
  24. <img src="{{ 'icon-loader-clock.svg' | asset_url }}" data-src="{{ block.settings.image | img_url: image_size }}" class="width-100 lazyload" alt="{{ block.settings.image.alt }}" style="border-radius: 50%;border: 1.5px;border-color: orange;border-style: solid;padding: 1.5px;"/>
  25. </a>
  26. {% else %}
  27. <a href="{{ block.settings.link }}" class="index-banner-grid-image display-block" >
  28. {% if section.blocks.size == 1 %}
  29. <img src="{{ 'icon-loader-clock.svg' | asset_url }}" data-src="{{ '1470x200.png' | asset_url }}" class="width-100 lazyload" alt="{{ block.settings.image.alt }}" />
  30. {% elsif section.blocks.size == 2 %}
  31. <img src="{{ 'icon-loader-clock.svg' | asset_url }}" data-src="{{ '720x200.png' | asset_url }}" class="width-100 lazyload" alt="{{ block.settings.image.alt }}" />
  32. {% else %}
  33. <img src="{{ 'icon-loader-clock.svg' | asset_url }}" data-src="{{ '270x270.png' | asset_url }}" class="width-100 lazyload" alt="{{ block.settings.image.alt }}" />
  34. {% endif %}
  35. </a>
  36. {%- endunless -%}
  37. {%- if block.settings.action_text != blank -%}
  38. <a href="{{ block.settings.link }}" class="button index-banner-grid-button">{{ block.settings.action_text }}</a>
  39. {%- endif -%}
  40. </div>
  41. </div>
  42. {%- endfor -%}
  43. </div>
  44. {%- endif -%}
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. {% schema %}
  50. {
  51. "name": "Banner Grid",
  52. "class": "index-section index-banner-grid",
  53. "settings": [
  54. {
  55. "type": "select",
  56. "id": "display",
  57. "label": "Display on",
  58. "options": [
  59. {
  60. "value": "",
  61. "label": "Desktop & Mobile"
  62. },
  63. {
  64. "value": "show-for-large",
  65. "label": "Desktop only"
  66. },
  67. {
  68. "value": "hide-for-large",
  69. "label": "Mobile only"
  70. }
  71. ],
  72. "default": ""
  73. },
  74. {
  75. "type": "header",
  76. "content": "Title"
  77. },
  78. {
  79. "type": "text",
  80. "id": "title",
  81. "label": "Title"
  82. },
  83. {
  84. "type": "html",
  85. "id": "sub_title",
  86. "label": "Sub-title"
  87. },
  88. {
  89. "type": "header",
  90. "content": "Settings"
  91. },
  92. {
  93. "type": "number",
  94. "id": "image_width",
  95. "label": "Image width",
  96. "default": 200
  97. },
  98. {
  99. "type": "number",
  100. "id": "image_height",
  101. "label": "Image height",
  102. "default": 200
  103. }
  104. ],
  105. "blocks": [
  106. {
  107. "type": "banner",
  108. "name": "Banner",
  109. "settings": [
  110. {
  111. "type": "image_picker",
  112. "id": "image",
  113. "label": "Image"
  114. },
  115. {
  116. "type": "url",
  117. "id": "link",
  118. "label": "Link"
  119. },
  120. {
  121. "type": "text",
  122. "id": "action_text",
  123. "label": "Action text"
  124. },
  125. {
  126. "type": "text",
  127. "id": "collection_name",
  128. "label": "Collection text"
  129. },
  130. {
  131. "type": "header",
  132. "content": "Responsive width"
  133. },
  134. {
  135. "type": "select",
  136. "id": "column_small",
  137. "label": "Width",
  138. "info": "For small screen (0px - 550px)",
  139. "options": [
  140. {
  141. "value": "12",
  142. "label": "1/1"
  143. },
  144. {
  145. "value": "6",
  146. "label": "1/2"
  147. },
  148. {
  149. "value": "4",
  150. "label": "1/3"
  151. },
  152. {
  153. "value": "3",
  154. "label": "1/4"
  155. },
  156. {
  157. "value": "2-4",
  158. "label": "1/5"
  159. },
  160. {
  161. "value": "2",
  162. "label": "1/6"
  163. },
  164. {
  165. "value": "8",
  166. "label": "2/3"
  167. },
  168. {
  169. "value": "9",
  170. "label": "3/4"
  171. },
  172. {
  173. "value": "10",
  174. "label": "5/6"
  175. }
  176. ],
  177. "default": "12"
  178. },
  179. {
  180. "type": "select",
  181. "id": "column_medium",
  182. "label": "Width",
  183. "info": "For medium screen (551px - 800px)",
  184. "options": [
  185. {
  186. "value": "12",
  187. "label": "1/1"
  188. },
  189. {
  190. "value": "6",
  191. "label": "1/2"
  192. },
  193. {
  194. "value": "4",
  195. "label": "1/3"
  196. },
  197. {
  198. "value": "3",
  199. "label": "1/4"
  200. },
  201. {
  202. "value": "2-4",
  203. "label": "1/5"
  204. },
  205. {
  206. "value": "2",
  207. "label": "1/6"
  208. },
  209. {
  210. "value": "8",
  211. "label": "2/3"
  212. },
  213. {
  214. "value": "9",
  215. "label": "3/4"
  216. },
  217. {
  218. "value": "10",
  219. "label": "5/6"
  220. }
  221. ],
  222. "default": "6"
  223. },
  224. {
  225. "type": "select",
  226. "id": "column_large",
  227. "label": "Width",
  228. "info": "For large screen (801px - 1260px)",
  229. "options": [
  230. {
  231. "value": "12",
  232. "label": "1/1"
  233. },
  234. {
  235. "value": "6",
  236. "label": "1/2"
  237. },
  238. {
  239. "value": "4",
  240. "label": "1/3"
  241. },
  242. {
  243. "value": "3",
  244. "label": "1/4"
  245. },
  246. {
  247. "value": "2-4",
  248. "label": "1/5"
  249. },
  250. {
  251. "value": "2",
  252. "label": "1/6"
  253. },
  254. {
  255. "value": "8",
  256. "label": "2/3"
  257. },
  258. {
  259. "value": "9",
  260. "label": "3/4"
  261. },
  262. {
  263. "value": "10",
  264. "label": "5/6"
  265. }
  266. ],
  267. "default": "4"
  268. },
  269. {
  270. "type": "select",
  271. "id": "column_xlarge",
  272. "label": "Width",
  273. "info": "For xlarge screen (1261px - 1440px)",
  274. "options": [
  275. {
  276. "value": "12",
  277. "label": "1/1"
  278. },
  279. {
  280. "value": "6",
  281. "label": "1/2"
  282. },
  283. {
  284. "value": "4",
  285. "label": "1/3"
  286. },
  287. {
  288. "value": "3",
  289. "label": "1/4"
  290. },
  291. {
  292. "value": "2-4",
  293. "label": "1/5"
  294. },
  295. {
  296. "value": "2",
  297. "label": "1/6"
  298. },
  299. {
  300. "value": "8",
  301. "label": "2/3"
  302. },
  303. {
  304. "value": "9",
  305. "label": "3/4"
  306. },
  307. {
  308. "value": "10",
  309. "label": "5/6"
  310. }
  311. ],
  312. "default": "3"
  313. },
  314. {
  315. "type": "select",
  316. "id": "column_xxlarge",
  317. "label": "Width",
  318. "info": "For xxlarge screen (1441px - 1680px)",
  319. "options": [
  320. {
  321. "value": "12",
  322. "label": "1/1"
  323. },
  324. {
  325. "value": "6",
  326. "label": "1/2"
  327. },
  328. {
  329. "value": "4",
  330. "label": "1/3"
  331. },
  332. {
  333. "value": "3",
  334. "label": "1/4"
  335. },
  336. {
  337. "value": "2-4",
  338. "label": "1/5"
  339. },
  340. {
  341. "value": "2",
  342. "label": "1/6"
  343. },
  344. {
  345. "value": "8",
  346. "label": "2/3"
  347. },
  348. {
  349. "value": "9",
  350. "label": "3/4"
  351. },
  352. {
  353. "value": "10",
  354. "label": "5/6"
  355. }
  356. ],
  357. "default": "2-4"
  358. },
  359. {
  360. "type": "select",
  361. "id": "column_xxxlarge",
  362. "label": "Width",
  363. "info": "For xxxlarge screen (1681px - infinity)",
  364. "options": [
  365. {
  366. "value": "12",
  367. "label": "1/1"
  368. },
  369. {
  370. "value": "6",
  371. "label": "1/2"
  372. },
  373. {
  374. "value": "4",
  375. "label": "1/3"
  376. },
  377. {
  378. "value": "3",
  379. "label": "1/4"
  380. },
  381. {
  382. "value": "2-4",
  383. "label": "1/5"
  384. },
  385. {
  386. "value": "2",
  387. "label": "1/6"
  388. },
  389. {
  390. "value": "8",
  391. "label": "2/3"
  392. },
  393. {
  394. "value": "9",
  395. "label": "3/4"
  396. },
  397. {
  398. "value": "10",
  399. "label": "5/6"
  400. }
  401. ],
  402. "default": "2"
  403. }
  404. ]
  405. }
  406. ],
  407. "presets": [
  408. {
  409. "name": "Banner Grid",
  410. "category": "Image"
  411. }
  412. ]
  413. }
  414. {% endschema %}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!