floradouville

Woop woop! Thank you!! 😀

Hi Everyone! How can I automatically (using Zapier) send customers to a specific segment in Flodesk? So far, the Squarespace + Zapier API integration only offers to use information received via form submission... which is not super useful. Thank you 🙂 Flora

Ah! My question exactly. @daje.morris have you found a way? Hi Everyone! How can I automatically (using Zapier) send customers to a specific segment in Flodesk? So far, the Squarespace + Zapier API integration only offers to use information received via form submission... which is not super useful. Thank you 🙂 Flora

Waw, amazing @tuanphan, thank you 😀 I used 2 of these already. Now I would like the dropdown menu to align vertically from the left under the start of the word it comes under, in this case it's "Livres". Right now, it vertically aligns from the right, with the end of the word. Website: https://www.jeremie-mercier.com/ What should I do to fix this? Thanks! 🙏

Hi @paul2009, thank you for this! I will report it to Squarespace Customer Support 🙂

Hi everyone, On my payment page, the quantity field does not look good: the French translation takes all the space and the number looks all squeezed in. Worst of all is that it actually IS possible to update the quantity at this stage (which is good) but you really need to click at the right end of the box to see it become blue and then be able to erase the number and enter a new one. It's not practical at all for the customer. Any idea on how to fix this? Thank you!

Oh my, @paul2009 already had an answer to this VERY question 🤩 Thank you! Here it is, in case someone finds this later: https://sf.digital/squarespace-solutions/how-to-reduce-the-height-of-a-code-block Yay! 🙌

