How to make vendors clickable in Ride theme?

Store Design
, , ,
1

Using the Ride theme on Shopify… how do I make the vendors name clickable on my collections and product pages? I can code if given detailed instructions. Here is my site https://www.heady-hawaii.com/

Thank you for any help! :slightly_smiling_face:

1 Like
2

Hello @headyhawaii ,

We are AliReviews - All-in-one reviews solution for all businesses.

It’s good to know you can code, because you need to edit the theme’s code to solve this issue. Here’s how:

  • Go to Online store → Themes → Click Action → Select Edit code
  • In the left-hand sidebar, click on the “Sections” folder → click on the “collection-template.liquid” file.
  • Find the code that displays the vendor name on the collection page look like this:

{{ collection.vendor }}
  • Surround the vendor name with an anchor tag to make it clickable, like this:

{{ collection.vendor }}

The {{ collection.vendor }} liquid variable is used to dynamically populate the vendor name.

  • Save the changes .
  • To make the vendor name clickable on the product page, you will need to modify the “product-template.liquid” file in the “Sections” page
  • Find this similar code displays the vendor name on the product page

{{ product.vendor }}
  • Surround the vendor name with an anchor tag to make it clickable, like this:

{{ product.vendor }}
  • Save the changes and test.

Hope this can help. If so, please hit the Like Button or mark this as Accepted Solution to let us know, it encourage us a lot.

Regards,

AliReviews team.

1 Like
3

Hello @headyhawaii ,

This can be resolved with some code customizations. This can be a bit complicated. Hence, we will strongly recommend you consult or hire a developer or Shopify expert if you are not technically familiar with Shopify or liquid code.

In order to make the changes, we would first recommend you that you duplicate the live site before making any code changes.

  1. To make the vendor’s name clickable on the collection page grids, you need to replace the code on the card-product.liquid file inside the snippets folder of the Shopify theme code editor with the below code:
.card__heading a:after { content:none; } a.img-link { height: 100%; position: absolute; display: block; width: 100%; z-index: 2; }

{% comment %}

Renders a product card

Accepts:

  • card_product: {Object} Product Liquid object (optional)

  • media_aspect_ratio: {String} Size of the product image card. Values are “square” and “portrait”. Default is “square” (optional)

  • show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)

  • show_vendor: {Boolean} Show the product vendor. Default: false

  • show_rating: {Boolean} Show the product rating. Default: false

  • extend_height: {Boolean} Card height extends to available container space. Default: true (optional)

  • lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)

  • show_quick_add: {Boolean} Show the quick add button.

  • section_id: {String} The ID of the section that contains this card.

  • horizontal_class: {Boolean} Add a card–horizontal class if set to true. Default: false (optional)

  • horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)

Usage:

{% render ‘card-product’, show_vendor: section.settings.show_vendor %}

{% endcomment %}

{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}

{%- liquid

assign ratio = 1

if card_product.featured_media and media_aspect_ratio == ‘portrait’

assign ratio = 0.8

elsif card_product.featured_media and media_aspect_ratio == ‘adapt’

assign ratio = card_product.featured_media.aspect_ratio

endif

if ratio == 0 or ratio == null

assign ratio = 1

endif

-%}

<div

class="

card

card–{{ settings.card_style }}

{% if card_product.featured_media %} card–media{% else %} card–text{% endif %}

{% if settings.card_style == ‘card’ %} color-{{ settings.card_color_scheme }} gradient{% endif %}

{% if extend_height %} card–extend-height{% endif %}

{% if card_product.featured_media == nil and settings.card_style == ‘card’ %} ratio{% endif %}

{% if horizontal_class %} card–horizontal{% endif %}

"

style=“–ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;”

<div

class=“card__inner {% if settings.card_style == ‘standard’ %}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if card_product.featured_media or settings.card_style == ‘standard’ %} ratio{% endif %}”

style=“–ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;”

{%- if card_product.featured_media -%}

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}

<img

srcset="

{%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}

{%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}

{%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}

{%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}

{%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}

{%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}

