Solved

Palo Alto Theme - Showing Vendor and Variant Size on Product Cards

angelicahidalgo
Tourist
9 0 2

Hi there!

I'm trying to show the vendor and size variant of each product in the Palo Alto Luxe theme. 

 

Either one of the versions pictured below would be amazing please! Currently the product title is bolder which I'm happy with also. It's more important to get all the information there.

 

You can see how they look at the moment here. https://eastend-wardrobe.myshopify.com/collections/all

 

Thanks so much

 

Screenshot 2024-01-10 at 8.20.45 am.pngScreenshot 2024-01-10 at 8.20.32 am.png

Accepted Solution (1)
Guleria
Shopify Partner
2953 582 832

This is an accepted solution.

 Seems you  know nothing about code. Check in below code where I use the vendor.  

{%- capture product_title -%}
  <b>{{ product.vendor }}</b>
  <a class="product-grid-item__title {{ heading_style }}" href="{{ product.url | within: collection }}" aria-label="{{ product.title | strip_html | escape }}"{% if index > 1 %} tabindex="-1"{% endif %} data-grid-link>
    {{- product.title | strip_html | escape -}}
  </a>
{%- endcapture -%}

{%- capture info_separator -%}
  <span class="product-grid-item__info-separator"></span>
{%- endcapture -%}

{%- capture product_info_price -%}
  <a class="product-grid-item__price price" href="{{ product.url | within: collection }}"{% if index > 1 %} tabindex="-1"{% endif %} data-grid-link>
    {%- liquid
      if product.price == 0 and product.price_varies == false
        assign product_price = 'products.product.free' | t
        assign product_price_min = 'products.product.free' | t
      elsif currency_code_enable
        assign product_price = product.price | money_with_currency
        assign product_price_min = product.price_min | money_with_currency
      else
        assign product_price = product.price | money
        assign product_price_min = product.price_min | money
      endif
    -%}

    {%- if product.price_varies -%}
      {{- 'products.general.from_text_html' | t: price: product_price_min -}}
    {%- else -%}
      {%- if on_sale -%}
        <span class="product-grid-item__price__new">{{ product_price }}</span>

        <s>
          {%- if currency_code_enable -%}
            {{- product.compare_at_price | money_with_currency -}}
          {%- else -%}
            {{- product.compare_at_price | money -}}
          {%- endif -%}
        </s>
      {%- else -%}
        {{- product_price -}}
      {%- endif -%}
    {%- endif -%}

    {%- if current_variant.unit_price_measurement -%}
      {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}

      <span class="product__unit-price{% if current_variant.unit_price == 0 %} hidden{% endif %}">
        {{ current_variant.unit_price | money }}
        {{ unit_price_separator }}
        {%- if current_variant.unit_price_measurement.reference_value != 1 -%}
          {{- current_variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ current_variant.unit_price_measurement.reference_unit }}
      </span>
    {%- endif -%}
  </a>
{%- endcapture -%}

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Replies 4 (4)

Guleria
Shopify Partner
2953 582 832

Hello @angelicahidalgo ,

 

You need to find and customize the product's cards.
If you are good with code try to find in Snippets > product-card.liquid 
For vendors use code {{ product.vendor }} just above the title.
If you need further help you can drop me an email.  

Thanks

 

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
angelicahidalgo
Tourist
9 0 2

Hi Guleria,

Thanks for getting back to me, it's now showing like this. Sorry I'm super new to coding I'm not sure if I was meant to add anything else.

I tried copying the product_title format and changing it to vendor but that just didn't show anything.

 

Screenshot 2024-01-10 at 8.43.57 pm.pngScreenshot 2024-01-10 at 8.43.42 pm.png

 

 

  {{ product.vendor }}
  
{%- capture product_title -%}
  <a class="product-grid-item__title {{ heading_style }}" href="{{ product.url | within: collection }}" aria-label="{{ product.title | strip_html | escape }}"{% if index > 1 %} tabindex="-1"{% endif %} data-grid-link>
    {{- product.title | strip_html | escape -}}
  </a>
{%- endcapture -%}

{%- capture info_separator -%}
  <span class="product-grid-item__info-separator"></span>
{%- endcapture -%}

