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

Note: Ensure your products are set up in Shopify before starting.

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.

Note: You can change the product by going to Product Source.

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.

Note: Changes to the product name must be made in Shopify Admin.

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.

Note: Any content edits need to be made in Shopify.

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.

Note: The Product Variants element in GemPages provides different display options, such as color swatches for selecting product colors or drop-down menus for product options. 

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.

Pro Tip: Adjust the button’s color, text, and size. Make sure the button stands out by using a color that contrasts with the rest of your page design.

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.