{{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w

"

src=“{{ card_product.featured_media | image_url: width: 533 }}”

sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”

alt=“{{ card_product.featured_media.alt | escape }}”

class=“motion-reduce”

{% unless lazy_load == false %}

loading=“lazy”

{% endunless %}

width=“{{ card_product.featured_media.width }}”

height=“{{ card_product.featured_media.height }}”

{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != null and show_secondary_image -%}

<img

srcset="

{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}

{%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}

{%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}

{%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}

{%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}

{%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}

{{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w

"

src=“{{ card_product.media[1] | image_url: width: 533 }}”

sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”

alt=“”

class=“motion-reduce”

loading=“lazy”

width=“{{ card_product.media[1].width }}”

height=“{{ card_product.media[1].height }}”

{%- endif -%}

{%- endif -%}

<h3

class=“card__heading”

{% if card_product.featured_media == null and settings.card_style == ‘standard’ %}

id=“title-{{ section_id }}-{{ card_product.id }}”

{% endif %}

<a

href=“{{ card_product.url }}”

id=“StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }}”

class=“full-unstyled-link”

aria-labelledby=“StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }} NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}”

{{ card_product.title | escape }}

{%- if card_product.available == false -%}

<span

id=“NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}”

class=“badge badge–bottom-left color-{{ settings.sold_out_badge_color_scheme }}”

{{- ‘products.product.sold_out’ | t -}}

{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}

<span

id=“NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}”

class=“badge badge–bottom-left color-{{ settings.sale_badge_color_scheme }}”

{{- ‘products.product.on_sale’ | t -}}

{%- endif -%}

<h3

class=“card__heading{% if card_product.featured_media or settings.card_style == ‘standard’ %} h5{% endif %}”

{% if card_product.featured_media or settings.card_style == ‘card’ %}

id=“title-{{ section_id }}-{{ card_product.id }}”

{% endif %}

<a

href=“{{ card_product.url }}”

id=“CardLink-{{ section_id }}-{{ card_product.id }}”

class=“full-unstyled-link”

aria-labelledby=“CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}”

{{ card_product.title | escape }}

{%- if show_vendor -%}{%- endif -%}

{{ ‘accessibility.vendor’ | t }}

{{ card_product.vendor | link_to_vendor }}

{{ block.settings.description | escape }}

{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}

{% liquid

assign rating_decimal = 0

assign decimal = card_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: card_product.metafields.reviews.rating.value, rating_max: card_product.metafields.reviews.rating.value.scale_max }}”

<span

aria-hidden=“true”

class=“rating-star color-icon-{{ settings.accent_icons }}”

