Debut Theme: Add Background Image Capability to Testimonial Area

Highlighted
Shopify Partner
2 0 0

Someone else asked this question with no answer. I thought I'd post it again. I would like the ability to add a background image (not via CSS), but as a field/function similar to the Image with Overlay Text but on the Testimonial. Is this possible? If it requires custom code, send a PM with a quote.

0 Likes
Highlighted
Shopify Partner
190 38 39

@cre8tive_admin 

Please  create a section for backgroud image.And also replace the below code from quotes.liquid

<div class="page-width" data-section-id="{{ section.id }}" data-section-type="quotes" >
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h2>{{ section.settings.title | escape }}</h2>
</div>
{% endif %}

{% if section.blocks.size > 0 %}
<div class="quotes-wrapper">
<div class="quotes-slider" id="Quotes-{{ section.id }}" data-count="{{ section.blocks.size }}">
{% for block in section.blocks %}
<div class="quotes-slide--{{ block.id }}" {{ block.shopify_attributes }}>
<blockquote class="quotes-slider__text text-center">
<span class="quote-icon">{% include 'icon-quote' %}</span>
{% if block.settings.quote != blank %}
<div class="rte-setting rte">{{ block.settings.quote }}</div>
{% endif %}
{% if block.settings.author != blank %}
<cite>{{ block.settings.author | escape }}</cite>
{% endif %}
</blockquote>
</div>
{% endfor %}
</div>
</div>
{% endif %}

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

 

