Product Details Page Template
LearningCart makes it easy for you to customize the buyer’s user experience through editable product details page templates.
In the left-hand navigation, click Storefront. This will open a drop-down menu. Click products.
When you first set up the product, you had the opportunity to choose the Editor Type. This walk-through will work with products that were built using the content builder editor type.
Locate the product you will be working with and click edit. This will bring you to the product details page. Click Launch Content Builder at the bottom of the page.
You are now in the editable version of the front-end of your website. Keep in mind that global edits such as changes to the header, footer, font type, and brand colors, can be made at the template level of the website.
You can edit any copy by simply clicking on the copy you wish you edit and typing directly into the section. You will notice a formatting banner has appeared at the top of your screen. Here you will find your basic formatting tools such as font styles, colors, alignment, size, and hyperlinking, as well as more advanced tools such as word counter, special characters, and a search and find feature. This is also where you will find the undo and redo buttons for editing the site.
The variable [AddToCart] is included by default and will show all the associated product information such as date and time, price, and seat quantity and an add to cart button.
If you wish to change your product image, click on the image. A small toolbar will appear. Click on the change image icon. Here you can choose to use an image you have already uploaded into the system or choose a file from your computer to upload. You can adjust the size of your image by clicking and holding the black dots on the corners of your image.
For more control over specific sizing and details, click the three dots in the toolbar at the bottom of the image and go to settings. Here you can alter your image box, adjust spacing around your image, and apply various customizations and effects. When finished, click the close icon in the top right corner.
Your base template has been populated with example sections to work from. If you wish to add additional sections such as testimonials about this product, go to the top left corner of your screen and click the add icon. Here you will find various templates and wireframes to build from. For this example, we will navigate to the quick start options, click ‘more’, and then click ‘quotes’ to filter for testimonial sections. Click on the section you would like to add.
Click on the wrench icon in the top right corner of your section to move this section up or down, adjust the height, or add a scroll icon.
When you hover over the bottom of your section, a wrench icon will appear. Here you can adjust the content box size, content location, text styles, and image settings. To change the background image, click the image icon at the bottom of the section.
To remove a section, simply click on the section you wish to remove and click the delete icon in the orange box on the top right corner.
Once you have all your pieces where you want them, click ‘save’. Then click ‘exit’. We can review our edits by clicking on the product URL just above the launch content builder button.
Here you will see the [AddtoCart] information populated by the variable in the template.
See something you need to adjust? Simply click the edit button and you will be directed back to the edit product screen. Here you can edit details about your product or launch the content builder to make edits to the product details website page.
