Lute Vibrant Template Case - Product

Overview

Default product template controls the features, layout, and settings for the product page. Merchants use the product page (also known as a PDP or product details page) to highlight the features and benefits of each product. Customers use the features on the product page to learn about the product and add their preferred options to the cart.

Guidelines

Customize section

Steps:
  1. From your Shopify admin, go to Online Store > Themes.
  2. Find Lute theme that you want to edit, and then click Customize.
  3. You need to open up any product, from inside the theme editor area, or select the product page from the dropdown at the top.
Note:All settings here will be applied to all products, not just the one you are on. If you are looking to have different sections on different products.

Section settings

By default, product pages have a Page header section, a Product information section, an Multirow section, a Product recommendations section and a Recently viewed products section.

Page header section

Setting Value
Section width Full width
Show top outline Unchecked
Show bottom outline Checked

Product information section

Setting Value
Section width Full with
Show top outline Unchecked
Show bottom outline Unchecked
App wrapper position Middle right
Make ‘Middle right’ above ‘Middle left’. Visible on mobile. Unchecked

Blocks

Gallery block
Setting Value
Position Top
MEDIA  
Image ratio Adapt to image
Image fit container Checked
Enable zoom Checked
Show thumbnails Checked
Media centered Checked
Media width on desktop 25%
Media width on mobile 100%
Product rating block
Setting Value
Position Middle left
Price block
Setting Value
Position Middle left
PRICE  
Size Small
Variant picker block
Setting Value
Position Middle left
Picker type Color image swatch and button
Quantity selector block
Setting Value
Position Middle left
Show inventory quantity Checked
Inventory quantity threshold 18
Buy buttons block
Setting Value
Position Middle left
Show dynamic checkout buttons Checked
Show recipient information form for gift card products Unhecked
Show local pickup availability Checked
Share block
Setting Description
Position Middle left
Additional information block

About the item

Setting Value
Position Middle right
Scheme Collapse
Expand collapse Unchecked
Heading About the item
Image Select a image
Content Select a metafield
Additional information block

Information

Setting Value
Position Middle right
Scheme Collapse
Expand collapse Unchecked
Heading Information
Image Select a image
Content Select a metafield
Tabs information
Setting Value
Position Bottom
Show description tab Checked
Tab  
Heading Information
Content Select a metafield
Tab  
Heading Shipping and Payment
Content from page Select a page
Tab  
Heading FAQs
Content from page Select a page

Section settings

Overview

You can add a section that contains multiple rows each with an image, text, and an optional button. Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

You can also display metaobjects content through dynamic sources. To display metaobjects entries, you need to build a metaobject, create entries, and ensure the metaobject has storefront access before you can use them in multirow sections.

Section settings

Setting Value
Section width Full width
Show top outline Unchecked
Show bottom outline Unchecked
Color scheme Background
Image position Alternate from left
Text alignment Left
Heading size Large
Button style Secondary
SECTION SPACING ADJUSTMENT  
Top 0
Bottom 0

Overview

Based on the product currently being viewed, this section displays similar products, or products that are frequently bought together with this product.

Section settings

Setting Value
Section width Full width
Show top outline Unchecked
Show bottom outline Checked
Color scheme Background
Layout Carousel
Section header  
Heading You may also like
Heading alignment Center
Heading size Medium
GRID  
Maximum products to show 8
Number of columns on desktop 4
Number of columns on mobile 2
PRODUCT CARD  
Show product info Checked
SECTION SPACING ADJUSTMENT  
Top 0
Bottom 0

Overview

Show the customer recently viewed products.

Section settings

Setting Value
Section width Full width
Show top outline Unchecked
Show bottom outline Checked
Color scheme Background
Layout Carousel
Section header  
Heading Recently viewed
Heading alignment Left
Heading size Medium
GRID  
Maximum products to show 8
Number of columns on desktop 4
Number of columns on mobile 2
PRODUCT CARD  
Show product info Checked
SECTION SPACING ADJUSTMENT  
Top 0
Bottom 0

Recently viewed