How to display your product with the Product Details section

This article will demonstrate how to use the Product Details section to show your products in EcomSolid.

The Product Details is an essential section, enabling you to showcase any products from Shopify to EcomSolid

 

 

Add the Product Details section to your page

Step 1: From the EcomSolid Dashboard, head to the Theme Editor or Page Editor.

Step 2:  Access the Library from the top bar of the Editor Page.

 

 

Next, navigate to Section > Product Details. Choose your preferred section and hit “Insert” to add it to your Editor.

 

 

Configure the Section settings

After that, you will find the add-on has been added to your Editor. Click on the add-on to start configuring the settings. 

General Settings

The default selection is “Auto,” which means the product will be randomly selected to display on the current Editor page. Hit “Pick a product” and choose one product from the list to see how it will be displayed.

 

 

Please be noted that if you pick a specific product at this point, only the data of that product will be shown on your live page. To enable the automatic data syncing feature, keep the default selection - Auto.

Background Banner: Select “Image” to add a background image for your Product Details section. Otherwise, select “Color”.

Background Color: Choose a color from the list or enter a hex color code for the background color of your Product Details section.

Click on “More General Settings,” you will see more options to customize your Product Details section, including: 

  • Display variants: Choose the variant showing first from the drop-down menu.
  • Sticky: Toggle on this option if you want your product’s images sticky when scrolling down.
  • Adjust the Margin/ Padding for the section.


 


Atoms

You will see a list of atoms included in the Product Details section at this point. Each atom represents one element of your section.  Hover over the atom, click on the Eye icon to hide/show the atom then.

 

 

To edit the setting of each element inside the Product Details section, click on each atom to reveal its configuration on the left sidebar. 

 

That's it! If you run into any problems when editing, please get in touch with our Customer Support via email or live chat.


Was this helpful?