Hi everyone, I have embed a Flodesk HTML raw code to the footer of my website using a code block, to add an opt-in on every page. However, the size of the form block is too high and I am not able to adjust it: Squarespace shows red lines when I try to. You will find the link of a page of the site I'm talking about, and here is the code I used: <link rel="preload" href="https://usercontent.flodesk.com/ad1ebcc8-ab4b-44d2-a167-f7de216860e0/css/font_53a6dc34-efee-46f4-b6fb-a730b16a2ea4_1732558091.css" as="style"> <link rel="stylesheet" href="https://usercontent.flodesk.com/ad1ebcc8-ab4b-44d2-a167-f7de216860e0/css/font_53a6dc34-efee-46f4-b6fb-a730b16a2ea4_1732558091.css"> <style> [data-ff-el="root"].ff-6744bc29056c5378a2fed29a *, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a *::before, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a *::after { box-sizing: border-box; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a [tabindex="-1"]:focus { outline: none !important; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a h1, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a h2, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a h3, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a h4, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a h5, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a h6 { margin-top: 0; margin-bottom: 0.7em; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a p { margin-top: 0; margin-bottom: 1rem; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a ol, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a ul, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a dl { margin-top: 0; margin-bottom: 1.4rem; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a ol ol, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a ul ul, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a ol ul, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a ul ol { margin-bottom: 0; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a strong { font-weight: bolder; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a small { font-size: 80%; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a sub, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a sub { bottom: -0.25em; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a sup { top: -0.5em; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a { color: #000000; text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a a:hover { color: #4396fd; text-decoration: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a img { border-style: none; vertical-align: middle; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a svg:not(:root) { overflow: hidden; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a area, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a button, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a [role="button"], [data-ff-el="root"].ff-6744bc29056c5378a2fed29a input, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a label, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a select, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a summary, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a textarea { touch-action: manipulation; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a label { display: inline-block; font-weight: bolder; margin-bottom: 0.7rem; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a button:focus { outline: 1px dotted; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a input, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a button, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a select, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a optgroup, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a textarea { margin: 0; font-size: inherit; font-family: inherit; line-height: inherit; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a button, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a input { overflow: visible; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a button, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a select { text-transform: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a button, html[data-ff-el="root"].ff-6744bc29056c5378a2fed29a [type="button"], [data-ff-el="root"].ff-6744bc29056c5378a2fed29a [type="reset"], [data-ff-el="root"].ff-6744bc29056c5378a2fed29a [type="submit"] { -webkit-appearance: button; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a button::-moz-focus-inner, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a [type="button"]::-moz-focus-inner, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a [type="reset"]::-moz-focus-inner, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a input[type="radio"], [data-ff-el="root"].ff-6744bc29056c5378a2fed29a input[type="checkbox"] { padding: 0; box-sizing: border-box; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a input[type="date"], [data-ff-el="root"].ff-6744bc29056c5378a2fed29a input[type="time"], [data-ff-el="root"].ff-6744bc29056c5378a2fed29a input[type="datetime-local"], [data-ff-el="root"].ff-6744bc29056c5378a2fed29a input[type="month"] { -webkit-appearance: listbox; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a textarea { resize: vertical; overflow: auto; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a [type="number"]::-webkit-inner-spin-button, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a [type="number"]::-webkit-outer-spin-button { height: auto; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a [type="search"] { outline-offset: -2px; -webkit-appearance: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a [type="search"]::-webkit-search-cancel-button, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a [hidden] { display: none !important; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-control { width: 100%; display: block; outline: none; position: relative; -webkit-appearance: none; appearance: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-control:focus { outline: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-control::placeholder { color: transparent !important; opacity: 0 !important; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-control:disabled { opacity: 1; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-label { top: 0; left: 0; right: 0; margin: 0; overflow: hidden; position: absolute; white-space: nowrap; text-overflow: ellipsis; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-control:not(:placeholder-shown)+.fd-form-label { opacity: 0; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-description { margin: 5px 0 0 0; font-size: 0.8em; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-feedback { margin: 5px 0 0 0; font-size: 0.8em; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-group { margin: 0 0 15px; position: relative; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-group.fd-has-success .fd-form-feedback, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-group.fd-has-success .fd-form-check { color: #02dba8 !important; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-group.fd-has-success .fd-form-control { color: #02dba8 !important; border-color: #02dba8 !important; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-group.fd-has-success .fd-form-feedback { display: block; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-group.fd-has-error .fd-form-feedback, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-group.fd-has-error .fd-form-check { color: #eb3d3b !important; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-group.fd-has-error .fd-form-control { color: #eb3d3b !important; border-color: #eb3d3b !important; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-group.fd-has-error .fd-form-feedback { display: block; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-btn { cursor: pointer; display: inline-flex; outline: none; max-width: 100%; -webkit-appearance: none; appearance: none; font-style: normal; text-align: center; align-items: center; text-shadow: none; white-space: normal; justify-content: center; text-decoration: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-btn:hover { outline: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-btn:focus { outline: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-btn:disabled { opacity: 0.8; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-check { cursor: pointer; margin: 0; display: flex; position: relative; align-items: center; padding-left: 30px; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-check__input { top: 0; left: 0; width: 18px; height: 18px; opacity: 0; z-index: -1; position: absolute; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-check__checkmark { top: 0; left: 0; width: 18px; height: 18px; display: block; position: absolute; background-size: 18px; background-image: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg' %3e %3cpath d='M1 4C1 2.34315 2.34315 1 4 1H16C17.6569 1 19 2.34315 19 4V16C19 17.6569 17.6569 19 16 19H4C2.34315 19 1 17.6569 1 16V4Z' fill='white' /%3e %3cpath fill='black' fill-rule='evenodd' clip-rule='evenodd' d='M0.25 4C0.25 1.92893 1.92893 0.25 4 0.25H16C18.0711 0.25 19.75 1.92893 19.75 4V16C19.75 18.0711 18.0711 19.75 16 19.75H4C1.92893 19.75 0.25 18.0711 0.25 16V4ZM4 1.75C2.75736 1.75 1.75 2.75736 1.75 4V16C1.75 17.2426 2.75736 18.25 4 18.25H16C17.2426 18.25 18.25 17.2426 18.25 16V4C18.25 2.75736 17.2426 1.75 16 1.75H4Z' /%3e %3c/svg%3e"); background-repeat: no-repeat; background-position: center center; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-check__label { flex: 1 1; margin: 0; font-size: 14px; text-align: left; word-break: break-word; font-weight: 400; line-height: 18px; letter-spacing: 0.01em; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-check__input:checked+.fd-form-check__checkmark::after { opacity: 1; z-index: 1; visibility: visible; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-check__checkmark::after { top: 0; left: 0; width: 18px; height: 18px; content: ""; display: block; opacity: 0; z-index: 1; position: absolute; transition: opacity 0.4s, z-index 0.4s; visibility: inherit; background-size: 12px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' width='12' height='10' viewBox='0 0 11.51 8.2' %3e %3ctitle%3echeck%3c/title%3e %3cpath d='M4.05%2c8.2A.74.74%2c0%2c0%2c1%2c3.52%2c8L.22%2c4.68A.75.75%2c0%2c0%2c1%2c1.28%2c3.62l3.3%2c3.3A.75.75%2c0%2c0%2c1%2c4.58%2c8%2c.74.74%2c0%2c0%2c1%2c4.05%2c8.2Z' /%3e %3cpath d='M4.06%2c8.2A.74.74%2c0%2c0%2c1%2c3.53%2c8a.75.75%2c0%2c0%2c1%2c0-1.06l6.7-6.7a.75.75%2c0%2c0%2c1%2c1.06%2c1.06L4.59%2c8A.74.74%2c0%2c0%2c1%2c4.06%2c8.2Z' /%3e %3c/svg%3e"); background-repeat: no-repeat; background-position: center center; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-check__input:focus { outline: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-content { position: relative; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-has-success .fd-form-content { display: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-has-captcha .fd-form-content>*:not(.fd-form-captcha) { opacity: 0; visibility: hidden; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-captcha { top: 0; left: 0; width: 100%; height: 100%; display: flex; position: absolute; align-items: center; justify-content: flex-start; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-success { width: 100%; display: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-has-success .fd-form-success { display: block; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-success>*:last-child { margin-bottom: 0; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-error { display: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-has-error .fd-form-error { display: block; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-error>*:last-child { margin-bottom: 0; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-focus-visible, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-check__input.fd-focus-visible+.fd-form-check__checkmark { outline: none; box-shadow: 0 0 0 2px #ffffff, 0 0 0 calc(2px + 4px) #000000 !important; transition: box-shadow 0.2s !important; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-focus-visible, [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .fd-form-check__input.fd-focus-visible+.fd-form-check__checkmark { outline: none; box-shadow: 0 0 0 2px #067567, 0 0 0 calc(2px + 2px) #80efe1 !important; transition: box-shadow 0.2s !important; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a { background: #067567; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__container { margin: 0 auto; max-width: 900px; background: #067567; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__form { color: #ffffff; width: 100%; margin: 0; padding: 30px; font-size: 26px; text-align: left; font-family: Source-Sans-3; font-weight: 300; line-height: 1.6; letter-spacing: 1.4000000000000001px; text-transform: none; } @media (max-width: 767px) { [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__form { word-wrap: anywhere; word-break: break-word; white-space: normal; overflow-wrap: break-word; } } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__title { color: #ffffff; width: 100%; margin: 0 0 25px; display: block; font-size: 34px; text-align: left; font-family: Source-Sans-3; font-weight: 500; line-height: 1.3; letter-spacing: 2px; text-transform: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__title * { line-height: inherit; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__subtitle { width: 100%; margin: 0 0 30px; display: block; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__subtitle * { line-height: inherit; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__content { margin: -10px -5px 0; display: flex; flex-wrap: wrap; align-items: start; flex-direction: row; justify-content: center; } @media (max-width: 767px) { [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__content { display: block; } } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a[data-ff-stage="success"] .ff-6744bc29056c5378a2fed29a__content { display: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__fields { flex: 0 1 auto; margin: 0px 0px 0; display: flex; flex-wrap: wrap; max-width: calc(100% + 10px); justify-content: center; } @media (max-width: 767px) { [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__fields { display: block; } } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__field { flex: 1 1; margin: 10px 5px 0; font-size: 18px; max-width: 250px; min-width: 140px; text-align: left; font-family: Source-Sans-3; font-weight: 300; letter-spacing: 0.6px; } @media (max-width: 767px) { [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__field { max-width: calc(100% - 10px); } } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__control { color: #7e727a; border: 2px solid #ffffff; height: 48px; padding: 12px 20px; font-size: 18px; background: #ffffff; text-align: left; font-family: Source-Sans-3; font-weight: 300; line-height: 20px; border-radius: 0px; letter-spacing: 0.6px; text-transform: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__label { color: #7e727a; border: 2px solid transparent; padding: 12px 20px; font-size: 18px; text-align: left; font-family: Source-Sans-3; font-weight: 300; line-height: 20px; letter-spacing: 0.6px; text-transform: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__preference { margin: 30px 5px 0; display: flex; flex-direction: column; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__preference-title { color: #333333; width: 100%; margin: 0 0 30px; display: block; font-size: 18px; text-align: center; font-weight: 700; line-height: 1.4; letter-spacing: 0px; text-transform: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__preference-title * { line-height: inherit; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__preference-control { width: 100%; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__preference-list { width: calc(100% + 24px); margin: -8px -12px; display: flex; flex-wrap: wrap; justify-content: flex-start; } @media (max-width: 767px) { [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__preference-list { display: block; } } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__preference-item { flex: 0 0 33.333333333333336%; padding: 8px 12px; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__form-check .fd-form-check__input { top: 2.200000000000001px; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__form-check .fd-form-check__checkmark { top: 2.200000000000001px; border-radius: 4px; background-image: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg' %3e %3cpath d='M1 4C1 2.34315 2.34315 1 4 1H16C17.6569 1 19 2.34315 19 4V16C19 17.6569 17.6569 19 16 19H4C2.34315 19 1 17.6569 1 16V4Z' fill='white' /%3e %3cpath fill='black' fill-rule='evenodd' clip-rule='evenodd' d='M0.25 4C0.25 1.92893 1.92893 0.25 4 0.25H16C18.0711 0.25 19.75 1.92893 19.75 4V16C19.75 18.0711 18.0711 19.75 16 19.75H4C1.92893 19.75 0.25 18.0711 0.25 16V4ZM4 1.75C2.75736 1.75 1.75 2.75736 1.75 4V16C1.75 17.2426 2.75736 18.25 4 18.25H16C17.2426 18.25 18.25 17.2426 18.25 16V4C18.25 2.75736 17.2426 1.75 16 1.75H4Z' /%3e %3c/svg%3e"); } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__form-check .fd-form-check__label { color: #333333; font-size: 14px; min-height: 22.400000000000002px; font-weight: 400; line-height: 1.6; letter-spacing: 0px; text-transform: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__form-check .fd-form-check__checkmark::after { background-size: 12px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' width='12' height='10' viewBox='0 0 11.51 8.2' %3e %3ctitle%3echeck%3c/title%3e %3cpath d='M4.05%2c8.2A.74.74%2c0%2c0%2c1%2c3.52%2c8L.22%2c4.68A.75.75%2c0%2c0%2c1%2c1.28%2c3.62l3.3%2c3.3A.75.75%2c0%2c0%2c1%2c4.58%2c8%2c.74.74%2c0%2c0%2c1%2c4.05%2c8.2Z' /%3e %3cpath d='M4.06%2c8.2A.74.74%2c0%2c0%2c1%2c3.53%2c8a.75.75%2c0%2c0%2c1%2c0-1.06l6.7-6.7a.75.75%2c0%2c0%2c1%2c1.06%2c1.06L4.59%2c8A.74.74%2c0%2c0%2c1%2c4.06%2c8.2Z' /%3e %3c/svg%3e"); } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__footer { flex: 0 1 auto; margin-top: 10px; text-align: center; margin-left: 5px; margin-right: 5px; } @media (max-width: 767px) { [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__footer { margin-top: 25px; } } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__button { color: #ffffff; width: auto; border: 2px solid #f5f3f4; display: inline-block; padding: 12px 20px; font-size: 18px; background: #067567; text-align: center; font-family: Helvetica, sans-serif; font-weight: 400; line-height: 20px; white-space: nowrap; border-radius: 0px; letter-spacing: 0.9999999999999999px; text-transform: none; } @media (max-width: 767px) { [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__button { width: 100%; } } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__success { display: none; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a[data-ff-stage="success"] .ff-6744bc29056c5378a2fed29a__success { display: block; } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__success-message { color: #282527; width: 100%; display: block; font-size: 24px; word-wrap: anywhere; min-height: 1.6em; text-align: left; word-break: break-word; font-family: Source-Sans-3; font-weight: 500; line-height: 1.6; white-space: normal; overflow-wrap: break-word; letter-spacing: 1.4000000000000001px; pointer-events: auto; text-transform: none; } @media (max-width: 767px) { [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__success-message { font-size: 24px; } } [data-ff-el="root"].ff-6744bc29056c5378a2fed29a .ff-6744bc29056c5378a2fed29a__error { margin: 10px 0 0 0; } </style> <div class="ff-6744bc29056c5378a2fed29a" data-ff-el="root" data-ff-version="3" data-ff-type="inline" data-ff-name="ribbonBanner" data-ff-stage="default"> <!--tpl {% block config %} tpl--> <div data-ff-el="config" data-ff-config="eyJ0cmlnZ2VyIjp7Im1vZGUiOiJpbW1lZGlhdGVseSIsInZhbHVlIjowfSwib25TdWNjZXNzIjp7Im1vZGUiOiJtZXNzYWdlIiwibWVzc2FnZSI6IiIsInJlZGlyZWN0VXJsIjoiIn0sImNvaSI6ZmFsc2UsInNob3dGb3JSZXR1cm5WaXNpdG9ycyI6dHJ1ZSwibm90aWZpY2F0aW9uIjpmYWxzZX0=" style="display: none"></div> <!--tpl {% endblock %} tpl--> <div class="ff-6744bc29056c5378a2fed29a__container"> <form class="ff-6744bc29056c5378a2fed29a__form" action="https://form.flodesk.com/forms/6744bc29056c5378a2fed29a/submit" method="post" data-ff-el="form"> <div class="ff-6744bc29056c5378a2fed29a__title"> <div style="word-break:break-word"> <div data-paragraph="true">Recevez tous mes articles<br>directement dans votre boîte mail</div> </div> </div> <div class="ff-6744bc29056c5378a2fed29a__subtitle"> <div style="word-break:break-word"> <div data-paragraph="true">et reprenez votre santé en main !</div> </div> </div> <div class="ff-6744bc29056c5378a2fed29a__content fd-form-content" data-ff-el="content"> <div class="ff-6744bc29056c5378a2fed29a__fields" data-ff-el="fields"> <!--tpl {% block fields %} tpl--> <div class="ff-6744bc29056c5378a2fed29a__field fd-form-group"> <input id="ff-6744bc29056c5378a2fed29a-firstName" class="ff-6744bc29056c5378a2fed29a__control fd-form-control" type="text" maxlength="255" name="firstName" placeholder="Prénom" data-ff-tab="firstName::email" required /> <label for="ff-6744bc29056c5378a2fed29a-firstName" class="ff-6744bc29056c5378a2fed29a__label fd-form-label"> <div> <div>Prénom</div> </div> </label> </div> <div class="ff-6744bc29056c5378a2fed29a__field fd-form-group"> <input id="ff-6744bc29056c5378a2fed29a-email" class="ff-6744bc29056c5378a2fed29a__control fd-form-control" type="text" maxlength="255" name="email" placeholder="Adresse email" data-ff-tab="email:firstName:submit" required /> <label for="ff-6744bc29056c5378a2fed29a-email" class="ff-6744bc29056c5378a2fed29a__label fd-form-label"> <div> <div>Adresse email</div> </div> </label> </div> <input type="text" maxlength="255" name="confirm_email_address" style="display: none" /> <!--tpl {% endblock %} tpl--> </div> <div class="ff-6744bc29056c5378a2fed29a__footer" data-ff-el="footer"> <button type="submit" class="ff-6744bc29056c5378a2fed29a__button fd-btn" data-ff-el="submit" data-ff-tab="submit"> <span>Je m'inscris !</span> </button> </div> </div> <div class="ff-6744bc29056c5378a2fed29a__success fd-form-success" data-ff-el="success"> <div class="ff-6744bc29056c5378a2fed29a__success-message"> <div> <div>Merci ! Votre inscription a bien été prise en compte.</div> </div> </div> </div> <div class="ff-6744bc29056c5378a2fed29a__error fd-form-error" data-ff-el="error"></div> </form> </div> </div> <script> (function(w, d, t, h, s, n) { w.FlodeskObject = n; var fn = function() { (w[n].q = w[n].q || []).push(arguments); }; w[n] = w[n] || fn; var f = d.getElementsByTagName(t)[0]; var v = '?v=' + Math.floor(new Date().getTime() / (120 * 1000)) * 60; var sm = d.createElement(t); sm.async = true; sm.type = 'module'; sm.src = h + s + '.mjs' + v; f.parentNode.insertBefore(sm, f); var sn = d.createElement(t); sn.async = true; sn.noModule = true; sn.src = h + s + '.js' + v; f.parentNode.insertBefore(sn, f); })(window, document, 'script', 'https://assets.flodesk.com', '/universal', 'fd'); </script> <script> window.fd('form:handle', { formId: '6744bc29056c5378a2fed29a', rootEl: '.ff-6744bc29056c5378a2fed29a', }); </script> What can I do? Thank you for your help! 🙏

Wonderful! Thank you @SaranyaDesigns, it all works. I adjusted where required and it's perfect!

Hello there! I want to add a badge on product pages for products with a specific tag. I was able to add a 'coming soon' badge to all products on the main shop page, now it would be nice to also display a badge on the product page to make it clear. The main shop page: https://www.kivi-jewelry.com/shop One example of a page I want to display a 'coming soon' badge: https://www.kivi-jewelry.com/shop/p/liivarebane And I would like the tag to like the 'sold out' tag on this page: https://www.kivi-jewelry.com/shop/p/test And here is the CSS code I have put so far: //GENERAL FOR BADGES .products.collection-content-wrapper .product-mark { text-transform: none; font-weight: 500; font-size: 14px; } //COMING SOON // Add a badge "coming soon" on products on main shop page .product-mark.sf-nouveau { position: absolute; top: 0; background: rgba(255, 255, 255, 0.5); padding-top: 0.4rem; padding-bottom: 0.4rem; padding-left: 0.7rem; padding-right: 0.7rem; margin-top: 1.5rem; color: #443f41; letter-spacing: 1.5px; } // Hide Add to Cart button when product is coming soon .tag-nouveau .ProductItem-details .sqs-add-to-cart-button { display: none !important; } // Add a badge "coming soon" on products on product page??? //SOLD OUT // Add a badge "sold out" on products on main shop page .view-list .product-mark.sold-out { position: absolute; top: 0; background: rgba(255, 255, 255, 0.5) !important; padding-top: 0.7rem; padding-bottom: 0.7rem; padding-left: 0.7rem; padding-right: 0.7rem; margin-top: 1.5rem; color: #443f41 !important; letter-spacing: 1.5px; } // Add a badge "sold out" on products on product page .view-item .product-mark.sold-out { background: #fff !important; color: #443f41 !important; letter-spacing: 1.5px; padding-top: 0.7rem; padding-bottom: 0.7rem; padding-left: 1.5rem; padding-right: 1.5rem; justify-content: center; align-items: center; text-align: center; display: inline-block !important; font-size: 18px; } // Hide price on main shop page page when product is sold out .sold-out .product-price { display: none !important; } // Hide price on product page when product is sold out .sold-out .ProductItem-details .product-price, .sold-out .ProductList-overlay .ProductList-meta .product-price { display: none; } // Hide Add to Cart button when product is sold out .sold-out .ProductItem-details .sqs-add-to-cart-button { display: none; } Also, 2 other minor queries: how can I reduce the space under the badge here: how can I reduce the space above the lower bit of text here: Can anyone help me? By the way this community is amazing, I have found so many answers in this forum today 😍 Thank you!