{% schema %}
{
"name": {
"da": "Udtalelser",
"de": "Testimonials",
"en": "Testimonials",
"es": "Testimonios",
"fi": "Suositukset",
"fr": "Témoignages",
"hi": "प्रमाणपत्र",
"it": "Testimonial",
"ja": "お客様の声",
"ko": "추천",
"nb": "Tilbakemeldinger fra kunder",
"nl": "Getuigenissen",
"pt-BR": "Depoimentos",
"pt-PT": "Depoimentos",
"sv": "Kundberättelser",
"th": "เสียงชื่นชมจากลูกค้า",
"zh-CN": "感言",
"zh-TW": "推薦文"
},
"class": "index-section",
"max_blocks": 9,
"settings": [

{
"type": "image_picker",
"id": "background",
"label": "Background image"
},
{
"type": "text",
"id": "title",
"label": {
"da": "Overskrift",
"de": "Titel",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "En-tête",
"hi": "शीर्षक",
"it": "Heading",
"ja": "見出し",
"ko": "제목",
"nb": "Overskrift",
"nl": "Kop",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"da": "Udtalelser",
"de": "Testimonials",
"en": "Testimonials",
"es": "Testimonios",
"fi": "Suositukset",
"fr": "Témoignages",
"hi": "प्रमाणपत्र",
"it": "Testimonial",
"ja": "お客様の声",
"ko": "추천",
"nb": "Tilbakemeldinger fra kunder",
"nl": "Getuigenissen",
"pt-BR": "Depoimentos",
"pt-PT": "Depoimentos",
"sv": "Kundberättelser",
"th": "เสียงชื่นชมจากลูกค้า",
"zh-CN": "感言",
"zh-TW": "推薦文"
}
}
],
"blocks": [
{
"type": "quote",
"name": {
"da": "Udtalelse",
"de": "Testimonial",
"en": "Testimonial",
"es": "Testimonio",
"fi": "Suositukset",
"fr": "Témoignages",
"hi": "प्रमाणपत्र",
"it": "Testimonial",
"ja": "お客様の声",
"ko": "추천",
"nb": "Anbefaling",
"nl": "Testimonial",
"pt-BR": "Depoimento",
"pt-PT": "Testemunho",
"sv": "Kundberättelser",
"th": "เสียงชื่นชมจากลูกค้า",
"zh-CN": "感言",
"zh-TW": "推薦文"
},
"settings": [
{
"type": "richtext",
"id": "quote",
"label": {
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "Texto",
"fi": "Teksti",
"fr": "Texte",
"hi": "टेक्स्ट",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"nb": "Tekst",
"nl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": {
"da": "<p>Tilføj kundeanmeldelser og udtalelser for at fremhæve din butiks tilfredse kunder.</p>",
"de": "<p>Kunden-Reviews und Testimonials, die Kundenzufriedenheit beweisen.</p>",
"en": "<p>Add customer reviews and testimonials to showcase your store’s happy customers.</p>",
"es": "<p>Agrega las reseñas y los testimonios de los clientes para mostrar a los clientes satisfechos de tu tienda.</p>",
"fi": "<p>Lisää asiakasarviointeja ja suositteluja esimerkeiksi myymäläsi tyytyväisistä asiakkaista.</p>",
"fr": "<p>Ajoutez des avis et témoignages pour mettre en avant vos clients satisfaits.</p>",
"hi": "<p>अपने स्टोर के खुश ग्राहकों को दिखाने के लिए ग्राहक समीक्षा और प्रशंसापत्र जोड़ें.</p>",
"it": "<p>Aggiungi recensioni e testimonianze sul tuo negozio per dimostrare che i clienti sono soddisfatti.</p>",
"ja": "<p>あなたのストアの幸せなお客様を紹介するために、カスタマーレビューとお客様の声を追加してください。</p>",
"ko": "<p>고객 리뷰 및 추천을 추가하여 스토어에 만족한 고객을 보여주십시오.</p>",
"nb": "<p>Legg til kundeomtaler og anbefalinger for å vise frem butikkens glade kunder.</p>",
"nl": "<p>Voeg beoordelingen van klanten en testimonials toe om te laten zien dat je klanten tevreden zijn.</p>",
"pt-BR": "<p>Adicione comentários e depoimentos para dar destaque aos clientes satisfeitos com a sua loja.</p>",
"pt-PT": "<p>Adicione análises e testemunhos para mostrar os clientes felizes da sua loja.</p>",
"sv": "<p>Lägg till kundrecensioner och berättelser för att visa upp din butiks nöjda kunder.</p>",
"th": "<p>เพิ่มรีวิวและเสียงชื่นชมจากลูกค้าเพื่อนำเสนอลูกค้าที่ได้รับความพึงพอใจจากร้านค้า</p>",
"zh-CN": "<p>添加客户评论和感言,以展示对您的商店满意的客户。</p>",
"zh-TW": "<p>新增顧客評論和推薦文,展示對您商店滿意之顧客。</p>"
}
},
{
"type": "text",
"id": "author",
"label": {
"da": "Forfatter",
"de": "Autor",
"en": "Author",
"es": "Autor",
"fi": "Kirjoittaja",
"fr": "Auteur",
"hi": "लेखक",
"it": "Autore",
"ja": "執筆者",
"ko": "작성자",
"nb": "Forfatter",
"nl": "Auteur",
"pt-BR": "Autoria",
"pt-PT": "Autoria",
"sv": "Upphovsman",
"th": "ผู้เขียน",
"zh-CN": "作者",
"zh-TW": "作者"
},
"default": {
"da": "Forfatterens navn",
"de": "Name des Autors",
"en": "Author's name",
"es": "Nombre del autor",
"fi": "Kirjoittajan nimi",
"fr": "Nom de l'auteur",
"hi": "लेखक का नाम",
"it": "Nome dell'autore",
"ja": "筆者の名前",
"ko": "작성자 이름",
"nb": "Forfatterens navn",
"nl": "Naam auteur",
"pt-BR": "Nome do autor",
"pt-PT": "Nome do autor",
"sv": "Författarens namn",
"th": "ชื่อผู้เขียน",
"zh-CN": "作者姓名",
"zh-TW": "作者名稱"
}
}
]
}
],
"presets": [
{
"name": {
"da": "Udtalelser",
"de": "Testimonials",
"en": "Testimonials",
"es": "Testimonios",
"fi": "Suositukset",
"fr": "Témoignages",
"hi": "प्रमाणपत्र",
"it": "Testimonial",
"ja": "お客様の声",
"ko": "추천",
"nb": "Tilbakemeldinger fra kunder",
"nl": "Getuigenissen",
"pt-BR": "Depoimentos",
"pt-PT": "Depoimentos",
"sv": "Kundberättelser",
"th": "เสียงชื่นชมจากลูกค้า",
"zh-CN": "感言",
"zh-TW": "推薦文"
},
"category": {
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "Texto",
"fi": "Teksti",
"fr": "Texte",
"hi": "टेक्स्ट",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"nb": "Tekst",
"nl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"zh-CN": "文本",
"zh-TW": "文字"
},
"blocks": [
{
"type": "quote"
},
{
"type": "quote"
},
{
"type": "quote"
}
]
}
]
}
{% endschema %}
<style>
div#shopify-section-quotes{
background-image: url('{{ section.settings.background | img_url: '1024x768'}}');
background-repeat: no-repeat;

}
</style>

After that please add image from testimonial sections.

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: technicalvishvas@gmail.com
0 Likes