Origin Theme Featured Product Link Help Needed

Technical Q&A
1

Hello,

I’m using Origin theme to design a new storefront and the coding on this particular main page is throwing me off. The Featured Product on the page has a link to the main product page for the product, however, it’s a very small and almost hidden ‘see full details’ link at the bottom of the listing. I’m trying to make the title to the featured product a clickable link to the full product page, however, because this is auto generated once the product is chosen, I’m having trouble editing any part of the code. I believe that all the behavior for the section is handled by the Js which supersedes any edits I make to the page. I changed the styling somewhat to make it a little more user friendly for now, I just don’t prefer the particular way this part of the theme operated and have put my brain through a blender trying to figure it out. Any help is appreciated, thanks.

2

Here is some of the code I’ve written to try and fix the issue:

{%- liquid

assign product = section.settings.product

if product == null 

  assign placeholder = true 

endif -%}

{{ product.title | escape }}

<product-info

data-section="{{ section.id }}" 

data-product-id="{{ product.id }}" 

data-update-url="false" data-url="{{ product.url }}" {% if section.settings.image_zoom == 'hover' %} 

data-zoom-on-hover

{% endif %}

/>

And this:

{%- unless placeholder -%}

<a href="{{ product.url }}" class="featured-product__link" aria-label="{{ product.title }}">

  {% render 'product-media-gallery', product: product, variant_images: variant_images, limit: 1 %}

</a>



<!-- Script to force navigation instead of gallery -->

<script>

  document.addEventListener('DOMContentLoaded', function() {

    const featuredLink = document.querySelector('.featured-product__link');

    if (featuredLink) {

      // Stop Shopify gallery JS from hijacking the click

      featuredLink.addEventListener('click', function(event) {

        event.stopPropagation();       // Prevent gallery JS

        window.location.href = this.href; // Force navigation

      });

    }

  });

</script>



{%- else -%}

  <div class="product__media-item">

    <div

      class="product-media-container global-media-settings gradient{% if section.settings.constrain_to_viewport %} constrain-height{% endif %}"

      style="--ratio: 1.0; --preview-ratio: 1.0;"

    >

      {{ 'product-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}

    </div>

  </div>

{%- endunless -%}

</div>
3

Hey @tacticalschnauzer,

The requested changes requires to do the custom code in your theme file. May I have your store url and collab code so that I can take a look into it and do the requested changes.

Thanks

4

8157

5

I just send you request for accessing the store.
Please accept it.
Thanks

6

Sorry just saw this and approved.