add vendor name to collection

Store Design
, , , , , , , ,

Topic summary

A user wants to add vendor names above product titles on their collection page and add a 1px border around discount badges.

Border Solution (Resolved):

  • Add CSS code to Theme Settings > Custom CSS:
.product__badge.product__badge--sale {
    border: solid 1px rgba(0, 0, 0, 0.2);
}

Vendor Name Solutions:

Manual approach:

  • Locate the product card file (card-product.liquid in Pipeline theme)
  • Add {{ card_product.vendor }} snippet in the appropriate section
  • Example provided using Dawn theme for reference

Third-party app alternative:

  • Use a Badges app with two methods:
    1. Create separate text badge campaigns for each vendor using “Product vendor” feature
    2. Create one campaign utilizing metafields (requires manual input of vendor names per product)
  • App also supports custom discount badges with percentage variables and border adjustments

Note: The user’s theme is Pipeline (paid), limiting direct inspection by responders.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’d like to add the vendor name to my collection page above the title. Also add 1px border rectangle around my 30% discount badges. my site is https://lux360.net/collections/all?uff_otqj2k_vendor=Hogan%20Pre&usf_take=80

2

Hi @Luxluxlux360

To complete your border requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.product__badge.product__badge--sale {
    border: solid 1px rgba(0, 0, 0, 0.2);
}

Here is the result: https://prnt.sc/Hnfvm2wl-5ve

For the vendor name request, the theme you’re using is Pipeline, which is not free, so we can’t directly inspect its code. Here’s an example using the Dawn theme for illustration:

  1. Locate the product card file in your Pipeline theme.
  2. In the Dawn theme, the equivalent file is card-product.liquid.
  3. Add the following code snippet to the appropriate section in your product card file

Vendor name: {{ card_product.vendor }}

This will display the vendor name as shown in this example: Result Screenshot.

For reference, here’s how it would look in the Dawn theme: Code Screenshot.

I hope this helps

Best,

Daisy

3

Hi @Luxluxlux360 ,

In case you require support from a 3rd party app, you may consider utilizing our Badges feature.

I. Display Vendor names, in 2 ways:

1: For instance, if you have 3 vendors named A, B, and C, create 3 text badge campaigns for each vendor while using the Product vendor feature (in Product settings > Advanced). The app will automatically assign the correct products to the corresponding vendor to display.

Amanda_Fordeer_0-1732347195228.png
Amanda_Fordeer_0-1732347195228.png1358×959 70.3 KB

2: If you prefer to create only one campaign, you can utilize the Add metafield feature (in the Badge content section). However, for this method, you will need to input metafields containing the names of vendors for each product beforehand.

Amanda_Fordeer_1-1732347257052.png
Amanda_Fordeer_1-1732347257052.png1281×858 67.9 KB

II. Custom discount badges: Create a text badge and add the variable {discount_percentage}. Adjust the border in the Advanced section (named Stroke in the app).

Note: You can create Price badges if you wish to position the discount badges next to the price.

Amanda_Fordeer_3-1732348114384.png
Amanda_Fordeer_3-1732348114384.png1896×973 89.7 KB

If you need more assistance, feel free to reach out to me ^^