Move reviews to another location

JonX
Tourist
9 0 4

Hello,

I did just instal yotpo for review...

unfortunately with my theme (broadcast) the position of the rating and review is automatic... But I am not happy with the location of the reviews.

Ideally I would love to put it in a collapsable tab or at least in full width later in the page.

But I cannot locate the code anywhere to move it. Here is the webpage : https://www.ambigoose.com/products/powerhouse-moisturizer 

Would love your help, oh Shopify wizards.

Thank you so much

JonScreen Shot 2021-07-19 at 10.46.40.jpg

 

KetanKumar
Shopify Partner
20468 2116 7716

@JonX 

sorry for that issue please let me know location for review section and share product page code so i will update 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
JonX
Tourist
9 0 4

Hello,

Thank you so much for your answer....

At the moment the reviews are placed as displayed on the picture, but I would like to integrate it inside a product tab (that is collapsable as shown on the picture)

Here is my product PAGE Code :

<!-- /templates/product.liquid -->

{% section 'index-hero-3' %}

{% section 'product' %}

{% section 'index-icons-row4' %}

{% section 'index-hero-10' %}

{% section 'Tooltips1' %}

{% section 'index-icons-row5' %}

{% section 'index-slideshow2' %}

{% section 'index-hero-7' %}

{% section 'index-icons-row6' %}

{% section 'index-hero-8' %}

{% section 'related' %}

{% assign current_variant = product.selected_or_first_available_variant %}
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": {{ product.title | json }},
  "url": {{ shop.url | append: product.url | json }},
  {%- if product.featured_media -%}
    {%- assign media_size = product.featured_media.preview_image.width | append: 'x' -%}
    "image": [
      {{ product.featured_media | img_url: media_size | prepend: "https:" | json }}
    ],
  {%- endif -%}
  "description": {{ product.description | strip_html | json }},
  {%- if current_variant.sku != blank -%}
    "sku": {{ current_variant.sku | json }},
  {%- endif -%}
  "brand": {
    "@type": "Thing",
    "name": {{ product.vendor | json }}
  },
  "offers": [
    {%- for variant in product.variants -%}
      {
        "@type" : "Offer",
        {%- if variant.sku != blank -%}
          "sku": {{ variant.sku | json }},
        {%- endif -%}
        "availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
        "price" : {{ variant.price | divided_by: 100.00 | json }},
        "priceCurrency" : {{ cart.currency.iso_code | json }},
        "url" : {{ shop.url | append: variant.url | json }}
      }{% unless forloop.last %},{% endunless %}
    {%- endfor -%}
  ]
}
</script>
{% section 'index-page-3' %}
{% section 'index-image-with-text4.liquid' %}
{% section 'index-newsletter' %}

And here is my product SECTION Code :

<!-- /sections/product.liquid -->

<div id="template-product"
     data-section-id="{{ section.id }}"
     data-section-type="product"
     data-product-handle="{{ product.handle }}"
     data-enable-history-state="true"
     data-sticky-enabled="{{ section.settings.product_sticky_enable }}"
     data-tall-layout="{% if section.settings.image_layout == "stacked" %}true{% else %}false{% endif %}"
     data-reviews="{{ settings.enable_product_reviews }}"
     data-cart-bar="{{ section.settings.show_cart_bar }}"
     data-cart-bar-position="{{ section.settings.cart_bar_position }}"
     data-video-looping="{{ section.settings.enable_video_looping }}">
  {%- render 'product' product: product, section: section, unique: section.id -%}

  {%- if section.settings.show_cart_bar -%}
    <!-- /partials/cart-bar.liquid -->

{%- assign current_variant = product.selected_or_first_available_variant -%}

