Dawn Theme: Featured Product Show Full Details

PetalPlantPals
Excursionist
30 0 15

Hi there!

 

I am looking to show the full product details instead of the "View full details" button on a Featured Product on my homepage. I am currently using the Dawn Theme.

 

Any help appreciated! 

 

Replies 9 (9)

oscprofessional
Shopify Partner
15843 2371 3073

Hi @PetalPlantPals ,

Share your store URL.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
PetalPlantPals
Excursionist
30 0 15

@oscprofessional Yes, url is: https://petalplantpals.com/ and password is test

oscprofessional
Shopify Partner
15843 2371 3073

@PetalPlantPals,

you need to check theme customization section is there any option to change structure, otherwise you have to do code customization if you are having knowledge of liquid code. check your home page liquid code and search the feature product code. and add description like this

{{ product.description }}
{% include 'product-generic-description' %}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
PetalPlantPals
Excursionist
30 0 15

@oscprofessional , The theme doesn't have that customization and the code didn't work: 

 

I've added the code to the bottom of featured-product.liquid but the item still kept the "View full details" button, on the Dawn code this is what it says for description: 

 

Screen Shot 2021-12-20 at 11.08.48 AM.png

PetalPlantPals
Excursionist
30 0 15

@oscprofessional This is what happens when I add that code to the featured product liquid, the product description is on the bottom of the website and there is an error:

 

Screen Shot 2021-12-20 at 11.16.53 AM.png

 

 

KetanKumar
Shopify Partner
36843 3636 11978

@PetalPlantPals 

sorry for tribal this issue 

can you pleas share featured-product section code so i will check and 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
PetalPlantPals
Excursionist
30 0 15

Thank you for helping @KetanKumar ,

 

On this page: https://petalplantpals.com/products/watering-levi , the product description is underneath the buy buttons, I want to replicate that for the featured product on the home page: https://petalplantpals.com/ (Remove "View full details" and replace with the product description.)

 

This is the featured-product.liquid code:

 

