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!
1 Like
Hi @PetalPlantPals ,
Share your store URL.
@oscprofessional Yes, url is: https://petalplantpals.com/ and password is test
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' %}
@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:
@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:
1 Like
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
{{ section.settings.product.description }}
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.
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
sorry for tribal this issue
can you pleas share featured-product section code so i will check and update
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:
Show More
css {{ '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 }} {%- 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 }} {%- endif -%} {% 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 %} {%- if first_3d_model -%} {%- 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 -%} {% 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 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
2 Likes