Product Layout

Create product layout

Step 1: Go to Theme > Customize

Step 2: Go to Products > Create a template

Only Shopify 2.0 has this feature, in version 1.0 - there is just default product template

Step 3: Choose the name for this layout & hit Create template

Step 4: On the left hand, just hit the product pages

Step 5: General settings & Product information

In this section, you can change your product layout style. About the Container type, there are 3 types for it:
    Full width
    Default: follow container max-width in Layout settings (Theme settings > Layout settings)
    Container box: follow container width in Layout settings
You also can set to show/hide tags, product vendor, SKU, categories, reviews count in Product Information

Step 6: In Product Form & Addons

    In product form, you can choose to
      Show quantity selector: allow customer buy more than 1 item
      Enable dynamic checkout: show buy now button
      Hide add to cart button
    In Addons, you are able to show
      Add to wishlist button
      Add to compare button
      Add a question button
      Social share

Step 7: Visitor count

    Change the message in the first box
    Insert the range number you want to show
    Time you want to show the message again

Step 8: Sticky add to cart

    Show/hide sticky add to cart
    Show/hide wishlist button
    Show/hide compare button

Other blocks

Step 1: Add new blocks

There are: shipping information, Trust badge & Collapsible tab
Note In version 1.0 - shipping information, trust badge are in the products section after step 7 . Collapsible tab is not visible in version 1.0
    Shipping information
      Show/hide delivery estimation
      Change delivery text
      The estimated time
      Show/hide shipping text & change the text in the box below
    Trust badge
      Heading/text to show the message
      Upload the image
      Choose image width
It must look like this
    Collapsible tab
You can as some collapsible tab to generate more information, there are heading & content section
It may look like this:

Product tabs

    Add Custom content to add new tabs such as Product description, shipping information, FAQs, etc. (HTML is allowed)
    Add Custom Liquid if you want to use Liquid instead of just HTML
    Add Product reviews to show all customers' reviews
    You also can change the background color for this section

Product recommendation

You can change something below:

    Container type
    Heading (text
    Number of products
    Products per row
    Column gap
    Hide/show slider
You may ask which products will be shown in this section, you should read this doc to know about Shopify's mechanism. If you want to choose a specific collections to show you can check the instruction below

Smart product recommendations

You also can add a featured collection if you want to use it for product recommendations. Noted: Just apply for Shopify 2.0 (Online Store 2.0)
Step 1: Add section > Featured collection
Step 2: Change text
    Heading
    Subheading
    Description
    Text alignment
General settings
    Container type
    Background color
    Select collection
Grid settings
    Number of products
    Products per row
    Column gap
Product card settings
    Design layout
    Image aspect ratio
    Show/hide vendors
Slider settings
    Enable/disable slider
    Show/hide pagination
    Show/hide navigation
Button
    Button type (when the slider is disable, Load more products option will work)
    Text on button (if you want to hide button, just leave it blank)
    Button style
    Button size
Infinite loading
Slider should be disabled to use this feature. Number of products need to be bigger than number of product to show.
Mobile settings
    Choose horizontal scrollbar or grid layout
    Column gap

Other sections

There are some other sections as below:
    Blog posts: where the latest posts are shown, you can choose the number of posts, image ratio
    Press: Some testimonials or appreciations from trusted brands
    Featured promotion: where you tell customers about your main
    Instagram: change heading, ubheading, background color, layout type, etc.
    Product tabs: you can show a list of product in different tabs. You can add more tabs
    Video: add video to product page
    Image cards: add more banners for product pages
    Collection list: sometimes you have some collections and want to show them, you can choose this section
Last modified 1mo ago