Magento 2. Force product page

Back

Layout

Argento Force uses a 1column layout for the product page. Follow our customization guide to learn how to change Magento 2 layout. You can also use Product page Builder in Theme Editor to update the Argento Force product page layout.

Add to Cart Form

The main part of the product page is the “Add to cart” form. You can see it on the top of the page in Argento Force. “Add to cart” consists of the product images gallery (left side) and form itself (right side).

The product images gallery is powered by the Lightbox Pro module. With the module, it is possible to change thumbnail position and size, enable zoom, and change image popup type.

For add to cart form we recommend:

• for product “Size” attribute set “Catalog Input Type for Store Owner” as Dropdown
• for product “Color” attribute set “Catalog Input Type for Store Owner” as Visual Swatch and “Use Product Image for Swatch if Possible” as Yes

Please pay attention to the image in the “Add to Cart Form” paragraph. There is a link to “View Sizing Chart”. It opens a sizing chart popup. The “View Sizing Chart” link appears near the size option on every product page. We added it via CMS Block.

Block identifier is sizing_chart. If you want to disable the sizing chart, please disable CMS Block via Magento Admin.

If you need to modify content of the popup, you have to edit content inside

 <div data-role="sizing-chart" ...>...</div>

Note: remember to disable the WYSIWYG editor before everything.

At the bottom of the content with JavaScript, it is possible to rename the link or add it in another place there. It requires basic JavaScript knowledge. Or you can contact our support team. We'll be glad to help you.

Here you can see CMS Block original content for sizing chart

<div data-role="sizing-chart" style="display: none;">
    <h3 style="margin: -10px 0 20px;">Sizing Charts</h3>
    <h4>Women</h4>
    <table class="table-grid table-striped">
        <thead>
            <tr>
                <th>Size</th>
                <th>XS</th>
                <th>S</th>
                <th>S</th>
                <th>M</th>
                <th>M</th>
                <th>L</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>EU</td>
                <td>32</td>
                <td>34</td>
                <td>36</td>
                <td>38</td>
                <td>40</td>
                <td>42</td>
            </tr>
            <tr>
                <td>UK</td>
                <td>4</td>
                <td>6</td>
                <td>8</td>
                <td>10</td>
                <td>12</td>
                <td>14</td>
            </tr>
            <tr>
                <td>US</td>
                <td>0</td>
                <td>2</td>
                <td>4</td>
                <td>6</td>
                <td>8</td>
                <td>10</td>
            </tr>
            <tr>
                <td>Bust</td>
                <td>79.5cm / 31"</td>
                <td>82cm / 32"</td>
                <td>84.5cm / 33"</td>
                <td>89.5cm / 35"</td>
                <td>94.5cm / 37"</td>
                <td>99.5cm / 39"</td>
            </tr>
            <tr>
                <td>Waist</td>
                <td>61.5cm / 24"</td>
                <td>64cm / 25"</td>
                <td>66.5cm / 26"</td>
                <td>71.5cm / 28"</td>
                <td>76.5cm / 30"</td>
                <td>81.5cm / 32"</td>
            </tr>
            <tr>
                <td>Hip</td>
                <td>86.5cm / 34"</td>
                <td>89cm / 35"</td>
                <td>91.5cm / 36"</td>
                <td>96.5cm / 38"</td>
                <td>101.5cm / 40"</td>
                <td>106.5cm / 42"</td>
            </tr>
        </tbody>
    </table>
    <h4>Men</h4>
    <table class="table-grid table-striped">
        <thead>
            <tr>
                <th>Size</th>
                <th>XS</th>
                <th>S</th>
                <th>M</th>
                <th>L</th>
                <th>XL</th>
                <th>XXL</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>UK/US</td>
                <td>34</td>
                <td>36</td>
                <td>38</td>
                <td>40</td>
                <td>42</td>
                <td>44</td>
            </tr>
            <tr>
                <td>Neck</td>
                <td>37cm / 14.5"</td>
                <td>38cm /15"</td>
                <td>39.5cm / 15.5"</td>
                <td>41cm / 16"</td>
                <td>42cm / 16.5"</td>
                <td>43cm / 17"</td>
            </tr>
            <tr>
                <td>Chest</td>
                <td>86.5cm / 34"</td>
                <td>91.5cm / 36"</td>
                <td>96.5cm / 38"</td>
                <td>101.5cm / 40"</td>
                <td>106.5cm / 42"</td>
                <td>111.5cm / 44"</td>
            </tr>
            <tr>
                <td>Waist</td>
                <td>71.5cm / 28"</td>
                <td>76.5cm / 30"</td>
                <td>81.5cm / 32"</td>
                <td>86.5cm / 34"</td>
                <td>91.5cm / 36"</td>
                <td>96.5cm / 38"</td>
            </tr>
            <tr>
                <td>Seat</td>
                <td>90cm / 35.4"</td>
                <td>95cm / 37.4"</td>
                <td>100cm / 39.4"</td>
                <td>105cm / 41.3"</td>
                <td>110cm / 43.3"</td>
                <td>115cm / 45.3"</td>
            </tr>
        </tbody>
    </table>
