How can I insert a Yopto review widget into the homepage html?

Technical Q&A
1

Hi,

I need to add a block of code (Yopto review widget) to the Shopify homepage on my site. I added the same block to the product page by pasting it into the product.liquid file, but index.liquid only displays {{ content_for_index }}.

I’ve tried making a dynamic section and adding that but the code doesn’t show up.

this is the template for the code block:

How can I add this to the homepage?

Thanks in advance!

<div class="yotpo yotpo-main-widget"

data-product-id=“SKU/Product_ID” data-price=“Product Price”

data-currency=“Price Currency”

data-name=“Product Title”

data-url=“The url of your product page”

data-image-url=“The product image url”>

2

Wrap it inside:

{% if template.name == 'index' %}
   ...
{% endif %}

Any put it somewhere in theme.liquid

3

Hi @Kristin_B ,

You have created a section, added code but it is not showing? Can you send me the link, I will help you check it.

Because if you want to display on home page, create a section is the best choice, it will help you drag and drop quickly.

Hope it helps!

4

Hi @LitExtension

Thanks very much,

I’m testing on a copy of our theme so not sure if i can link it to you..

This is my code, I’m new to liquid so I don’t know if i should be putting this in a block or wrapping the widget div element in some other code first. I left settings blank because it’s a Yopto review widget block so there are no settings. I did read about setting the type as app and rendering as an app, should I be following these instructions here on app blocks? https://shopify.dev/themes/architecture/sections/section-schema#presets

Thanks for your help

{{ section.settings.yopto-main-widget-block }}

{% schema %}
{
“name”: “Yopto”,
“settings”: ,

“presets”: [
{
“name”: “Yopto”
}
]
}
{% endschema %}

5

Hi @iDoThemes

thanks for your response, I would ideally like to add t in as section so it can placed between other sections.

Do you have any advice on doing it this way?

Thanks in advance

6

Hi @Kristin_B ,

I checked and the code you added to create the section is correct.

But the HTML display code is not really correct.

Screenshot.png
Screenshot.png1262×716 43 KB

I don’t think it will work well on home page. Therefore you should contact the App again to check this code, they will help you generate the correct code.

Hope it helps!

7

Oh I see, this is the same code I’ve pasted directly into the product page template. It’s displaying in there fine. Can you tell me what’s not right about it? I’ll check to see if i’ve caused an error somewhere.

Thanks for checking it out!

8

Just in case anyone else is searching for a solution to this, the

data-product-id=“{{ product.id }}” only works on the product page, I have temporarily fixed this by replacing brackets with the actual product id. This will obviously only work for that specific product, as long as the product is listed but if you know how to select the element from another page, (I haven’t figured that out yet).

@LitExtension here’s the url for the page now https://zagdrinks.com/ is now displaying but I need to use dot selection instead of hard coding the product id. how do I select the page? is it
data-product-id=“{{ shop.product.id }}” or maybe page.product.id …

9

Hi @Kristin_B ,

if data-product-id, means it will show for a single product? If so, you can add an ID to it directly or create an Product selection option in Customize.

If you create an option to choose a product, please add this code:

{% schema %}
{
"name": "Yopto",
"settings": [
{
      "type": "product",
      "id": "product",
      "label": "Select product"
    }
],
"presets": [
{
"name": "Yopto"
}
]
}
{% endschema %}

Hope it helps!