Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

TABLE OF CONTENTS

Table of Contents

Summary

The top part of PDP consists of gallery and Buybox.

Demo

Info

Simple product: https://demo.magesuite.io/en/strive-shoulder-pack.html

Simple product out of stock: https://demo.magesuite.io/en/luma-analog-watch.html

Configurable product: https://demo.magesuite.io/en/artemis-running-short.html

Configurable product with some out of stock options: https://demo.magesuite.io/en/erika-running-short.html
Product with daily deal: https://demo.magesuite.io/en/zing-jump-rope.html

Bundle product: https://demo.magesuite.io/en/sprite-yoga-companion-kit.html

Product with variants: https://demo.magesuite.io/en/sprite-stasis-ball-75-cm-blue.html

Magesuite standard

Mobile layout

...

Desktop layout

...

List of components:

  1. Gallery - By default MageSuite uses Fotorama but the other option is to use a custom MageSuite gallery module: ProductSlideGallery (optional)

  2. Category

  3. Product name

  4. Reviews summary

  5. Price box

  6. Quantity switcher

  7. Add to cart button

  8. Stock information

  9. Optional popular indicator - Express delivery (3.4.5.Fast Shipping indicator )

  10. Optional positive indicator - (3.4.6. Expected delivery indicator )

  11. Popular indicator - optional (3.4.1. Popular Indicator )

  12. Related products in buybox - optional module Buybox related products (optional)

  13. Add to links (add to wishlist is visible by default, add to compare can be added in layout)

  14. USPs - hardcoded information about the most important shop feature (the same for all products)

Additionally, short description can be shown in the buybox

For configurable products, there are swatches displayed:

Swatches

Swatches can be displayed as a color box, image, text, or dropdown

...

Additional modules

  1. CmsProductBacklink The CMS Product Backlink feature allows referencing CMS Pages on the Product Detail page in case the product has been linked on the corresponding CMS Page. 

  2. DailyDeal The Daily Deal is a marketing tool that promotes a discount for a limited amount of products and for a limited amount of time.

  3. BackInStock (optional) It allows you to receive email notifications when a product is again in stock. Can be extended with Magesuite_PwaNotifications and Magesuite_BackInStockPwaNotifications

  4. Buybox related products (optional) This module allows adding related products to buybox

  5. FileAttachments (optional) Additional files can be added to a product and are displayed on the PDP page, from where a user can download them.

  6. ProductHighlights (optional) This module displays highlights (usually the short_description attribute) on PDP’s buybox.

  7. ProductSlideGallery (optional)

  8. ProductSymbols (optional) The module helps to display product symbols on PDP

  9. ProductVariants (optional) This module adds the possibility to configure and display variations of a given product.

  10. Review (optional) This module adds improvements to the built-in Magento 2 reviews functionality.

Live projects customizations

URL

Mobile

Desktop

https://www.haar-shop.ch/en/lagoom-jam-volume-gel.html

Image Modified

Sticky add to cart

Image Modified

https://www.krueger-dirndl.de/de/trachtenhemd-ryan-weiss-901401-0-0105

Image Modified

Customizations:

Image Modified

https://www.micro-scooter.com/ch_de/micro-mini-2-grow-deluxe-magic-led

Image Added

Image Added

Interesting styling choices.

Description (MageSuite feature but not displayed in the standard version)

Compare button (MageSuite feature but not displayed in the standard version)

https://shop.rieker.com/de-de/rieker-evolution-damen-pantoletten-light-summer-blue-w0802-10.html

Image Added

Image Added

https://www.titoloshop.com/eu_en/wmns-adidas-gazelle-indoor-ie7003.html

Image Added

Image Added

Customizations:

  • no gallery - just images one below another

  • sticky buybox

  • please remember that product details sections must be full content and sticky buybox must end above this section