1. Product title and Vendor name
By default, the product title and vendor name are displayed in the product page. The vendor name appears above the product title.
If you want to rearrange this order, follow these steps:
- Disable the "Show product title" and "Show product vendor" settings in the section settings.
- Then, add two separate blocks for the product title and vendor name. Additionally, you can adjust the size of the product name as needed (Vendor name cannot be resized.
You can link the vendor name to a page showcasing the vendor's corresponding products on the product page. Additionally, you have the option to link to a popup page without leaving the current page, or to an external URL.
To provide more details about a product's vendor, you can set it up following the priorities below:
- Link Vendor to Associated Collection: When you tick the "Link vendor to associated collection" option, either in a specific section or block, depending on where vendor details are displayed or added. The vendor name on the product page will link directly to a collection of products by that vendor. This offers a seamless way for customers to explore more products from the same vendor.
- Show Page Content in a Popup: If you prefer not to redirect customers away from the current page, you can select a page to display its content in a popup. This is especially useful when using metafields to show vendor collection in the admin. If this option is enabled, the link to the vendor's collection is applied automatically.
- External Link Option: If you want to provide an external link to more information about the vendor, you can fill in a URL that will direct customers to an external website or resource.
The preferred option is to link to the page containing the vendor's products, as the primary goal is to provide a direct link related to the vendor.
2. Product price
To display the product price, follow these steps:
- Add the "Price" block to your product page. This block will automatically display the price of the product.
- Configure Price Block: You can choose whether to include tax status and shipping policy information in the displayed price. Adjust the text size of the price to ensure it fits well with the overall design
If you need more information, please read Shopify documentation for detailed instructions on Location-based tax settings
3. Product description
To add the product description with an option to show it as a collapsible tab, follow these steps:
- Add the Description block to your product page.
- Open the block settings panel, enable Show in tab to display the description as a collapsible tab, optimizing space on the product page.
- Use the Default content height setting to control how much content is shown before the "Read more" button is clicked.
- If you want to customize the description for each product/product variant, follow this:
How to add a custom description to your product using metafields?
STEP 1: Create a Product/Variant metafield
|
Before creating a metafield:
|
- Go to Shopify admin > Settings > Metafields and metaobjects > Products/Variants (based on your preference).
- Click Add definition and create a new metafield.
- Enter Name and set the metafield Type to Rich text.
- "Save" the metafield.
If you need more detailed guidance, check this out 👉 How to create Product metafields.
STEP 2: Input Metafield values
- Go to Shopify admin > Products.
- Click on the product you want to add a custom description for.
- Scroll down to the Metafields section and enter your custom description.
- For variant-specific descriptions, click a product variant and enter the content in its Metafields section.
- "Save" the product.
STEP 3: Enter the Metafields key in Description block
- Go to Product page > Product information section > Description block.
- In the Custom description field, enter the namespace and key of the created metafield. You can enter both product and variant metafield key to display both of them.
STEP 4: Click "Save" when done.
4. Product variants and Quantity selector
To include product variants and a quantity selector on your product page:
Adding the "Variant Picker" block will automatically display all variants of the product. You can configure this block to display variants either as a dropdown menu or as buttons, depending on your preference.
Type: Dropdown
Type: Button
Add Quantity Selector Block to enable customers to specify the quantity of the product they wish to purchase. This block allows customers to adjust the quantity before adding the item to their cart, providing them with more control over their purchase. You can select the style of the block with 4 options: Adapt to edge setting, Rounded, Square, Rounded corners.
