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.
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.
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.
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.