How to use Shopify product vendor element?

Shopify product vendor element shows the product vendor or brand name as defined in Shopify. Helpful for stores with multiple suppliers or brands.

I. Product Vendor Element - Content Settings 

1. Custom label 

• Set the label text that appears before the vendor name (default: “Vendor”).

2. Open collection URL 

• When enabled, clicking the vendor name opens the vendor’s collection page in your Shopify store.

3. Open in 

• Choose whether the collection link opens in the current tab or a new tab.

4. SEO > HTML tag 

• Select the proper HTML tag (e.g., Paragraph, Heading) for SEO purposes.

II. Product Vendor Element - Basic Settings

The Basic tab allows you to control the appearance and layout of the product vendor element.

1. Element ID 

• A unique identifier for the element, useful for custom CSS or advanced scripting.

2. Alignment 

• Adjust the vendor name’s alignment (left, center, right, justified, etc.).

3. Size 

• Configure the element’s dimensions (width, height, X/Y positioning).

4. Style 

• Set background color/image and control opacity to customize the vendor section’s look.

5. Border & Radius 

• Add borders or rounded corners to the element for styling purposes.

6. Margin & Padding

• Adjust spacing around (margin) and inside (padding) the vendor element.

7. Text 

7.1 Text alignment

• Align your text to the left, center, right, or justify it across the container.
• Helps structure your content according to the design layout.

7.2 Type

• Choose the text type: Paragraph, Heading 1, Heading 2, Heading 3, etc.
• This is useful for creating proper content hierarchy and SEO-friendly headings.

7.3 Font family

• Select from different fonts (e.g., Poppins).
• This changes the overall style and feel of your text.

7.4 Font size

• Adjust the text size in pixels (px).
• Example: Larger size for headings, smaller size for body text.

7.5 Text color

• Change the text color using the color picker.
• You can match it with your brand colors or background design.

7.6 Font weight

• Adjust how bold or light your text appears (e.g., 400 = normal, 700 = bold).

7.7 Font style

• Choose between default, italic, or oblique text styling.

7.8 Line height

• Control the spacing between lines of text.
• A higher value increases readability, especially for longer paragraphs.

7.9 Letter spacing

• Adjust the space between individual letters.
• Useful for creating a clean, modern, or dramatic look.

7.10 Text decoration

Add styling such as:

• Underline (U)
• Strikethrough (S)
• Overline (‾)

7.11 Text transform

Change text case automatically:

• Default – keeps original typing
• Uppercase – converts all letters to caps
• Lowercase – converts all letters to lowercase
• Capitalize – capitalizes the first letter of each word

7.12 Text shadow

• Add a shadow effect behind the text.

• Can make text stand out more against the background.

8. State 

• Configure separate styles for Normal and Hover states, including text color.

III. Product Vendor Element - Advanced Settings

1. Display On

Control where the image is visible:

• Desktop: Show or hide the image on desktop devices.
• Mobile: Show or hide the image on mobile devices.

2. Animation

Add visual effects when the image appears on the page:

• Type: Choose from available animations (fade, slide, zoom, etc.).
• Loop: Number of times the animation should repeat.
• Duration: How long the animation lasts (in seconds).
• Delay: Time before the animation starts (in seconds).

3. Custom CSS

Apply custom styling for advanced design control:

• Class Name: Add a CSS class that you can reference in your stylesheet.
• Custom Style: Write inline CSS styles that apply only to this image element.

Thanks for reading! If you have any questions, please contact us via email: support@shopone.io