Design a Product Detail Section with Product Elements

When designing a product detail section for your Shopify store, GemPages provides two main options:

1. Using a pre-designed product detail section from the template library.
2. Using the Product elements

This article focuses on the key elements that make up a product detail section and how to create one using GemPages product elements.

What is the Product element?

The Product element in GemPages is a versatile tool that pulls real-time product data from your Shopify store and allows you to customize how it is displayed.

Product elements can only be used within the product module in GemPages which works as a product display container.

Product Module includes various Child Product Elements to enhance your online store’s functionality.

These child elements include:

• Main Elements: This is the primary element that dynamically loads product data from Shopify (Image, Title, Description, Price, Variant, Add to Cart Button).
• Other Elements: SKU, Product Badge, Conversion Boosters.

Product detail section breakdown and How to design it with GemPages?

Step 1: Open the GemPages Editor on your Shopify store.

Select the product page you want to edit or create a new page from scratch.

Step 2: In the left-hand sidebar of the GemPages editor, locate the Product element.

Step 3: Choose a product module. This action will automatically sync your product details (title, price, description, variants, quantity, and buttons) from Shopify.

Here’s how to add more and optimize these elements in your product detail section:

1. Product Title

The title will display by default when you add the element. If it’s removed or needs repositioning, drag and drop it from the sidebar.

2. Product Images and Thumbnails (Image, Video, Video Banner,…)

Product images from Shopify are auto-loaded. 

If removed or if additional image placement is desired, drag the Product Image element from the sidebar to a new position. This element supports product images, video, and video banners to help showcase your product visually.

3. Product Badge

Product badges, like “Sale 50% Off” or “Limited Edition,” help highlight special attributes of your product.

In the Product Element, drag and drop the Product Badge element into the GemPages editor.

Choose from different badge styles and colors to suit your theme.

4. Product SKU

Displaying the SKU (Stock Keeping Unit) helps both customers and store managers track products efficiently.

Search for the Product SKU in the product element. Drag and drop it into the GemPages editor.

5. Product Description

Product descriptions appear by default but can be moved. 

Drag the Product Description element from the sidebar if adjustments are needed.

For additional product-specific content not suitable for the general description field, you can use Product Metafields combined with the Dynamic Text element in GemPages.

6. Product Price

The price appears by default and is pulled directly from Shopify.

Reposition the Product Price element by dragging it to your preferred spot if needed.

7. Product Quantity

Display the quantity selector, allowing customers to choose the number of items they want to purchase.

If you reposition or remove the Product Quantity element, drag it back from the sidebar to where you’d like it displayed.

8. Product Options/Variants

Product variants such as color, size, and material load automatically.

To adjust the display or change the position of product options, drag the Product Variants element to your desired location. You can customize variant styles with swatches for color options or dropdowns for easier selection.

Variants handle attributes like color, size, and material (if defined as Shopify variants). However, for extra information that doesn’t affect SKU (like care instructions), use Shopify Product Metafields and display them via Dynamic Text or Custom Blocks inside your product module.

9. Add to Cart/Buy Now Button

This button is included by default, and you can customize its color, text, and size to make it stand out on the page.

Drag the button from the sidebar if it’s removed or repositioned. Customize the button’s behavior to either redirect to checkout, open the cart drawer, or stay on the same page.

10. Conversion Boosters

Adding elements that create urgency or provide social proof can significantly boost conversions.

• GemPages allows you to add Countdown Timers or Stock Counters
• You can also integrate Trust Badges or Customer Reviews from third-party apps. For detailed instructions on integrating a third-party app with GemPages, refer to this article.

Step 4: Once you’re satisfied with your design, save your progress and publish your changes.

FAQs

• Can I use one product page template for different products with different information?

Yes. You can create a universal product page template using the Product element and pull unique product-specific content using Shopify Product Metafields. This allows each product to display its own dynamic content even when sharing the same page design.

• Can I edit the product title or description directly inside GemPages?

No. The Product Title and Product Description elements automatically pull data from Shopify Admin. If you need to change these, you must edit them directly in your Shopify Admin.

• Are product metafields supported in all GemPages plans?

Product Metafields are supported in GemPages V7. However, ensure that your plan includes Dynamic Text functionality to fully utilize this feature.