</div>
<script type="text/javascript">
require([
    'Magento_Ui/js/lib/view/utils/async',
    'Magento_Ui/js/modal/modal',
    'mage/translate'
], function ($, modal) {
    'use strict';
    $.async('[data-role=swatch-options] .swatch-attribute.size .swatch-attribute-options', function (element) {
        var html = [
            '<div class="action-wrapper">',
                '<a href="#" data-action="view-sizing-chart">' +  $.mage.__('View sizing chart') + '</a>',
            '</div>'
        ].join('');
        $(element).addClass('with-link').append(html);
        $(element).find('option[value=0]').text($.mage.__('Select a Size'));
        modal({
                responsive: true,
                trigger: '[data-action=view-sizing-chart]',
                buttons: []
            },
            $('[data-role=sizing-chart]').show()
        );
    });
});
</script>

Quantity field

Qty field is powered by the Quantity Switcher module. By default, the qty field has a dropdown with predefined quantity numbers. You can change the dropdown with arrows. Visit the module page to learn more.

Note: for configurable products, the qty dropdown is empty until the user selects all of the product options.

Related products

There is a list of related products under the form. You can maintain that list by yourself in Magento Admin. Check how to do it at Magento Docs.

Sticky to cart button

Argento Force has enabled the sticky to cart feature. When the user scrolls down the product page, the “Add to cart” button sticks to the window’s top when the button’s original position is out of the viewport. We disabled Sticky to cart for mobile and devices with small screens.

Tabs

The next important part of the product page is product tabs. They located under the “Add to Cart” form. Product tabs powered by EasyTabs module. It's possible to rearrange, disable existing and create new tabs with this module. Visit the module page to learn more.

Magento creates some tabs for your store during Argento Force installation.

Details tab

This is the tab with the product description.

Argento Force theme has enabled the Photo in Description feature. It adds the product into the description automatically. To disable the feature you need to create a custom theme and set a target as an empty string in view.xml. Review the article about this feature.

More Info tab

This tab shows additional product attributes. Product attribute must have “Visible on Catalog Pages on Storefront” property, set to Yes. Review the article to know more.

Bought Together tab

It shows the “Frequently bought together” block of Sold Together module. Visit the module page to learn more.

Reviews tab

This tab shows product reviews and it is the default Magento functionality.

Questions tab

This is the product questions tab. It shows the “Product Questions” block of the AskIt module. Visit the module page to learn more.

Other tabs For downloadable products, there is a tab with samples. Its alians are samples.

Customers … Also Bought

At the bottom of the product page, there is a block where you can promote your other products. It is the “Customers Also Bought” by Sold Together module. You can configure the content of this block or show random products from the current category.