Custom Liquid Snippet Not Showing in Theme Customization

Technical Q&A
1

Hi everyone,

I’m facing an issue with my Shopify store after adding a custom Liquid snippet designed to display a single review.

I have tried adding this snippet in my theme customization, but I can’t seem to find it or get it to display correctly. Can anyone help me identify what might be going wrong or guide me on how to properly include this snippet in my theme customization?

Any assistance or pointers would be greatly appreciated.

Thank you!

Here’s the code:

{% comment %}
  Renders a box with a single, hand-picked review.

  Accepts:
    - `url' - URL of the image of the reviewer
    - `name' - Name of the reviewer
    - `review' - The review itself

    Usage:
        {% include 'components/review.html' with url='http://example.com/image.jpg' name='John Doe' review='This is a great product!' %}
{% endcomment %}

<div class="croev-single-review_container"{% if block.settings.border_color != blank %} style="border-color: {{ block.settings.border_color }}"{% endif %}>
    <div class="croev-single-review_image-container">
        <img src="{{ block.settings.image | image_url: width: "60px" }}" alt="{{ block.settings.name }}" class="croev-single-review_image" width="" height="">
    </div>

    <div class="croev-single-review_text-container">
        <div class="croev-single-review_text{% if block.settings.text_color != blank %} custom-color{% endif %}">{{ block.settings.review }}</div>

        <div class="croev-single-review_signature">        
            <div class="croev-single-review_name">
              <div class="croev-stars">
                {% for i in (1..5) %}
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="{{ block.settings.star_color }}" class="size-6">
                    <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" />
                  </svg>
                {% endfor %}
              </div>
              <p class="croev-single-review_name"{% if block.settings.text_color != blank %} style="color: {{ block.settings.text_color }}"{% endif %}>{{ block.settings.name }}</p>
            </div>

            <div class="croev-single-review_verified">
                {% if block.settings.verified_icon != blank %}
                  <img src="{{ block.settings.verified_icon | image_url: width: "15px" }}" width="15px" height="15px">
                {% else %}
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="{{ block.settings.verified_color }}" class="w-6 h-6">
                    <path{% if block.settings.verified_color != blank %} style="fill: {{ block.settings.verified_color }}"{% endif %} fill-rule="evenodd" d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
                  </svg> 
                {% endif %}
                                 
                <p class="croev-single-review_verified-text"{% if block.settings.verified_color != blank %} style="color: {{ block.settings.verified_color }}"{% endif %}>VERIFIED</p>
            </div>
        </div>
    </div>
</div>

<style>
.custom-color p{
  color: {{ block.settings.text_color }} !important;
}
  
.croev-single-review_container {
  display: flex;
  align-items: start;
  justify-content: space-between;
  padding: 10px;
  border-radius: 10px;
  gap: 10px;
  margin-top: 20px;
  background-color: #fff;
  border: 1px solid #0A7F90;
  color: #000;
  max-width: 600px;
}

.croev-single-review_image-container img {
  width: 180px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
}

.croev-single-review_text p{
    font-style: italic;
    font-size: 14px;
    margin: 0;
    color: #000;
}

.croev-single-review_signature {
    display: flex;
    margin-top: 10px;
    gap: 15px;
}

.croev-single-review_name {
    font-weight: bold;
    font-size: 16px;
    margin: 0;
    color: #000;
    display: flex;
    gap: 5px;
}

.croev-single-review_verified {
    display: flex;
    align-items: center;
    gap: 2.5px;
}

.croev-single-review_verified svg {
    fill: #0A7F90;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.croev-single-review_verified p {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    font-family: "Poppins", sans-serif !important;
    color: #0A7F90;
}

.croev-stars{
    display: flex;
    min-width: 70px;
}

@media only screen and (min-width: 840px) {
  .croev-single-review_image-container img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
  }

  .croev-single-review_text p{
    font-style: italic;
    font-size: 16px;
    margin: 0;
    color: #000;
  }
}
</style>
   
2

First, it’s better to place the styling before the HTML. Secondly, how did you try to add this code? Did you create a custom Liquid section in the customization and then paste this code?

3

No, I clicked on edit code, and then I added a new snipped and pasted the code

4

You need to create a new section and not a snippet in order to be able to add it through your customization. If you don’t want to create a new section you can use custom liquid section and paste the code you created.

5

The snippet you created needs to be rendered in a section, and then it will be visible in your theme’s customization.

6

I tried this, but not working

7

Of course it doesn’t because in the snippet you created you use block object which is not accessible because it’s not a section. A snippet is just a piece code that you can render. What you want is a section not a snippet. There is plenty of material online to learn how to create a section.

8

Thank you