<div id="cart-bar" class="cart-bar" data-position="{{ section.settings.cart_bar_position }}">
  <div class="form__wrapper" data-form-wrapper>
    {%- form 'product', product, class: 'product-form cart-bar__form', data-swatches: 'false' -%}
      {% unless product.has_only_default_variant %}
        <div class="product__selectors">
          {% for option in product.options_with_values %}
            <div class="selector-wrapper js" data-option="option{{ option.position }}">
              <select
                data-id="SingleOptionSelector-{{ forloop.index0 }}-{{product.id}}"
                data-single-option-selector
                data-index="option{{ option.position }}">
                {% for value in option.values %}
                  <option
                    value="{{ value | escape }}"
                    {% if option.selected_value == value %}selected="selected"{% endif %}>
                      {{ value }}
                  </option>
                {% endfor %}
              </select>
            </div>
          {% endfor %}
        </div>
      {% endunless %}

      <select name="id" class="no-js" data-product-select>
        {% for variant in product.variants %}
          <option
            {% if variant == current_variant %}selected="selected"{% endif %}
            {% unless variant.available %}disabled="disabled"{% endunless %}
            value="{{ variant.id }}">
              {{ variant.title }}
          </option>
        {% endfor %}
      </select>

      <input type="hidden" name="quantity" value="1" aria-label="quantity">

      <div class="product__submit" data-product-id="{{ product.id }}">
        <div class="product__submit__buttons">
          <button
            type="submit"
            name="add"
            class="btn product__submit__add"
            data-add-to-cart
            {% unless current_variant.available %}disabled="disabled"{% endunless %}>
            <span data-add-to-cart-text>
              {%- if current_variant.available and product.tags contains '_preorder' -%}
                {{ 'products.product.pre_order' | t }}
              {%- elsif current_variant.available -%}
                {{ 'products.product.add_to_cart' | t }}
              {%- else -%}
                {{ 'products.product.sold_out' | t }}
              {%- endif -%}
            </span>
          </button>
        </div>
      </div>
    {%- endform -%}

    <div class="cart-bar__info">
      {%- assign image = product.featured_media.preview_image -%}
      {%- assign img_object = block.settings.button_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
      {%- assign image_widths = '90,180,360,540' -%}
      <div class="cart-bar__image">
        <img
           class="lazyload fade-in"
           src="{{ image | img_url: '180x' }}"
           data-src="{{ img_button }}"
           data-widths= "[{{ image_widths }}]"
           data-aspectratio="{{ image.aspect_ratio }}"
           data-sizes="auto"
           alt="{{ image.alt | escape }}"
           itemprop="image"
           >
         <noscript>
          <img src="{{ image | img_url: 'small' }}" alt="{{ image.alt | escape }}">
        </noscript>
      </div>

      <h4 class="cart-bar__product__title">{{ product.title }}</h1>      
      <div class="h5--body cart-bar__product__price product__price" data-price-wrapper>
        <span data-product-price {% if current_variant.compare_at_price > current_variant.price %} class="product__price--sale"{% endif %}>
          {{ current_variant.price | money }}
        </span>

        {% if product.compare_at_price_max > product.price %}
          <span class="visually-hidden" data-compare-text>{{ 'products.product.regular_price' | t }}</span>
          <s class="product__price--strike" data-compare-price>
            {% if current_variant.compare_at_price > current_variant.price %}
              {{ current_variant.compare_at_price | money }}
            {% endif %}
          </s>
        {% endif %}
      </div>
    </div>
  </div>
</div>

  {%- endif -%}
</div>

{%- if section.settings.show_recently_viewed -%}
  {%- render 'products-recently-viewed', product: product, grid_strings: grid_strings, heading_title: section.settings.product_recently_heading -%}
{%- endif -%}

{% schema %}
  {
    "name": "Product pages",
    "settings": [
      {
        "type": "select",
        "id": "image_layout",
        "label": "Image display",
        "default": "stacked",
        "options": [
          { "value": "thumbnails", "label": "Thumbnails" },
          { "value": "stacked", "label": "Stacked" }
        ]
      },
      {
        "type": "checkbox",
        "id": "product_sticky_enable",
        "label": "Enable sticky description",
        "info": "Works best with shorter descriptions.",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_breadcrumbs",
        "label": "Show breadcrumbs",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_share_buttons",
        "label": "Show social sharing buttons",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "product_show_vendor",
        "label": "Show vendor",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_payment_button",
        "label": "Show smart checkout button",
        "info": "Customers will see their preferred accelerated checkout method.",
        "default": true
      },
      {
        "type": "header",
        "content": "Cart bar"
      },
      {
        "type": "checkbox",
        "id": "show_cart_bar",
        "label": "Show Cart bar",
        "default": true,
        "info": "Visible on larger than 1280px screens only"
      },
      {
        "type": "select",
        "id": "cart_bar_position",
        "label": "Position",
        "default": "bottom",
        "options": [
          { "value": "top", "label": "Top" },
          { "value": "bottom", "label": "Bottom" }
        ]
      },
      {
        "type": "header",
        "content": "Product info tabs"
      },
      {
        "type": "checkbox",
        "id": "tabs_enable",
        "label": "Enable tabs",
        "default": false
      },
      {
        "type": "header",
        "content": "Media",
        "info": "Learn more about [media types](https://help.shopify.com/manual/products/product-media)"
      },
      {
        "type": "checkbox",
        "id": "enable_video_looping",
        "label": "Enable video looping",
        "default": false
      }
    ],
    "blocks": [
      {
        "type": "tab_description",
        "name": "Description H6",
        "limit": 1,
        "settings": [
          {
            "type": "paragraph",
            "content": "Heading 6 titles will be converted to tab headings, tab content will be everything between the Heading 6 titles. [Product Tabs Documentation](https://help.invisiblethemes.com/article/11-tabs)."
          }
        ]
      },
      {
        "type": "tab_richtext",
        "name": "Text",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Label",
            "default": "Text tab",
            "info": "Example: Warranty policy"
          },
          {
            "type": "richtext",
            "id": "raw_content",
            "label": "Tab content",
            "default": "<p>This tab content type will accept <strong>rich text</strong> to help with adding styles and links to additional pages or content. Use this to add supplementary information to help your buyers.</p>"
          }
        ]
      },
      {
        "type": "tab_html",
        "name": "HTML",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Label",
            "default": "HTML tab",
            "info": "Example: Sizing video"
          },
          {
            "type": "html",
            "id": "raw_content",
            "label": "Tab content",
            "default": "<p>This tab content type will accept HTML code for advanced styling. Use this to add video embeds, or other advanced HTML content.</p>"
          }
        ]
      },
      {
        "type": "tab_page",
        "name": "Page",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Label",
            "default": "Page tab",
            "info": "Example: Size chart"
          },
          {
            "type": "page",
            "id": "raw_content",
            "label": "Tab content"
          }
        ]
      }
    ]
  }


  {% endschema %}