{%- capture product_info_price -%}
  <a class="product-grid-item__price price" href="{{ product.url | within: collection }}"{% if index > 1 %} tabindex="-1"{% endif %} data-grid-link>
    {%- liquid
      if product.price == 0 and product.price_varies == false
        assign product_price = 'products.product.free' | t
        assign product_price_min = 'products.product.free' | t
      elsif currency_code_enable
        assign product_price = product.price | money_with_currency
        assign product_price_min = product.price_min | money_with_currency
      else
        assign product_price = product.price | money
        assign product_price_min = product.price_min | money
      endif
    -%}

    {%- if product.price_varies -%}
      {{- 'products.general.from_text_html' | t: price: product_price_min -}}
    {%- else -%}
      {%- if on_sale -%}
        <span class="product-grid-item__price__new">{{ product_price }}</span>

        <s>
          {%- if currency_code_enable -%}
            {{- product.compare_at_price | money_with_currency -}}
          {%- else -%}
            {{- product.compare_at_price | money -}}
          {%- endif -%}
        </s>
      {%- else -%}
        {{- product_price -}}
      {%- endif -%}
    {%- endif -%}

    {%- if current_variant.unit_price_measurement -%}
      {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}

      <span class="product__unit-price{% if current_variant.unit_price == 0 %} hidden{% endif %}">
        {{ current_variant.unit_price | money }}
        {{ unit_price_separator }}
        {%- if current_variant.unit_price_measurement.reference_value != 1 -%}
          {{- current_variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ current_variant.unit_price_measurement.reference_unit }}
      </span>
    {%- endif -%}
  </a>
{%- endcapture -%}

 

Guleria
Shopify Partner
2953 582 832

This is an accepted solution.

 Seems you  know nothing about code. Check in below code where I use the vendor.  

{%- capture product_title -%}
  <b>{{ product.vendor }}</b>
  <a class="product-grid-item__title {{ heading_style }}" href="{{ product.url | within: collection }}" aria-label="{{ product.title | strip_html | escape }}"{% if index > 1 %} tabindex="-1"{% endif %} data-grid-link>
    {{- product.title | strip_html | escape -}}
  </a>
{%- endcapture -%}

{%- capture info_separator -%}
  <span class="product-grid-item__info-separator"></span>
{%- endcapture -%}

{%- capture product_info_price -%}
  <a class="product-grid-item__price price" href="{{ product.url | within: collection }}"{% if index > 1 %} tabindex="-1"{% endif %} data-grid-link>
    {%- liquid
      if product.price == 0 and product.price_varies == false
        assign product_price = 'products.product.free' | t
        assign product_price_min = 'products.product.free' | t
      elsif currency_code_enable
        assign product_price = product.price | money_with_currency
        assign product_price_min = product.price_min | money_with_currency
      else
        assign product_price = product.price | money
        assign product_price_min = product.price_min | money
      endif
    -%}

    {%- if product.price_varies -%}
      {{- 'products.general.from_text_html' | t: price: product_price_min -}}
    {%- else -%}
      {%- if on_sale -%}
        <span class="product-grid-item__price__new">{{ product_price }}</span>

        <s>
          {%- if currency_code_enable -%}
            {{- product.compare_at_price | money_with_currency -}}
          {%- else -%}
            {{- product.compare_at_price | money -}}
          {%- endif -%}
        </s>
      {%- else -%}
        {{- product_price -}}
      {%- endif -%}
    {%- endif -%}

    {%- if current_variant.unit_price_measurement -%}
      {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}

      <span class="product__unit-price{% if current_variant.unit_price == 0 %} hidden{% endif %}">
        {{ current_variant.unit_price | money }}
        {{ unit_price_separator }}
        {%- if current_variant.unit_price_measurement.reference_value != 1 -%}
          {{- current_variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ current_variant.unit_price_measurement.reference_unit }}
      </span>
    {%- endif -%}
  </a>
{%- endcapture -%}

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
angelicahidalgo
Tourist
9 0 2

😂😂😂 hahahahahahahahahaha yeah I have no clue! This is one of the first things I've done so thanks so much for your help! that's perfect 😊