Block: Featured Products

From Posstack.com Documentation
Revision as of 03:37, 27 May 2024 by An (talk | contribs)


This content block allows you to easily create an attractive product slider for custom chosen products or an entire collection.

Ecb-featured-products.png

See Featured Products examples here, here, and here.

From the Shopify theme editor, click on Featured Products on the sidebar to view the details of settings.

Block featured products.png

If you’re new to our Easy Content Builder, please refer to section Add App Sections and Add ECB Blocks for more details on how to create and edit a section or a block.

Section settings

Section settings Description
Source Select the source of products that you want to feature:
  • Select products manually: show only products that you choose individually.
  • Products in collection: show all products that are in a specific collection.
Select Products Use this setting when you set Source to Select products manually. Use the Search bar to search for a specific product term or select the products available in the list.
Select Collection Use this setting when you set Source to Products in collection. Use the Search bar to search for a specific collection term or select the product collection available in the list.
Limit Products The maximum number of products that you can feature in the Featured Product section.
Card Style Create layout boxes for each product item. Emphasize an item with a primary card style.
Card Size Decrease or increase the padding of the card body.
Box Shadow Decrease or increase the box shadows of the card.
Text Alignment Align the Products’ title and price to the left, right, or center.
Add to Cart button
  • Hide: hide the Add to Cart button.
  • Simple: show the standard Add to Cart button
  • Ajax: This feature is available for the Pro plan only. If enabled, it allows customers to add products to their cart without leaving the current page. Once a product is added to the cart, the drawer cart will slide out with the product already in it.

Note: To use the Ajax Add to Cart feature, you must enable the Cart type 'Drawer' under your theme. Learn how to enable the Drawer type here.

Show Description Show or hide descriptions of products/collections.
Description Length Keep your descriptions long enough that they're sufficiently descriptive. The "optimal" length will vary depending on your specific situation.
Image Width Set the width (in pixel) of the collection’s featured image.
Image Height Set the width (in pixel) of the collection’s  featured image.
Image Crop Cut out a part of the image: Top, Left, Bottom, Right, Center.
(Items per row) Item Width on Mobile Define the width of the product card.
  • 1/2: The item takes up halves of its parent container.
  • 2/3: The item takes up two-thirds of its parent container.
  • 3/4: The item takes up three-fourths of its parent container.
(Items per row) Item Width on Desktop Item width on desktop:
  • 1/1: Fills 100% of the available width
  • 1/2: The item takes up halves of its parent container.
  • 1/3: The item takes up a third of its parent container.
  • 1/4: The item takes up a fourth of its parent container.
  • 1/5: The item takes up a fifth of its parent container.  
  • 2/3: The item takes up two-thirds of its parent container.
  • 3/4: The item takes up three-fourths of its parent container.
  • 4/5: The item takes up a fourth-fifths of its parent container.
Gap Set the gap between items.
Slider settings - Show Slider Arrows Show or hide the slider arrows on the Desktop. The slider arrows are hidden on mobile by default.
Arrows Outside Place arrows outside of a slider.
Slider settings - Auto Play Change slides of products after a specified interval (in milliseconds). Enter 0 to disable.
Slider Set To loop through a set of slides instead of single items.
Animate On Scroll It lets you apply different types of animation to elements within each section as you scroll down the page. Learn more about scrolling animations here.
Margin Set the vertical spacing between elements.

Enable Ajax Add to Cart

Note: Ajax Add to Cart is only available for the Pro plan.

Step 1: Enable the Drawer cart type

  • From your Shopify admin, click Online Store > Themes.
  • Find your current theme, and then click Customize.
  • Click Theme settings (the Gear icon)
  • Navigate to the Carts and set the Cart Type to Drawer.
Dawn theme cart type.jpg

Step 2: Navigate to the Featured Products/Collections configuration under Easy Content Builder and set the Add To Cart button to Ajax (Pro):

Ecb-ajax-atc-config2.jpg

Add Related Product section using Dynamic sources

Besides the default option - Select products manually mentioned in Part 1 above, you can also display the Related Products using Dynamic sources.

NOTE: Adding Related Products using the Dynamic sources best fits when you want to apply the same template to many products, and each product comes with its specific (dynamic) list of Related Products.
Info: Dynamic sources link the product data as a metafield to section input settings, which lets you add metafields to pages right from the theme editor. Shopify offers different types of metafields to add custom data to a specific part of your Shopify store. Learn more here.
Step 1: Create a metafield definition for the Related Products
  • From your Shopify admin, click Settings > Custom Data
  • Click Products > click Add definition
  • In the Product Metafield definition form, assign a namespace (the group that your metafield will belong to) and a key (the specific metafield name) as follows:
  • Name: Related products
  • Namespace and key: custom.related_products
  • Description: (optional)
  • Select type > Product, make sure you enable List of Product.

Shopify Metafield definition

Step 2: Add value to the metafield
  • From your Shopify admin > click Products > click the Product you want to add Related Product section.
  • Scroll down to the Metafield section > click Related Products field to select the products you want to display as Related Product: Metafield values.png
Step 3: Link the product metafields to your template
  • From your Shopify admin, click Apps > Easy Content Builder
  • Click Manage Templates > find the template of the product you want to edit, then click Customize
  • Navigate to the section you want to add the Related Products.
    • For example: you add Related Products to the core Product section, simply click Add block > click Featured Products: Featured block.png
    • Open the Featured Products section you’ve just created > click the connect dynamic source icon next to the Select Products field > click Related Products > then click Save to apply the changes to the storefront.  Link metafield to template.png
    • Once you assign the related products using dynamic sources, you can edit and change the products your way through the Theme Editor. Configure related products.png

Display a custom Product description

Ecb-metafield-custom-desc.jpg

You can choose to display or conceal the product description in a product carousel using the Featured Products section. If you want to use a distinct product description instead of the default product description snippet on the product page, follow these guidelines:

Step 1: Create a new metafield definition for the custom product description
  • From your Shopify admin, click Settings > Custom Data
Ecb metafield def 1 cust desc.jpg
  • Click Products > click Add definition
Ecb metafield def 2 cust desc.jpg
  • In the Product Metafield definition form, assign a namespace (the group that your metafield will belong to) and a key (the specific metafield name) as follows:
  • Name: Short description
  • Namespace and key: custom.short_description
  • Description: (optional)
  • Select type > Product, and make sure you enable Multi-line text.
Ecb metafield def 3 cust desc.jpg
Step 2: Add value to the metafield
  • From your Shopify admin > click Products > click the Product you want to add custom short description.
  • Scroll down to the Metafields section > click the Short description field to enter the short description you want to display in the Featured Products/Collections carousel.
Ecb metafield 4 cust desc.jpg
Step 3: Enable the "Show Description" setting
  • From your Shopify admin, click Apps > Easy Content Builder
  • Click Manage Templates > find the template you want to edit, then click Customize.
  • From the Theme Editor, open the Featured Products/Collections section you wish to edit.
  • Enable the Show Description setting.

The Featured Products/Collections carousel will automatically show the short description for any product with a Short Description metafield with a value. Otherwise, it will show the default product description.

Add other content blocks

You can add many content blocks to a section you've created. These content blocks will be displayed in different positions within the section, depending on the Desktop/Mobile Layouts you configure.

Ecb-block-v2.jpg

See all content blocks available that you can add to a section.