Product Page

Modified on Fri, 14 Feb at 3:55 PM

TABLE OF CONTENTS




For the Product tutorial, Shopify has made a very intuitive, in-depth tutorial here.

In this instruction, we will go into details about our themes customization tools.

I. PRODUCT TEMPLATE

Tick to enable

  • Show dynamic checkout button
  • Show product vendor
  • Product code - SKU


1. Metafield



Metafields allow you to attach metadata, which is additional information to a store's resources. Please install the ACF: Metafields Custom Fields app from Shopify app store.

- Short description: this needs to be added values in the metafields by using ACF app 


- Countdown Timer: this needs to be added values in the metafields by using ACF app to enable this feature
Open the ACF: Metafields Custom Fields app, go to Product and choose the product you want to add the countdown timer 



2. Variant picker


Status when variant sold out: Show/ Hide


3. Inventory quantity


- Tick to Show product quantity

- Drag to Show low stock message when quantity is below threshold.



4. Notification Subscribe


- Tick to enable the notification (Customers can subscribe to receive notifications when products are back (See the settings when the product is out of stock)

# Notify form

Enter the text into the corresponding boxes below:

  • Label
  • Email placeholder
  • Button submit


# Successful message 

Enter the text into the corresponding boxes below:

  • Heading
  • Subheading


5. Product description tabs

Standard tab are created base on your Product description content. If you'd like unique set of tabs for each product you should use heading 5 or metafields function 

Style: choose style to show the product description tabs 



6. Sidebar
To customize your sidebar content, please click Add block

Style: Left Sidebar/ Right Sidebar/ None

7. Shiping and delivery dates
Go to Theme Settings placed at the bottom left corner of the page > Select the Product Page > Scroll down until see the Shipping and delivery dates.


II. BLOCK SETTINGS

1. Sidebar- Menu

- Heading: enter the heading for the block

- Menu item: select a menu to display on the sidebar



2. Sidebar- Product

- Heading: enter the heading for the block

- Menu item: select a menu to display on the sidebar

- Limit: the maximum products will displayed in this block

3. Sidebar- Service

There are 5 block items available in Block item, you can enable the  that you want.
To edit each block item, you can modify these options:

- Tick to enable the widget

- SVG icon: enter the icon code in SVG

- Add Text and Subtext


 

4. Tabs- Static page

Enter the text into the corresponding box and select a page to display

III. PRODUCT EXTENDED TEMPLATE

There's another product template you can use to modify your product page - The Product Extended Template. The feature helps customers can add several products in this section at one click 

Clicking on the Search bar > select Product > then select Extended (illustrated in the image)



It has all the same functions as the product main template but has one more section displaying under. That is Bundle Product



1. How to setup Bundle product metafield?

Step 1: Open ACF: Metafields Custom Fields app. On the Homepage , scroll down until you see  "Advacnced Custom Fields", click on "Products"


Step 2: In the Product fields, click "Add Group Field". A new window will appear, where you need to fill in the information for each field as shown in the screenshot below. Once done, click "Done".



Step 3: In the "Reference to" area, select "Product" and drag it under the Bundle product group field that you have just created. After that, a small window will appear. Please fill in the field with the information as shown in the screenshot below.




Step 4:  Add one more Product field. Follow the same process as in Step 3 to add the second Product field, but fill in the field as shown in the screenshot below. 



After finishing 4 steps, please remeber to save your work.


2. How to edit the content on the Bundle Product?

 

Step 1: Please access the ACF: Metafields Custom Fields app > Go to Products section > Pick a product that you want to edit the bundle product



Step 2: When you've already accessed to the product editor, scroll down and see the bundle product field. Click on the Product Selections to choose a product to add it to the list



Step 3: After adding the bundle products, you need go to Shopify Admin to adjust Theme template of the main product to "extended" templated to see its bundle products, because Bundle products only appear on Extended product template, it does not show on default product template.


Step 4: Please make sure that the checkbox "Bundle products" in the Extended template is enabled. Finally, click on the Save button at the bottom right corner when you finish editing.




Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article