Add a CTA underneath a block content

Solved
New Member
8 0 0

Hi, I am trying to add a CTA in the code, with adding in %shema% with because of its different blocks.
Does anyone know how to achieve this?

Code is:

<div class="grey-colour">
<div class="page-width">
<div style="background: transparent" class="section-block">
{% if section.settings.title != blank %}
<div class="section-block__header section-block__header--padded text-center">
<h4 class="h1--mini section-block__title">{{ section.settings.title | escape }}</h4>
</div>
{% endif %}

<div class="flex column-flex">
{% for block in section.blocks %}
{% if block.settings.image != blank %}
{% assign img_url = block.settings.image | img_url: '600x600' %}
{% endif %}
<div style="padding: 15px" class="flex__item text-center" {{ block.shopify_attributes }}>
{% if block.settings.image != blank %}
<noscript>
<div class="column-flex__image" style="background-image: url({{ block.settings.image | img_url: '600x600' }}); background-position: {{ block.settings.image_align }};"></div>
</noscript>
<div class="column-flex__image lazyload"
style="background-position: {{ block.settings.image_align }}; background-image: url('{{ block.settings.image | img_url: '300x300' }});"
data-bgset="{% include 'bgset', image: block.settings.image %}"
data-sizes="auto"
data-parent-fit="cover">
</div>
{% else %}
<div class="column-flex__image">
<div class="placeholder-background">
{{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
{% endif %}
<div style="background: #FFFFFF" class="column-flex__content-box">
<p class="h5">{{ block.settings.title | escape }}</p>
<div class="rte-setting">{{ block.settings.text }}</div>

{% if section.settings.linktext != blank and section.settings.link != blank %}
<h3> {{ section.settings.text-box }} </h3>
<a href="{{ section.settings.link }}" class="btn">{{ section.settings.linktext }}</a>
{% endif %}

</div>
</div>
{% endfor %}
</div>

{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
</div>
</div>
</div>

 

Get the output
 thow to.PNG

But not showing on the website when I put it in.

Many thanks,

 

0 Likes
New Member
8 0 0

Anyone having this problem or know a solution for this? 
Many thanks.

0 Likes
Shopify Expert
2458 414 518

Hi @ElinMaria 

You have to check ID of this block schema in file that you have assigned proper or not.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
8 0 0

Hi,
I have assign this in schema. Get the option when customized. But it is not showing up in the section.

{
"id": "link",
"type": "url",
"label": "Button link"
},
{
"id": "linktext",
"type": "text",
"label": "Button text",
"default": "Click here"
},

___
Full schema underneath.

{% schema %}
{
"name": {
"da": "Tekstkolonner med billeder",
"de": "Textspalten mit Fotos",
"en": "Text columns with images",
"es": "Col. de texto con imagen",
"fi": "Tekstisarakkeet kuvilla",
"fr": "Texte avec images",
"hi": "इमेज के साथ टेक्स्ट कॉलम",
"it": "Colonne di testo con foto",
"ja": "画像付きテキスト列",
"ko": "이미지 포함 텍스트 열",
"ms": "Lajur teks dengan imej",
"nb": "Tekstkolonner med bilder",
"nl": "Tekstkolommen met foto's",
"pt-BR": "Texto com imagens",
"pt-PT": "Colunas texto c/ imagens",
"sv": "Textkolumner med bilder",
"th": "คอลัมน์ข้อความพร้อมรูปภาพ",
"zh-CN": "带有图片的文本列",
"zh-TW": "附圖片的文字欄"
},
"class": "index-section",
"max_blocks": 3,
"settings": [
{
"type": "text",
"id": "title",
"label": {
"da": "Overskrift",
"de": "Titel",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "Titre",
"hi": "शीर्षक",
"it": "Heading",
"ja": "見出し",
"ko": "제목",
"ms": "Tajuk",
"nb": "Overskrift",
"nl": "Kop",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"da": "Tekstkolonner med billeder",
"de": "Textspalten mit Fotos",
"en": "Text columns with images",
"es": "Col. de texto con imagen",
"fi": "Tekstisarakkeet kuvilla",
"fr": "Texte avec images",
"hi": "इमेज के साथ टेक्स्ट कॉलम",
"it": "Colonne di testo con foto",
"ja": "画像付きテキスト列",
"ko": "이미지 포함 텍스트 열",
"ms": "Lajur teks dengan imej",
"nb": "Tekstkolonner med bilder",
"nl": "Tekstkolommen met afbeeldingen",
"pt-BR": "Colunas de texto com imagens",
"pt-PT": "Colunas texto c/ imagens",
"sv": "Textkolumner med bilder",
"th": "คอลัมน์ข้อความพร้อมรูปภาพ",
"zh-CN": "带有图片的文本列",
"zh-TW": "附圖片的文字欄"
}
}
],
"blocks": [
{
"type": "text_block",
"name": {
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "Texto",
"fi": "Teksti",
"fr": "Texte",
"hi": "टेक्स्ट",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"ms": "Teks",
"nb": "Tekst",
"nl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"zh-CN": "文本",
"zh-TW": "文字"
},
"settings": [
{
"type": "text",
"id": "title",
"label": {
"da": "Overskrift",
"de": "Titel",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "Titre",
"hi": "शीर्षक",
"it": "Heading",
"ja": "見出し",
"ko": "제목",
"ms": "Tajuk",
"nb": "Overskrift",
"nl": "Kop",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"da": "Tilføj en titel eller et slogan",
"de": "Titel oder Text hinzufügen",
"en": "Add a title or tagline",
"es": "Agregar un título o eslogan",
"fi": "Lisää otsikko tai iskulause",
"fr": "Ajouter un titre ou un slogan",
"hi": "एक शीर्षक या टैगलाइन जोड़ें",
"it": "Aggiungi un titolo o una tagline",
"ja": "タイトルまたはタグラインを追加する",
"ko": "제목 또는 슬로건 추가",
"ms": "Tambah tajuk atau tagline",
"nb": "Legg til en tittel eller er slagord",
"nl": "Voeg een titel of een slogan toe",
"pt-BR": "Adicione um título ou slogan",
"pt-PT": "Adicionar título ou slogan",
"sv": "Lägg till en titel eller tagline",
"th": "เพิ่มชื่อเรื่องหรือสโลแกน",
"zh-CN": "添加标题或标语",
"zh-TW": "新增標題或標語"
}
},
{
"type": "richtext",
"id": "text",
"label": {
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "Texto",
"fi": "Teksti",
"fr": "Texte",
"hi": "टेक्स्ट",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"ms": "Teks",
"nb": "Tekst",
"nl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": {
"da": "<p>Del blogopslag, produkter eller reklamer med dine kunder. Brug denne tekst til at beskrive produkter, dele detaljer om tilgængelighed og stil eller som et sted til at vise dine seneste anmeldelser eller ofte stillede spørgsmål.</p>",
"de": "<p>Blogposts, Produkte oder Promotions mit Ihren Kunden teilen. Nutzen Sie diesen Text, um Produkte zu beschreiben, Details zu Verfügbarkeit und Stil mitzuteilen oder als Ort, wo Reviews oder FAQs stehen.</p>",
"en": "<p>Share blog posts, products, or promotions with your customers. Use this text to describe products, share details on availability and style, or as a space to display recent reviews or FAQs.</p>",
"es": "<p>Comparte entradas de blogs, productos o promociones con tus clientes. Usa este texto para describir productos, compartir detalles sobre la disponibilidad y el estilo, o como un espacio para mostrar reseñas recientes o preguntas frecuentes.</p>",
"fi": "<p>Jaa blogikirjoituksia, tuotteita tai kampanjoita asiakkaittesi kanssa. Tämän tekstin avulla voit kuvata tuotteita, jakaa saatavuutta ja tyyliä koskevia tietoja tai voit käyttää sitä tilana viimeisimpien arvosteluiden tai usein kysyttyjen kysymysten esittämiselle.</p>",
"fr": "<p>Partagez des articles de blog, des produits ou des promotions avec vos clients. Utilisez ce texte pour décrire vos produits, partager des détails sur leur disponibilité ou leur style, ou encore pour afficher des FAQ et avis récents.</p>",
"hi": "<p>अपने ग्राहकों के साथ ब्लॉग पोस्ट, उत्पाद या प्रचार शेयर करें. उत्पादों का वर्णन करने के लिए, उपलब्धता और स्टाइल पर विवरण शेयर करने के लिए, या हाल की समीक्षाओं या पूछे जाने वाले प्रश्न को प्रदर्शित करने के लिए एक स्थान के रूप में इस टेक्स्ट का उपयोग करें.</p>",
"it": "<p>Condividi articoli del blog, prodotti o promozioni con i tuoi clienti. Utilizza questo spazio per descrivere i prodotti, condividendo dettagli sulla loro disponibilità e sul loro stile, oppure per mostrare recensioni recenti o domande frequenti.</p>",
"ja": "<p>ブログ記事、商品、またはプロモーションをお客様に伝えます。このテキストで商品について説明し、公開状況やスタイルの詳細を共有するか、最近のレビューやFAQを表示するスペースとして使用します。</p>",
"ko": "<p>블로그 게시물, 제품 또는 프로모션을 고객과 공유하십시오. 이 텍스트를 사용하여 제품을 설명하고 사용 가능성 및 스타일에 대한 세부 정보를 공유하거나 최근 리뷰 또는 FAQ를 표시할 수 있는 공간으로 사용하십시오.</p>",
"ms": "<p>Kongsi siaran blog, produk atau promosi dengan pelanggan anda. Gunakan teks ini untuk menerangkan produk, berkongsi butiran tentang ketersediaan dan gaya, atau sebagai ruang untuk memaparkan ulasan atau Soalan Lazim terkini.</p>",
"nb": "<p>Del blogginnlegg, produkter eller kampanjer med kundene dine. Bruk denne teksten til å beskrive produkter, dele detaljer om tilgjengelighet og stil, eller som et sted for å vise de siste omtalene eller vanlige spørsmål.</p>",
"nl": "<p>Deel blogposts, producten of promoties met je klanten. Gebruik deze tekst om producten te beschrijven, details over beschikbaarheid en stijl te delen of als een ruimte om recente beoordelingen of veelgestelde vragen weer te geven.</p>",
"pt-BR": "<p>Compartilhe postagens de blogs, produtos ou promoções com seus clientes. Use este texto para descrever produtos, compartilhar detalhes sobre disponibilidade e estilo ou como um espaço para exibir comentários recentes ou perguntas frequentes.</p>",
"pt-PT": "<p>Partilhe publicações no blogue, produtos ou promoções com os seus clientes. Utilize este texto para descrever produtos, partilhar detalhes sobre disponibilidade e estilo ou como local para mostrar perguntas frequentes ou análises recentes.</p>",
"sv": "<p>Dela blogginlägg, produkter eller kampanjer med dina kunder. Använd den här texten för att beskriva produkter, dela information om tillgänglighet och stil eller som ett utrymme för att visa senaste recensioner eller vanliga frågor.</p>",
"th": "<p>แชร์โพสต์บล็อก สินค้า หรือโปรโมชันกับลูกค้าของคุณ ใช้ข้อความนี้เพื่ออธิบายสินค้า แชร์รายละเอียดเกี่ยวกับความพร้อมจำหน่ายและสไตล์ หรือเป็นพื้นที่เพื่อจัดแสดงรีวิวล่าสุด หรือว่าคำถามที่พบบ่อย</p>",
"zh-CN": "<p>与您的客户分享博客文章、产品或促销信息。使用此文本描述产品、分享有关供货情况和风格的详细信息,或将此文本作为显示最近评论或常见问题解答的区域。</p>",
"zh-TW": "<p>與顧客分享部落格貼文、產品或宣傳活動。請使用這段文字描述商品、分享庫存和樣式的詳細資訊,或顯示近期評論及常見問題。</p>"
}
},
{
"id": "text-box",
"type": "text",
"label": "Heading",
"default": "Title"
},
{
"id": "link",
"type": "url",
"label": "Button link"
},
{
"id": "linktext",
"type": "text",
"label": "Button text",
"default": "Click here"
},

{
"type": "image_picker",
"id": "image",
"label": {
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"hi": "इमेज",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"ms": "Imej",
"nb": "Bilde",
"nl": "Afbeelding",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"zh-CN": "图片",
"zh-TW": "圖片"
}
},
{
"type": "radio",
"id": "image_align",
"label": {
"da": "Justering af billede",
"de": "Fotoausrichtung",
"en": "Image alignment",
"es": "Alineación de imagen",
"fi": "Kuvan tasaus",
"fr": "Alignement de l'image",
"hi": "इमेज पंक्तिबद्ध करना",
"it": "Allineamento immagine",
"ja": "画像アラインメント",
"ko": "이미지 정렬",
"ms": "Penjajaran imej",
"nb": "Bildejustering",
"nl": "Afbeelding uitlijnen",
"pt-BR": "Alinhamento da imagem",
"pt-PT": "Alinhamento da imagem",
"sv": "Bildjustering",
"th": "การจัดวางรูปภาพ",
"zh-CN": "图片对齐方式",
"zh-TW": "圖片對齊"
},
"options": [
{
"value": "top center",
"label": {
"da": "Øverst i midten",
"de": "Oben Mitte",
"en": "Top center",
"es": "Superior centrada",
"fi": "Keskellä ylhäällä",
"fr": "En haut au centre",
"hi": "शीर्ष केंद्र",
"it": "In alto al centro",
"ja": "中央上",
"ko": "맨 위 중간",
"ms": "Tengah-tengah atas",
"nb": "Toppsentrert",
"nl": "Midden boven",
"pt-BR": "Superior centro",
"pt-PT": "Superior centro",
"sv": "Längst upp i mitten",
"th": "กลางบน",
"zh-CN": "顶部居中",
"zh-TW": "中央上方"
}
},
{
"value": "center center",
"label": {
"da": "Centreret",
"de": "Mitte",
"en": "Center",
"es": "Centrar",
"fi": "Keskitetty",
"fr": "Au centre",
"hi": "केंद्र",
"it": "Al centro",
"ja": "中央",
"ko": "센터",
"ms": "Tengah",
"nb": "Sentrer",
"nl": "Midden",
"pt-BR": "Centro",
"pt-PT": "Centro",
"sv": "Centrera",
"th": "ตรงกลาง",
"zh-CN": "居中",
"zh-TW": "置中"
}
},
{
"value": "bottom center",
"label": {
"da": "Nederst i midten",
"de": "Unten mittig",
"en": "Bottom center",
"es": "Inferior centrada",
"fi": "Keskellä alhaalla",
"fr": "En bas au centre",
"hi": "निचला केंद्र",
"it": "In basso al centro",
"ja": "中央下",
"ko": "맨아래 중간",
"ms": "Tengah bawah",
"nb": "Bunnsentrert",
"nl": "Midden onder",
"pt-BR": "Inferior centro",
"pt-PT": "Inferior centro",
"sv": "Längst ner i mitten",
"th": "กลางล่าง",
"zh-CN": "底部居中",
"zh-TW": "中央下方"
}
}
],
"default": "top center"
}
]
}
],
"presets": [
{
"name": {
"da": "Tekstkolonner med billeder",
"de": "Textspalten mit Fotos",
"en": "Text columns with images",
"es": "Col. de texto con imagen",
"fi": "Tekstisarakkeet kuvilla",
"fr": "Texte avec images",
"hi": "इमेज के साथ टेक्स्ट कॉलम",
"it": "Colonne di testo con foto",
"ja": "画像付きテキスト列",
"ko": "이미지 포함 텍스트 열",
"ms": "Lajur teks dengan imej",
"nb": "Tekstkolonner med bilder",
"nl": "Tekstkolommen met afbeeldingen",
"pt-BR": "Texto com imagens",
"pt-PT": "Colunas texto c/ imagens",
"sv": "Textkolumner med bilder",
"th": "คอลัมน์ข้อความพร้อมรูปภาพ",
"zh-CN": "带有图片的文本列",
"zh-TW": "附圖片的文字欄"
},
"category": {
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "Texto",
"fi": "Teksti",
"fr": "Texte",
"hi": "टेक्स्ट",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"ms": "Teks",
"nb": "Tekst",
"nl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"zh-CN": "文本",
"zh-TW": "文字"
},
"blocks": [
{
"type": "text_block"
},
{
"type": "text_block"
},
{
"type": "text_block"
}
]

}
]
}


{% endschema %}

0 Likes
Shopify Expert
2458 414 518

Please check if this condition satisfied or not? because you have already coded for link

{% if section.settings.linktext != blank and section.settings.link != blank %}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
8 0 0

@Jasoliya I took that from another CTA.  When taking that of I get a button. But it doesn't connect with the link I put in the customizer. Also no link text at all still.
 

0 Likes
Shopify Expert
2458 414 518

Send me your store url

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
8 0 0

Sent you a PM :) 

0 Likes

Success.

Shopify Expert
2458 414 518

Hi @ElinMaria 

Change bellow code:

<a href="{{ section.settings.link }}" class="btn">{{ section.setting.linktext }}</a>

To

<a href="{{ block.settings.link }}" class="btn">{{ block.setting.linktext }}</a>
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
8 0 0

Thank you, Managed to get the link to work through the input.
for the label, it still not showing. I fixed it by changing it to a generic copy for the button.


0 Likes