KetanKumar
Shopify Partner
20468 2116 7716

@JonX 

please check this section

{% section 'product' %}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
JonX
Tourist
9 0 4

@KetanKumar 

I cannot locate it here :

<!-- /sections/product.liquid -->

<div id="template-product"
     data-section-id="{{ section.id }}"
     data-section-type="product"
     data-product-handle="{{ product.handle }}"
     data-enable-history-state="true"
     data-sticky-enabled="{{ section.settings.product_sticky_enable }}"
     data-tall-layout="{% if section.settings.image_layout == "stacked" %}true{% else %}false{% endif %}"
     data-reviews="{{ settings.enable_product_reviews }}"
     data-cart-bar="{{ section.settings.show_cart_bar }}"
     data-cart-bar-position="{{ section.settings.cart_bar_position }}"
     data-video-looping="{{ section.settings.enable_video_looping }}">
  {%- render 'product' product: product, section: section, unique: section.id -%}

  {%- if section.settings.show_cart_bar -%}
    <!-- /partials/cart-bar.liquid -->

{%- assign current_variant = product.selected_or_first_available_variant -%}

<div id="cart-bar" class="cart-bar" data-position="{{ section.settings.cart_bar_position }}">
  <div class="form__wrapper" data-form-wrapper>
    {%- form 'product', product, class: 'product-form cart-bar__form', data-swatches: 'false' -%}
      {% unless product.has_only_default_variant %}
        <div class="product__selectors">
          {% for option in product.options_with_values %}
            <div class="selector-wrapper js" data-option="option{{ option.position }}">
              <select
                data-id="SingleOptionSelector-{{ forloop.index0 }}-{{product.id}}"
                data-single-option-selector
                data-index="option{{ option.position }}">
                {% for value in option.values %}
                  <option
                    value="{{ value | escape }}"
                    {% if option.selected_value == value %}selected="selected"{% endif %}>
                      {{ value }}
                  </option>
                {% endfor %}
              </select>
            </div>
          {% endfor %}
        </div>
      {% endunless %}

      <select name="id" class="no-js" data-product-select>
        {% for variant in product.variants %}
          <option
            {% if variant == current_variant %}selected="selected"{% endif %}
            {% unless variant.available %}disabled="disabled"{% endunless %}
            value="{{ variant.id }}">
              {{ variant.title }}
          </option>
        {% endfor %}
      </select>

      <input type="hidden" name="quantity" value="1" aria-label="quantity">

      <div class="product__submit" data-product-id="{{ product.id }}">
        <div class="product__submit__buttons">
          <button
            type="submit"
            name="add"
            class="btn product__submit__add"
            data-add-to-cart
            {% unless current_variant.available %}disabled="disabled"{% endunless %}>
            <span data-add-to-cart-text>
              {%- if current_variant.available and product.tags contains '_preorder' -%}
                {{ 'products.product.pre_order' | t }}
              {%- elsif current_variant.available -%}
                {{ 'products.product.add_to_cart' | t }}
              {%- else -%}
                {{ 'products.product.sold_out' | t }}
              {%- endif -%}
            </span>
          </button>
        </div>
      </div>
    {%- endform -%}

    <div class="cart-bar__info">
      {%- assign image = product.featured_media.preview_image -%}
      {%- assign img_object = block.settings.button_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
      {%- assign image_widths = '90,180,360,540' -%}
      <div class="cart-bar__image">
        <img
           class="lazyload fade-in"
           src="{{ image | img_url: '180x' }}"
           data-src="{{ img_button }}"
           data-widths= "[{{ image_widths }}]"
           data-aspectratio="{{ image.aspect_ratio }}"
           data-sizes="auto"
           alt="{{ image.alt | escape }}"
           itemprop="image"
           >
         <noscript>
          <img src="{{ image | img_url: 'small' }}" alt="{{ image.alt | escape }}">
        </noscript>
      </div>

      <h4 class="cart-bar__product__title">{{ product.title }}</h1>      
      <div class="h5--body cart-bar__product__price product__price" data-price-wrapper>
        <span data-product-price {% if current_variant.compare_at_price > current_variant.price %} class="product__price--sale"{% endif %}>
          {{ current_variant.price | money }}
        </span>

        {% if product.compare_at_price_max > product.price %}
          <span class="visually-hidden" data-compare-text>{{ 'products.product.regular_price' | t }}</span>
          <s class="product__price--strike" data-compare-price>
            {% if current_variant.compare_at_price > current_variant.price %}
              {{ current_variant.compare_at_price | money }}
            {% endif %}
          </s>
        {% endif %}
      </div>
    </div>
  </div>
</div>

  {%- endif -%}
</div>

{%- if section.settings.show_recently_viewed -%}
  {%- render 'products-recently-viewed', product: product, grid_strings: grid_strings, heading_title: section.settings.product_recently_heading -%}
{%- endif -%}

{% schema %}
  {
    "name": "Product pages",
    "settings": [
      {
        "type": "select",
        "id": "image_layout",
        "label": "Image display",
        "default": "stacked",
        "options": [
          { "value": "thumbnails", "label": "Thumbnails" },
          { "value": "stacked", "label": "Stacked" }
        ]
      },
      {
        "type": "checkbox",
        "id": "product_sticky_enable",
        "label": "Enable sticky description",
        "info": "Works best with shorter descriptions.",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_breadcrumbs",
        "label": "Show breadcrumbs",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_share_buttons",
        "label": "Show social sharing buttons",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "product_show_vendor",
        "label": "Show vendor",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_payment_button",
        "label": "Show smart checkout button",
        "info": "Customers will see their preferred accelerated checkout method.",
        "default": true
      },
      {
        "type": "header",
        "content": "Cart bar"
      },
      {
        "type": "checkbox",
        "id": "show_cart_bar",
        "label": "Show Cart bar",
        "default": true,
        "info": "Visible on larger than 1280px screens only"
      },
      {
        "type": "select",
        "id": "cart_bar_position",
        "label": "Position",
        "default": "bottom",
        "options": [
          { "value": "top", "label": "Top" },
          { "value": "bottom", "label": "Bottom" }
        ]
      },
      {
        "type": "header",
        "content": "Product info tabs"
      },
      {
        "type": "checkbox",
        "id": "tabs_enable",
        "label": "Enable tabs",
        "default": false
      },
      {
        "type": "header",
        "content": "Media",
        "info": "Learn more about [media types](https://help.shopify.com/manual/products/product-media)"
      },
      {
        "type": "checkbox",
        "id": "enable_video_looping",
        "label": "Enable video looping",
        "default": false
      }
    ],
    "blocks": [
      {
        "type": "tab_description",
        "name": "Description H6",
        "limit": 1,
        "settings": [
          {
            "type": "paragraph",
            "content": "Heading 6 titles will be converted to tab headings, tab content will be everything between the Heading 6 titles. [Product Tabs Documentation](https://help.invisiblethemes.com/article/11-tabs)."
          }
        ]
      },
      {
        "type": "tab_richtext",
        "name": "Text",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Label",
            "default": "Text tab",
            "info": "Example: Warranty policy"
          },
          {
            "type": "richtext",
            "id": "raw_content",
            "label": "Tab content",
            "default": "<p>This tab content type will accept <strong>rich text</strong> to help with adding styles and links to additional pages or content. Use this to add supplementary information to help your buyers.</p>"
          }
        ]
      },
      {
        "type": "tab_html",
        "name": "HTML",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Label",
            "default": "HTML tab",
            "info": "Example: Sizing video"
          },
          {
            "type": "html",
            "id": "raw_content",
            "label": "Tab content",
            "default": "<p>This tab content type will accept HTML code for advanced styling. Use this to add video embeds, or other advanced HTML content.</p>"
          }
        ]
      },
      {
        "type": "tab_page",
        "name": "Page",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Label",
            "default": "Page tab",
            "info": "Example: Size chart"
          },
          {
            "type": "page",
            "id": "raw_content",
            "label": "Tab content"
          }
        ]
      }
    ]
  }


  {% endschema %}
0 Likes