style=“–rating: {{ card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};”

{{- card_product.metafields.reviews.rating.value }} /

{{ card_product.metafields.reviews.rating.value.scale_max -}}

({{ card_product.metafields.reviews.rating_count }})

{{- card_product.metafields.reviews.rating_count }}

{{ ‘accessibility.total_reviews’ | t -}}

{%- endif -%}

{% render ‘price’, product: card_product, price_class: ‘’ %}

{%- if show_quick_add -%}

{%- liquid

assign product_form_id = ‘quick-add-’ | append: section_id | append: card_product.id

assign qty_rules = false

if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1

assign qty_rules = true

endif

-%}

{%- if card_product.variants.size > 1 or qty_rules -%}

<button

id=“{{ product_form_id }}-submit”

type=“submit”

name=“add”

class=“quick-add__submit button button–full-width button–secondary{% if horizontal_quick_add %} card–horizontal__quick-add animate-arrow{% endif %}”

aria-haspopup=“dialog”

aria-labelledby=“{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}”

data-product-url=“{{ card_product.url }}”

{{ ‘products.product.choose_options’ | t }}

{%- if horizontal_quick_add -%}

{% render ‘icon-arrow’ %}

{%- endif -%}

<svg

aria-hidden=“true”

focusable=“false”

class=“spinner”

viewBox=“0 0 66 66”

xmlns=“http://www.w3.org/2000/svg”

<div

role=“dialog”

aria-label=“{{ ‘products.product.choose_product_options’ | t: product_name: card_product.title | escape }}”

aria-modal=“true”

class=“quick-add-modal__content global-settings-popup”

tabindex=“-1”

<button

id=“ModalClose-{{ card_product.id }}”

type=“button”

class=“quick-add-modal__toggle”

aria-label=“{{ ‘accessibility.close’ | t }}”

{% render ‘icon-close’ %}

{%- else -%}

{%- form ‘product’,

card_product,

id: product_form_id,

class: ‘form’,

novalidate: ‘novalidate’,

data-type: ‘add-to-cart-form’

-%}

<input

type=“hidden”

name=“id”

value=“{{ card_product.selected_or_first_available_variant.id }}”

disabled

<button

id=“{{ product_form_id }}-submit”

type=“submit”

name=“add”

class=“quick-add__submit button button–full-width button–secondary{% if horizontal_quick_add %} card–horizontal__quick-add{% endif %}”

aria-haspopup=“dialog”

aria-labelledby=“{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}”

aria-live=“polite”

data-sold-out-message=“true”

{% if card_product.selected_or_first_available_variant.available == false %}

disabled

{% endif %}

{%- if card_product.selected_or_first_available_variant.available -%}

{{ ‘products.product.add_to_cart’ | t }}

{%- else -%}

{{ ‘products.product.sold_out’ | t }}

{%- endif -%}

{{ ‘products.product.sold_out’ | t }}

{%- if horizontal_quick_add -%}

{% render ‘icon-plus’ %}

{%- endif -%}

<svg

aria-hidden=“true”

focusable=“false”

class=“spinner”

viewBox=“0 0 66 66”

xmlns=“http://www.w3.org/2000/svg”

{%- endform -%}

{%- endif -%}

{%- endif -%}

{%- if card_product.available == false -%}

<span

id=“Badge-{{ section_id }}-{{ card_product.id }}”

class=“badge badge–bottom-left color-{{ settings.sold_out_badge_color_scheme }}”

{{- ‘products.product.sold_out’ | t -}}

{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}

<span

id=“Badge-{{ section_id }}-{{ card_product.id }}”

class=“badge badge–bottom-left color-{{ settings.sale_badge_color_scheme }}”

{{- ‘products.product.on_sale’ | t -}}

{%- endif -%}

{%- else -%}

<div

class="

card

card–{{ settings.card_style }}

card–text

{% if extend_height %} card–extend-height{% endif %}

{% if settings.card_style == ‘card’ %} color-{{ settings.card_color_scheme }} gradient{% endif %}

{% if card_product.featured_media == nil and settings.card_style == ‘card’ %} ratio{% endif %}

{{ horizontal_class }}

"

style=“–ratio-percent: 100%;”

<div

class=“card__inner {% if settings.card_style == ‘standard’ %}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if settings.card_style == ‘standard’ %} ratio{% endif %}”

style=“–ratio-percent: 100%;”

{{ ‘onboarding.product_title’ | t }}

{%- if show_vendor -%}{%- endif -%}

{{ ‘accessibility.vendor’ | t }}

{{ card_product.vendor | link_to_vendor }}

{% render ‘price’ %}

{%- endif -%}

You can see the image attached for the reference:

  1. In order to make the vendor name clickable on the product page, you need to make the following changes:

A. Go to main-product.liquid file.

B. Create a new block using the below code and add it as shown in the image.

Code:

{

“type”: “vendor”,

“name”: “Vendor”,

“limit”: 1

},

C. add the block where the loop for all the section blocks is being executed:

Code:

{% when ‘vendor’ %}

<p style="color: white"

class=“product__text”

{{ block.shopify_attributes }}

{{- product.vendor | link_to_vendor -}}

D. After doing both the above changes save the code and open customize settings of the product page.

  1. After you have opened the customize settings page for the product page, then click on “Add block” as shown in the image.

  2. Add the vendor block from the list of block options available.

  3. Hide the text block currently responsible for showing the vendor.

  4. Save the changes after doing the above steps.

After you have made the above changes, the vendor names on all the pages will be a clickable link.

Let us know if you need more help with this.

Regards,
Cedcommerce.

4

This will make the vendor clickable, but still will not give the store owner the option to customise the link? What if the store owner wants that link to get to a specific page on the store?