Click to expand...
{{ 'section-main-product.css' | asset_url | stylesheet_tag }}
{{ 'section-featured-product.css' | asset_url | stylesheet_tag }}
{{ 'component-accordion.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-rte.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}

<link rel="stylesheet" href="{{ 'component-deferred-media.css' | asset_url }}" media="print" onload="this.media='all'">

{%- assign product = section.settings.product -%}

{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
{%- if first_3d_model -%}
  {{ 'component-product-model.css' | asset_url | stylesheet_tag }}
  <link id="ModelViewerStyle" rel="stylesheet" href="https://cdn.shopify.com/shopifycloud/model-viewer-ui/assets/v1.0/model-viewer-ui.css" media="print" onload="this.media='all'">
  <link id="ModelViewerOverride" rel="stylesheet" href="{{ 'component-model-viewer-ui.css' | asset_url }}" media="print" onload="this.media='all'">
{%- endif -%}

<section class="{% if section.settings.secondary_background %}background-secondary{% else %}spaced-section{% endif %}">
  <div class="page-width">
    <div class="featured-product product grid grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}">
      <div class="grid__item product__media-wrapper">
        <a class="skip-to-content-link button visually-hidden" href="#ProductInfo-{{ section.id }}">
          {{ "accessibility.skip_to_product_info" | t }}
        </a>
        <div class="product__media-list">
          {%- if product.selected_or_first_available_variant.featured_media != null -%}
            {%- assign media = product.selected_or_first_available_variant.featured_media -%}
            <div class="product__media-item" data-media-id="{{ section.id }}-{{ media.id }}">
              {% render 'product-thumbnail', media: media, position: 'featured', loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: false %}
            </div>
          {%- endif -%}
          {%- liquid
            assign media_to_render = product.featured_media.id
            for variant in product.variants
              assign media_to_render = media_to_render | append: variant.featured_media.id | append: ' '
            endfor
          -%}
          {%- for media in product.media -%}
            {%- if media_to_render contains media.id and media.id != product.selected_or_first_available_variant.featured_media.id -%}
              <div class="product__media-item" data-media-id="{{ section.id }}-{{ media.id }}">
                {% render 'product-thumbnail', media: media, position: forloop.index, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: false %}
              </div>
            {%- endif -%}
          {%- endfor -%}
        </div>
        {%- if first_3d_model -%}
          <button
            class="button button--full-width product__xr-button"
            type="button"
            aria-label="{{ 'products.product.xr_button_label' | t }}"
            data-shopify-xr
            data-shopify-model3d-id="{{ first_3d_model.id }}"
            data-shopify-title="{{ product.title | escape }}"
            data-shopify-xr-hidden
          >
            {% render 'icon-3d-model' %}
            {{ 'products.product.xr_button' | t }}
          </button>
        {%- endif -%}
      </div>
      <div class="product__info-wrapper grid__item">
        <div id="ProductInfo-{{ section.id }}" class="product__info-container">
          {%- assign product_form_id = 'product-form-' | append: section.id -%}

          {%- for block in section.blocks -%}
            {%- case block.type -%}
            {%- when 'text' -%}
              <p class="product__text{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}" {{ block.shopify_attributes }}>
                {{- block.settings.text -}}
              </p>
            {%- when 'title' -%}
              <h2 class="h1 product__title" {{ block.shopify_attributes }}>
                {%- if product.title != blank -%}
                  {{ product.title | escape }}
                {%- else -%}
                  {{ 'onboarding.product_title' | t }}
                {%- endif -%}
              </h2>
            {%- when 'price' -%}
              <div class="no-js-hidden" id="price-{{ section.id }}" role="status" {{ block.shopify_attributes }}>
                {%- render 'price', product: product, use_variant: true, show_badges: true, price_class: 'price--large' -%}
              </div>
              {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
                <div class="product__tax caption rte">
                  {%- if shop.taxes_included -%}
                    {{ 'products.product.include_taxes' | t }}
                  {%- endif -%}
                  {%- if shop.shipping_policy.body != blank -%}
                    {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
                  {%- endif -%}
                </div>
              {%- endif -%}
              {%- if product != blank -%}
                <div {{ block.shopify_attributes }}>
                  {%- form 'product', product -%}
                    <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
                    {{ form | payment_terms }}
                  {%- endform -%}
                </div>
              {%- endif -%}
            {%- when 'quantity_selector' -%}
              <div class="product-form__input product-form__quantity" {{ block.shopify_attributes }}>
                <label class="form__label" for="Quantity-{{ section.id }}">
                  {{ 'products.product.quantity.label' | t }}
                </label>
                <quantity-input class="quantity">
                  <button class="quantity__button no-js-hidden" name="minus" type="button">
                    <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
                    {% render 'icon-minus' %}
                  </button>
                  <input class="quantity__input"
                      type="number"
                      name="quantity"
                      id="Quantity-{{ section.id }}"
                      min="1"
                      value="1"
                      form="{{ product_form_id }}"
                    >
                  <button class="quantity__button no-js-hidden" name="plus" type="button">
                    <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
                    {% render 'icon-plus' %}
                  </button>
                </quantity-input>
              </div>
            {%- when 'share' -%}
              <script src="{{ 'share.js' | asset_url }}" defer="defer"></script>
              <share-button id="Share-{{ section.id }}" class="share-button" {{ block.shopify_attributes }}>
                <button class="share-button__button hidden">
                  {% render 'icon-share' %}
                  {{ block.settings.share_label | escape }}
                </button>
                <details id="Details-{{ block.id }}-{{ section.id }}">
                  <summary class="share-button__button">
                    {% render 'icon-share' %}
                    {{ block.settings.share_label | escape }}
                  </summary>
                  <div id="Product-share-{{ section.id }}" class="share-button__fallback motion-reduce">
                    <div class="field">
                      <span id="ShareMessage-{{ section.id }}" class="share-button__message hidden" role="status">
                      </span>
                      <input type="text"
                            class="field__input"
                            id="url"
                            value="{{ product.selected_variant.url | default: product.url | prepend: shop.url }}"
                            placeholder="{{ 'general.share.share_url' | t }}"
                            onclick="this.select();"
                            readonly
                      >
                      <label class="field__label" for="url">{{ 'general.share.share_url' | t }}</label>
                    </div>
                    <button class="share-button__close hidden no-js-hidden">
                      {% render 'icon-close' %}
                      <span class="visually-hidden">{{ 'general.share.close' | t }}</span>
                    </button>
                    <button class="share-button__copy no-js-hidden">
                      {% render 'icon-clipboard' %}
                      <span class="visually-hidden">{{ 'general.share.copy_to_clipboard' | t }}</span>
                    </button>
                  </div>
                </details>
              </share-button>
            {%- when 'variant_picker' -%}
              {%- unless product.has_only_default_variant -%}
                {%- if block.settings.picker_type == 'button' -%}
                  <variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" data-update-url="false" {{ block.shopify_attributes }}>
                    {%- for option in product.options_with_values -%}
                        <fieldset class="js product-form__input">
                          <legend class="form__label">{{ option.name }}</legend>
                          {%- for value in option.values -%}
                            <input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
                                  name="{{ option.name }}"
                                  value="{{ value | escape }}"
                                  form="{{ product_form_id }}"
                                  {% if option.selected_value == value %}checked{% endif %}
                            >
                            <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
                              {{ value }}
                            </label>
                          {%- endfor -%}
                        </fieldset>
                    {%- endfor -%}
                    <script type="application/json">
                      {{ product.variants | json }}
                    </script>
                  </variant-radios>
                {%- else -%}
                  <variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" data-update-url="false" {{ block.shopify_attributes }}>
                    {%- for option in product.options_with_values -%}
                      <div class="product-form__input product-form__input--dropdown">
                        <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
                          {{ option.name }}
                        </label>
                        <div class="select">
                          <select id="Option-{{ section.id }}-{{ forloop.index0 }}"
                            class="select__select"
                            name="options[{{ option.name | escape }}]"
                            form="{{ product_form_id }}"
                          >
                            {%- for value in option.values -%}
                              <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
                                {{ value }}
                              </option>
                            {%- endfor -%}
                          </select>
                          {% render 'icon-caret' %}
                        </div>
                      </div>
                    {%- endfor -%}

                    <script type="application/json">
                      {{ product.variants | json }}
                    </script>
                  </variant-selects>
                {%- endif -%}
              {%- endunless -%}

              <noscript class="product-form__noscript-wrapper-{{ section.id }}">
                <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
                  <label class="form__label" for="Variants-{{ section.id }}">{{ 'products.product.product_variants' | t }}</label>
                  <div class="select">
                    <select name="id" id="Variants-{{ section.id }}" class="select__select" form="{{ product_form_id }}">
                      {%- for variant in product.variants -%}
                        <option
                          {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
                          {% if variant.available == false %}disabled{% endif %}
                          value="{{ variant.id }}"
                        >
                          {{ variant.title }}
                          {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                          - {{ variant.price | money | strip_html }}
                        </option>
                      {%- endfor -%}
                    </select>
                    {% render 'icon-caret' %}
                  </div>
                </div>
              </noscript>
            {%- when 'buy_buttons' -%}
              <div {{ block.shopify_attributes }}>
                {%- if product != blank -%}
                  <product-form class="product-form">
                    <div class="product-form__error-message-wrapper" role="alert" hidden>
                      <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
                        <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
                        <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
                        <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
                        <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
                      </svg>
                      <span class="product-form__error-message"></span>
                    </div>

                    {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                      <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled>
                      <div class="product-form__buttons">
                        <button
                          type="submit"
                          name="add"
                          class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
                        {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                        >
                            <span>
                              {%- if product.selected_or_first_available_variant.available -%}
                                {{ 'products.product.add_to_cart' | t }}
                              {%- else -%}
                                {{ 'products.product.sold_out' | t }}
                              {%- endif -%}
                            </span>
                            <div class="loading-overlay__spinner hidden">
                              <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                                <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                              </svg>
                            </div>
                        </button>
                        {%- if block.settings.show_dynamic_checkout -%}
                          {{ form | payment_button }}
                        {%- endif -%}
                      </div>
                    {%- endform -%}
                  </product-form>
                {%- else -%}
                  <div class="product-form">
                    <div class="product-form__buttons form">
                      <button
                        type="submit"
                        name="add"
                        class="product-form__submit button button--full-width button--primary"
                        disabled
                      >
                        {{ 'products.product.sold_out' | t }}
                      </button>
                    </div>
                  </div>
                {%- endif -%}
              </div>
            {%- when 'custom_liquid' -%}
              {{ block.settings.custom_liquid }}
            {%- when 'rating' -%}
              {%- if product.metafields.reviews.rating.value != blank -%}
                {% liquid
                  assign rating_decimal = 0
                  assign decimal = product.metafields.reviews.rating.value.rating | modulo: 1
                  if decimal >= 0.3 and decimal <= 0.7
                  assign rating_decimal = 0.5
                elsif decimal > 0.7
                  assign rating_decimal = 1
                  endif
                %}
                <div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product.metafields.reviews.rating.value, rating_max: product.metafields.reviews.rating.value.scale_max }}">
                  <span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
                </div>
                <p class="rating-text caption">
                  <span aria-hidden="true">{{ product.metafields.reviews.rating.value }} / {{ product.metafields.reviews.rating.value.scale_max }}</span>
                </p>
                <p class="rating-count caption">
                  <span aria-hidden="true">({{ product.metafields.reviews.rating_count }})</span>
                  <span class="visually-hidden">{{ product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
                </p>
              {%- endif -%}
            {%- endcase -%}
          {%- endfor -%}
        <a href="{{ product.url }}" class="link product__view-details animate-arrow">
          {{ 'products.product.view_full_details' | t }}
          {% render 'icon-arrow' %}
        </a>
        </div>
      </div>
    </div>

    <product-modal id="ProductModal-{{ section.id }}" class="product-media-modal media-modal">
      <div class="product-media-modal__dialog" role="dialog" aria-label="{{ 'products.modal.label' | t }}" aria-modal="true" tabindex="-1">
        <button id="ModalClose-{{ section.id }}" type="button" class="product-media-modal__toggle" aria-label="{{ 'accessibility.close' | t }}">{% render 'icon-close' %}</button>

        <div class="product-media-modal__content" role="document" aria-label="{{ 'products.modal.label' | t }}" tabindex="0">
          {%- liquid
            if product.selected_or_first_available_variant.featured_media != null
              assign media = product.selected_or_first_available_variant.featured_media
              render 'product-media', media: media, loop: section.settings.enable_video_looping, variant_image: section.settings.hide_variants
            endif
          -%}

          {%- for media in product.media -%}
            {%- liquid
              if section.settings.hide_variants and media_to_render contains media.id
                assign variant_image = true
              else
                assign variant_image = false
              endif

              unless media.id == product.selected_or_first_available_variant.featured_media.id
                render 'product-media', media: media, loop: section.settings.enable_video_looping, variant_image: variant_image
              endunless
            -%}
          {%- endfor -%}
        </div>
      </div>
    </product-modal>
  </div>
</section>

{% javascript %}
  if (!customElements.get('product-modal')) {
    customElements.define('product-modal', class ProductModal extends ModalDialog {
      constructor() {
        super();
      }

      hide() {
        super.hide();
      }

      show(opener) {
        super.show(opener);
        this.showActiveMedia();
      }

      showActiveMedia() {
        this.querySelectorAll(`[data-media-id]:not([data-media-id="${this.openedBy.getAttribute("data-media-id")}"])`).forEach((element) => {
            element.classList.remove('active');
          }
        )
        const activeMedia = this.querySelector(`[data-media-id="${this.openedBy.getAttribute("data-media-id")}"]`);
        const activeMediaTemplate = activeMedia.querySelector('template');
        const activeMediaContent = activeMediaTemplate ? activeMediaTemplate.content : null;
        activeMedia.classList.add('active');
        activeMedia.scrollIntoView();

        const container = this.querySelector('[role="document"]');
        container.scrollLeft = (activeMedia.width - container.clientWidth) / 2;

        if (activeMedia.nodeName == 'DEFERRED-MEDIA' && activeMediaContent && activeMediaContent.querySelector('.js-youtube'))
          activeMedia.loadContent();
      }
    });
  }
{% endjavascript %}
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- if first_3d_model -%}
  <script type="application/json" id="ProductJSON-{{ product.id }}">
    {{ product.media | where: 'media_type', 'model' | json }}
  </script>
  <script src="{{ 'product-model.js' | asset_url }}" defer></script>
{%- endif -%}

{%- liquid
  if product.selected_or_first_available_variant.featured_media
    assign seo_media = product.selected_or_first_available_variant.featured_media
  else
    assign seo_media = product.featured_media
  endif
-%}

<script type="application/ld+json">
  {
    "@context": "http://schema.org/",
    "@type": "Product",
    "name": {{ product.title | json }},
    "url": {{ shop.url | append: product.url | json }},
    {% if seo_media -%}
      {%- assign media_size = seo_media.preview_image.width | append: 'x' -%}
      "image": [
        {{ seo_media | img_url: media_size | prepend: "https:" | json }}
      ],
    {%- endif %}
    "description": {{ product.description | strip_html | json }},
    {% if product.selected_or_first_available_variant.sku != blank -%}
      "sku": {{ product.selected_or_first_available_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 variant.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>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    function isIE() {
      const ua = window.navigator.userAgent;
      const msie = ua.indexOf('MSIE ');
      const trident = ua.indexOf('Trident/');

      return (msie > 0 || trident > 0);
    }

    if (!isIE()) return;
    const hiddenInput = document.querySelector('#{{ product_form_id }} input[name="id"]');
    const noScriptInputWrapper = document.createElement('div');
    const variantSwitcher = document.querySelector('variant-radios[data-section="{{ section.id }}"]') || document.querySelector('variant-selects[data-section="{{ section.id }}"]');
    noScriptInputWrapper.innerHTML = document.querySelector('.product-form__noscript-wrapper-{{ section.id }}').textContent;
    variantSwitcher.outerHTML = noScriptInputWrapper.outerHTML;

    document.querySelector('#Variants-{{ section.id }}').addEventListener('change', function(event) {
      hiddenInput.value = event.currentTarget.value;
    });
  });
</script>

{% schema %}
{
  "name": "t:sections.featured-product.name",
  "tag": "section",
  "class": "featured-product-section spaced-section spaced-section--full-width",
  "blocks": [
    {
      "type": "text",
      "name": "t:sections.featured-product.blocks.text.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Text block",
          "label": "t:sections.featured-product.blocks.text.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "t:sections.featured-product.blocks.text.settings.text_style.options__1.label"
            },
            {
              "value": "subtitle",
              "label": "t:sections.featured-product.blocks.text.settings.text_style.options__2.label"
            },
            {
              "value": "uppercase",
              "label": "t:sections.featured-product.blocks.text.settings.text_style.options__3.label"
            }
          ],
          "default": "body",
          "label": "t:sections.featured-product.blocks.text.settings.text_style.label"
        }
      ]
    },
    {
      "type": "title",
      "name": "t:sections.featured-product.blocks.title.name",
      "limit": 1
    },
    {
      "type": "price",
      "name": "t:sections.featured-product.blocks.price.name",
      "limit": 1
    },
    {
      "type": "quantity_selector",
      "name": "t:sections.featured-product.blocks.quantity_selector.name",
      "limit": 1
    },
    {
      "type": "variant_picker",
      "name": "t:sections.featured-product.blocks.variant_picker.name",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "picker_type",
          "options": [
            {
              "value": "dropdown",
              "label": "t:sections.featured-product.blocks.variant_picker.settings.picker_type.options__1.label"
            },
            {
              "value": "button",
              "label": "t:sections.featured-product.blocks.variant_picker.settings.picker_type.options__2.label"
            }
          ],
          "default": "button",
          "label": "t:sections.featured-product.blocks.variant_picker.settings.picker_type.label"
        }
      ]
    },
    {
      "type": "buy_buttons",
      "name": "t:sections.featured-product.blocks.buy_buttons.name",
      "limit": 1,
      "settings": [
        {
          "type": "checkbox",
          "id": "show_dynamic_checkout",
          "default": true,
          "label": "t:sections.featured-product.blocks.buy_buttons.settings.show_dynamic_checkout.label",
          "info": "t:sections.featured-product.blocks.buy_buttons.settings.show_dynamic_checkout.info"
        }
      ]
    },
    {
      "type": "share",
      "name": "t:sections.featured-product.blocks.share.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "share_label",
          "label": "t:sections.featured-product.blocks.share.settings.text.label",
          "default": "Share"
        },
        {
          "type": "paragraph",
          "content": "t:sections.featured-product.blocks.share.settings.featured_image_info.content"
        },
        {
          "type": "paragraph",
          "content": "t:sections.featured-product.blocks.share.settings.title_info.content"
        }
      ]
    },
    {
      "type": "custom_liquid",
      "name": "t:sections.featured-product.blocks.custom_liquid.name",
      "settings": [
        {
          "type": "liquid",
          "id": "custom_liquid",
          "label": "t:sections.featured-product.blocks.custom_liquid.settings.custom_liquid.label"
        }
      ]
    },
    {
      "type": "rating",
      "name": "t:sections.featured-product.blocks.rating.name",
      "limit": 1,
      "settings": [
        {
          "type": "paragraph",
          "content": "t:sections.featured-product.blocks.rating.settings.paragraph.content"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "product",
      "id": "product",
      "label": "t:sections.featured-product.settings.product.label"
    },
    {
      "type": "checkbox",
      "id": "secondary_background",
      "default": false,
      "label": "t:sections.featured-product.settings.secondary_background.label"
    },
    {
      "type": "header",
      "content": "t:sections.featured-product.settings.header.content",
      "info": "t:sections.featured-product.settings.header.info"
    },
    {
      "type": "checkbox",
      "id": "hide_variants",
      "default": false,
      "label": "t:sections.main-product.settings.hide_variants.label"
    },
    {
      "type": "checkbox",
      "id": "enable_video_looping",
      "default": false,
      "label": "t:sections.featured-product.settings.enable_video_looping.label"
    }
  ],
  "presets": [
    {
      "name": "t:sections.featured-product.presets.name",
      "blocks": [
        {
          "type": "text",
          "settings": {
            "text": "{{ section.settings.product.vendor }}",
            "text_style": "uppercase"
          }
        },
        {
          "type": "title"
        },
        {
          "type": "text",
          "settings": {
            "text": "{{ section.settings.product.metafields.descriptors.subtitle.value }}",
            "text_style": "subtitle"
          }
        },
        {
          "type": "price"
        },
        {
          "type": "variant_picker"
        },
        {
          "type": "quantity_selector"
        },
        {
          "type": "buy_buttons"
        },
        {
          "type": "share"
        }
      ]
    }
  ]
}
{% endschema %}

PaulNewton
Shopify Partner
6275 573 1323

No file editing needed.

Setting Instructions are for Dawn 2.4.0 not tested in previous versions.

In the visual theme editor for the feature-product section add a custom-liquid block with the following contents

 

<div class="product__description rte">{{ section.settings.product.description }}</div>

 

 

If you want to hide the 'View full details' , aka .product__view-details , use the following CSS style in either the same custom-liquid block or another separate custom-liquid block to be able to toggle the  'View full details' link off/on.

 

<style> #shopify-section-{{ section.id }} .product__view-details { display:none; }</style>

 

 

the #shopify-section-{{ section.id }} is used to scope the rule to that specific featured-product section instead applying to all featured-product sections.

 

https://shopify.dev/changelog/online-store-2-0-introducing-the-new-liquid-input-setting 

https://shopify.dev/themes/architecture/settings/input-settings#liquid 

https://shopify.github.io/liquid-code-examples/ 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


PetalPlantPals
Excursionist
30 0 15

@PaulNewton Thank you Paul, I placed both in the featured-product.liquid, and it did remove the "View full details" button, but the product description ended up on the bottom of the website. I want to place it right underneath the buy buttons like a regular product