API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 2nd, 2023
49
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.00 KB | None | 0 0
raw download clone embed print report
  1. email-signup-banner.liquid
  2.  
  3. {{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
  4. {{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
  5. {{ 'newsletter-section.css' | asset_url | stylesheet_tag }}
  6. {{ 'section-email-signup-banner.css' | asset_url | stylesheet_tag }}
  7.  
  8. {%- style -%}
  9. #Banner-{{ section.id }}::after {
  10. opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
  11. }
  12.  
  13. {%- if section.settings.image_height == 'adapt-image' and section.settings.image != blank -%}
  14. @media screen and (max-width: 749px) {
  15. #Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
  16. padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
  17. content: '';
  18. display: block;
  19. }
  20. }
  21.  
  22. #Banner-{{ section.id }}::before,
  23. #Banner-{{ section.id }} .banner__media::before {
  24. padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
  25. content: '';
  26. display: block;
  27. }
  28. {%- endif -%}
  29. {%- endstyle -%}
  30.  
  31. <div
  32. id="Banner-{{ section.id }}"
  33. class="email-signup-banner banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.image_height == 'adapt-image' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}"
  34. >
  35. {%- if section.settings.show_background_image -%}
  36. <div class="banner__media{% if section.settings.image != blank %} media{% endif %}">
  37. {%- if section.settings.image != blank -%}
  38. <img
  39. srcset="
  40. {%- if section.settings.image.width >= 375 -%}{{ section.settings.image | image_url: width: 375 }} 375w,{%- endif -%}
  41. {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
  42. {%- if section.settings.image.width >= 1100 -%}{{ section.settings.image | image_url: width: 1100 }} 1100w,{%- endif -%}
  43. {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
  44. {%- if section.settings.image.width >= 1780 -%}{{ section.settings.image | image_url: width: 1780 }} 1780w,{%- endif -%}
  45. {%- if section.settings.image.width >= 2000 -%}{{ section.settings.image | image_url: width: 2000 }} 2000w,{%- endif -%}
  46. {%- if section.settings.image.width >= 3000 -%}{{ section.settings.image | image_url: width: 3000 }} 3000w,{%- endif -%}
  47. {%- if section.settings.image.width >= 3840 -%}{{ section.settings.image | image_url: width: 3840 }} 3840w,{%- endif -%}
  48. {{ section.settings.image | image_url }} {{ section.settings.image.width }}w
  49. "
  50. sizes="100vw"
  51. src="{{ section.settings.image | image_url: width: 1500 }}"
  52. loading="lazy"
  53. alt="{{ section.settings.image.alt | escape }}"
  54. width="{{ section.settings.image.width }}"
  55. height="{{ section.settings.image.width | divided_by: section.settings.image.aspect_ratio }}"
  56. >
  57. {%- else -%}
  58. {%- render 'email-signup-banner-background' -%}
  59. {%- render 'email-signup-banner-background-mobile' -%}
  60. {%- endif -%}
  61. </div>
  62. {%- endif -%}
  63. <div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width">
  64. <div class="email-signup-banner__box banner__box newsletter newsletter__wrapper isolate{% if section.settings.show_background_image == false %} email-signup-banner__box--no-image{% endif %} content-container color-{{ section.settings.color_scheme }} gradient content-container--full-width-mobile">
  65. {%- for block in section.blocks -%}
  66. {%- case block.type -%}
  67. {%- when 'heading' -%}
  68. <h2 class="email-signup-banner__heading {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
  69. {{ block.settings.heading | escape }}
  70. </h2>
  71. {%- when 'paragraph' -%}
  72. <div class="newsletter__subheading rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
  73. {{ block.settings.text }}
  74. </div>
  75. {%- when 'email_form' -%}
  76. <div {{ block.shopify_attributes }}>
  77. {% form 'customer', class: 'newsletter-form' %}
  78. <input type="hidden" name="contact[tags]" value="newsletter">
  79. <div class="newsletter-form__field-wrapper">
  80. <div class="field">
  81. <input
  82. id="NewsletterForm--{{ section.id }}"
  83. type="email"
  84. name="contact[email]"
  85. class="field__input"
  86. value="{{ form.email }}"
  87. aria-required="true"
  88. autocorrect="off"
  89. autocapitalize="off"
  90. autocomplete="email"
  91. {% if form.errors %}
  92. autofocus
  93. aria-invalid="true"
  94. aria-describedby="Newsletter-error--{{ section.id }}"
  95. {% elsif form.posted_successfully? %}
  96. aria-describedby="Newsletter-success--{{ section.id }}"
  97. {% endif %}
  98. placeholder="{{ 'newsletter.label' | t }}"
  99. required
  100. >
  101. <label class="field__label" for="NewsletterForm--{{ section.id }}">
  102. {{ 'newsletter.label' | t }}
  103. </label>
  104. <button
  105. type="submit"
  106. class="newsletter-form__button field__button"
  107. name="commit"
  108. id="Subscribe"
  109. aria-label="{{ 'newsletter.button_label' | t }}"
  110. >
  111. {% render 'icon-arrow' %}
  112. </button>
  113. </div>
  114. {%- if form.errors -%}
  115. <small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">
  116. {%- render 'icon-error' -%}
  117. {{- form.errors.translated_fields.email | capitalize }}
  118. {{ form.errors.messages.email -}}
  119. </small>
  120. {%- endif -%}
  121. </div>
  122. {%- if form.posted_successfully? -%}
  123. <h3
  124. class="newsletter-form__message newsletter-form__message--success form__message"
  125. id="Newsletter-success--{{ section.id }}"
  126. tabindex="-1"
  127. autofocus
  128. >
  129. {% render 'icon-success' -%}
  130. {{- 'newsletter.success' | t }}
  131. </h3>
  132. {%- endif -%}
  133. {% endform %}
  134. </div>
  135. {%- endcase -%}
  136. {%- endfor -%}
  137. </div>
  138. </div>
  139. </div>
  140.  
  141. {% schema %}
  142. {
  143. "name": "t:sections.email-signup-banner.name",
  144. "tag": "section",
  145. "class": "section",
  146. "settings": [
  147. {
  148. "type": "paragraph",
  149. "content": "t:sections.email-signup-banner.settings.paragraph.content"
  150. },
  151. {
  152. "type": "image_picker",
  153. "id": "image",
  154. "label": "t:sections.email-signup-banner.settings.image.label"
  155. },
  156. {
  157. "type": "range",
  158. "id": "image_overlay_opacity",
  159. "min": 0,
  160. "max": 100,
  161. "step": 10,
  162. "unit": "%",
  163. "label": "t:sections.email-signup-banner.settings.image_overlay_opacity.label",
  164. "default": 0
  165. },
  166. {
  167. "type": "checkbox",
  168. "id": "show_background_image",
  169. "label": "t:sections.email-signup-banner.settings.show_background_image.label",
  170. "default": true
  171. },
  172. {
  173. "type": "select",
  174. "id": "image_height",
  175. "options": [
  176. {
  177. "value": "adapt-image",
  178. "label": "t:sections.email-signup-banner.settings.image_height.options__1.label"
  179. },
  180. {
  181. "value": "small",
  182. "label": "t:sections.email-signup-banner.settings.image_height.options__2.label"
  183. },
  184. {
  185. "value": "medium",
  186. "label": "t:sections.email-signup-banner.settings.image_height.options__3.label"
  187. },
  188. {
  189. "value": "large",
  190. "label": "t:sections.email-signup-banner.settings.image_height.options__4.label"
  191. }
  192. ],
  193. "default": "medium",
  194. "label": "t:sections.email-signup-banner.settings.image_height.label",
  195. "info": "t:sections.email-signup-banner.settings.image_height.info"
  196. },
  197. {
  198. "type": "select",
  199. "id": "desktop_content_position",
  200. "options": [
  201. {
  202. "value": "top-left",
  203. "label": "t:sections.email-signup-banner.settings.desktop_content_position.options__1.label"
  204. },
  205. {
  206. "value": "top-center",
  207. "label": "t:sections.email-signup-banner.settings.desktop_content_position.options__2.label"
  208. },
  209. {
  210. "value": "top-right",
  211. "label": "t:sections.email-signup-banner.settings.desktop_content_position.options__3.label"
  212. },
  213. {
  214. "value": "middle-left",
  215. "label": "t:sections.email-signup-banner.settings.desktop_content_position.options__4.label"
  216. },
  217. {
  218. "value": "middle-center",
  219. "label": "t:sections.email-signup-banner.settings.desktop_content_position.options__5.label"
  220. },
  221. {
  222. "value": "middle-right",
  223. "label": "t:sections.email-signup-banner.settings.desktop_content_position.options__6.label"
  224. },
  225. {
  226. "value": "bottom-left",
  227. "label": "t:sections.email-signup-banner.settings.desktop_content_position.options__7.label"
  228. },
  229. {
  230. "value": "bottom-center",
  231. "label": "t:sections.email-signup-banner.settings.desktop_content_position.options__8.label"
  232. },
  233. {
  234. "value": "bottom-right",
  235. "label": "t:sections.email-signup-banner.settings.desktop_content_position.options__9.label"
  236. }
  237. ],
  238. "default": "middle-center",
  239. "label": "t:sections.email-signup-banner.settings.desktop_content_position.label"
  240. },
  241. {
  242. "type": "checkbox",
  243. "id": "show_text_box",
  244. "default": true,
  245. "label": "t:sections.email-signup-banner.settings.show_text_box.label"
  246. },
  247. {
  248. "type": "select",
  249. "id": "desktop_content_alignment",
  250. "options": [
  251. {
  252. "value": "left",
  253. "label": "t:sections.email-signup-banner.settings.desktop_content_alignment.options__1.label"
  254. },
  255. {
  256. "value": "center",
  257. "label": "t:sections.email-signup-banner.settings.desktop_content_alignment.options__2.label"
  258. },
  259. {
  260. "value": "right",
  261. "label": "t:sections.email-signup-banner.settings.desktop_content_alignment.options__3.label"
  262. }
  263. ],
  264. "default": "center",
  265. "label": "t:sections.email-signup-banner.settings.desktop_content_alignment.label"
  266. },
  267. {
  268. "type": "color_scheme",
  269. "id": "color_scheme",
  270. "label": "t:sections.all.colors.label",
  271. "info": "t:sections.email-signup-banner.settings.color_scheme.info",
  272. "default": "background-1"
  273. },
  274. {
  275. "type": "header",
  276. "content": "t:sections.email-signup-banner.settings.header.content"
  277. },
  278. {
  279. "type": "select",
  280. "id": "mobile_content_alignment",
  281. "options": [
  282. {
  283. "value": "left",
  284. "label": "t:sections.email-signup-banner.settings.mobile_content_alignment.options__1.label"
  285. },
  286. {
  287. "value": "center",
  288. "label": "t:sections.email-signup-banner.settings.mobile_content_alignment.options__2.label"
  289. },
  290. {
  291. "value": "right",
  292. "label": "t:sections.email-signup-banner.settings.mobile_content_alignment.options__3.label"
  293. }
  294. ],
  295. "default": "center",
  296. "label": "t:sections.email-signup-banner.settings.mobile_content_alignment.label"
  297. },
  298. {
  299. "type": "checkbox",
  300. "id": "show_text_below",
  301. "default": true,
  302. "label": "t:sections.email-signup-banner.settings.show_text_below.label"
  303. }
  304. ],
  305. "blocks": [
  306. {
  307. "type": "heading",
  308. "name": "t:sections.email-signup-banner.blocks.heading.name",
  309. "limit": 1,
  310. "settings": [
  311. {
  312. "type": "text",
  313. "id": "heading",
  314. "default": "Opening soon",
  315. "label": "t:sections.email-signup-banner.blocks.heading.settings.heading.label"
  316. },
  317. {
  318. "type": "select",
  319. "id": "heading_size",
  320. "options": [
  321. {
  322. "value": "h2",
  323. "label": "t:sections.all.heading_size.options__1.label"
  324. },
  325. {
  326. "value": "h1",
  327. "label": "t:sections.all.heading_size.options__2.label"
  328. },
  329. {
  330. "value": "h0",
  331. "label": "t:sections.all.heading_size.options__3.label"
  332. }
  333. ],
  334. "default": "h1",
  335. "label": "t:sections.all.heading_size.label"
  336. }
  337. ]
  338. },
  339. {
  340. "type": "paragraph",
  341. "name": "t:sections.email-signup-banner.blocks.paragraph.name",
  342. "limit": 1,
  343. "settings": [
  344. {
  345. "type": "richtext",
  346. "id": "text",
  347. "default": "<p>Be the first to know when we launch.</p>",
  348. "label": "t:sections.email-signup-banner.blocks.paragraph.settings.paragraph.label"
  349. },
  350. {
  351. "type": "select",
  352. "id": "text_style",
  353. "options": [
  354. {
  355. "value": "body",
  356. "label": "t:sections.email-signup-banner.blocks.paragraph.settings.text_style.options__1.label"
  357. },
  358. {
  359. "value": "subtitle",
  360. "label": "t:sections.email-signup-banner.blocks.paragraph.settings.text_style.options__2.label"
  361. }
  362. ],
  363. "default": "body",
  364. "label": "t:sections.email-signup-banner.blocks.paragraph.settings.text_style.label"
  365. }
  366. ]
  367. },
  368. {
  369. "type": "email_form",
  370. "name": "t:sections.email-signup-banner.blocks.email_form.name",
  371. "limit": 1
  372. }
  373. ],
  374. "presets": [
  375. {
  376. "name": "t:sections.email-signup-banner.presets.name",
  377. "blocks": [
  378. {
  379. "type": "heading"
  380. },
  381. {
  382. "type": "paragraph"
  383. },
  384. {
  385. "type": "email_form"
  386. }
  387. ]
  388. }
  389. ],
  390. "templates": ["password"]
  391. }
  392. {% endschema %}
  393.  
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!