About Product List Element
The Product List Element is designed to display products from your Shopify collections dynamically. It ensures consistency and responsiveness across your store, regardless of the number of products displayed.
Common Use Cases
Create Product List Element
Step 1: Create a Collection on Shopify (Optional)
If you already have the desired collection, skip this step.
- Log in to Shopify. Go to your Shopify Admin Dashboard.
- Under the Products tab, select Collections. Click the “Create Collection” button at the top right of the page.
- Configure Collection type settings:
Manual Collection: Manually add products to the collection.
Automated Collection: Set conditions to automatically add matching products.
- Fill in other necessary information. Click “Save” to create your collection.
Step 2: Add Product List Element
Open the GemPages Editor. Locate the Product List Element in the Element Library.
Drag it into your desired section.
- Pick a Collection:
In the Product List settings panel, select the Shopify collection you want to display.
Under the Select Product List section, click Assign Collection.
Choose your desired collection and click Confirm to add it to the page.
Learn more about Product List Element settings here.
Step 3: Style the Product Element
Note: The Product List Element in GemPages ensures design consistency. Changes made to one product (e.g., font style, button color) will be automatically applied to all products in the list.
This feature guarantees a cohesive look, whether you’re displaying a static or dynamic number of products from a collection.
- Customize Product Elements:
Adjust the Product Title, Price, and Add to Cart Button to match your store’s branding.
- Add More Elements:
Enhance your product list by dragging additional elements, such as Product Badges, View More Button, and Estimated Shipping Time.
Step 4: Optimize for Mobile
Use the Mobile View in the GemPages editor to view the product list. Adjust spacing, font sizes, and button dimensions to suit mobile users.
- Create Responsive Layout:
On the desktop version, you may display 4 products per row for a grid-style layout.
For mobile, adjust the settings to display 2 products per row to ensure readability and usability on smaller screens.
