Product View More Element

What is a Product View More button element?

Product View More button element in GemPages is designed as a button that redirects customers to an associated product detail page.

Let’s take the image below as an example. Product View More button element has been added to a Product list where multiple products within a collection are displayed with few fundamental details such as product images, and titles. The button will be in charge of driving traffic to a specific product that possibly boosts up your sales, or gives your customers more detailed information.

Configure the Settings tab for Product View More element

Drag and drop Product or Product list element on your page

Product Source

This feature allows you to manage the Product Source to display products on your page. You can manage it in the Product element. Please ensure that you have set up the necessary product information in your Shopify Admin beforehand, as the element will retrieve information from there. 

In order to create a new product, you can access Shopify Admin > Products, then click Add product. Besides, to create a new collection, go to Shopify Admin > Products > Collections and click Create collection. You can also refer to this useful article by Shopify for step-by-step instructions on creating a new collection.

When you access the Product element link, you can select among 3 product lists:

• Multiple products: You can pick multiple products to display at the same time on your page
• A collection: If you want to showcase items from a specific collection, please choose this option.
• Related products: You can choose to display related products under the same condition, such as: same collection, same vendor, same tags,…

For more details about the Product List element, refer to this comprehensive article to take the most advantages of it. 

Icon

With this feature, you can insert an icon to the Product View More button. Turn on the Icon feature, then hit “Choose Icon” to browse the icon library. 

After selecting your most favorite icon, adjust its position to the left or right. 

Open in

You can choose to allow customers to view product details either in a new tab or in the current tab after clicking the “Product View More” button. 

Size 

Adjust the Product View More button‘s size in terms of width, height and padding in pixels according to your preference.

States

You can now style the button if it is either hovered over or its normal state. In addition, adjust the button’s background and text color, border styles, corner and button shadow as needed. With the help of these settings, you may adapt the button’s visual appearance to suit your preferred style.

Text

Modify the text for your Product View More button with these factors: 

• Styles: Choose from the six heading styles and three paragraph styles that have already been pre-defined.
• Font: Select the font that you want to use for this text. You can use the instructions provided to add a custom font in Editor v7 if you would like to use a typeface that isn’t mentioned.
• Size: To change the font’s size, enter a number in pixels.
• Color: You can change the text’s color to suit your tastes.

For more information on the Text element, kindly refer to this extensive article. 

Configure the Advanced tab for Product View More element

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.

You can also find more useful tips and video tutorials at GemPages Academy.