Troubleshooting - Issues with description on your store
When adding content from other sources to the description of your products and collections, you may encounter some errors on the storefront, such as:
Distorted or skewed description interface
Images not showing on the description
Partially video cutoff on mobile
Below is a list of possible errors, along with additional information about how to quickly resolve common interface errors and successfully create new product, campaign, or collection.
A. Distorted or skewed description interface
B. Images not showing on the description
C. Partially video cutoff on mobile
Examples:
3 consecutive separators are displayed between content sections in the description, instead of 1.
Product description is displayed as a pop-up instead of on the right or below the product form.
Reason: The description was copied from another site and contains excessive HTML and CSS codes.
Solution: There are 2 methods to solve this issue.
Method 01 (recommended for users with not much experience with HTML & CSS): To avoid errors, please only copy and paste plain text into the description and reformat to your preference using our description editor. To convert text to plain text, go to editpad.org and follow these steps:
Copy the text you want for the description.
Open editpad.org and paste the copied text in the input field.
Editpad.org will automatically convert your text to plain text. Copy this plain text and paste it into the description editor in your ShopBase admin.
Method 02 (recommended for users with prior experience with HTML & CSS): You can remove excessive code in the description editor using the following steps:
For ShopBase/PlusBase products, go to Products > All products and click on the product you want to edit description of.
If you are using PrintBase, go to Campaigns > All campaigns and click on the campaign you want to edit description of.
If you want to edit a collection, go to Products > Collection and click on the collection you want to edit description of.
In Description, click the Source code </> to open the Source Code editor.
In Source Code, find strings with the format: class="......" and remove the extra strings. (For example: class="product_collapse py12 brdr-bottom-1", class="product__description-html").
Example: This original code contains extra class="......" strings:
Then, you will need to remove the extra class="..." in the code. Your revised code should look like this:
Click Save to save your source code.
Click Save changes to save your product after editing the description. Then, you can click View to double check the description interface on the storefront.
Examples:
Reason: Because the image is being saved on an external system, it will take longer to load. Furthermore, because of the reliance on external systems, image quality will be unstable, and images may not be loaded in some circumstances.
Solution: To ensure the image loading speed on your storefront and provide a better viewing and buying experience to your customers, it is recommended that you re-upload the images to ShopBase in the following 3 steps:
For ShopBase/PlusBase products, go to Products > All products and click on the product you want to edit description of.
If you are using PrintBase, go to Campaigns > All campaigns and click on the campaign you want to edit description of.
If you want to edit a collection, go to Products > Collection and click on the collection you want to edit description of.
In Description, remove the broken image.
Click on the position where you want to insert the image and click on the Insert/Edit Image button.
In the Insert/Edit Image dialog, upload the image from your device and click on Save.
Click Save changes to save your product after editing the description. Then, you can click View to double check the description interface on the storefront.
If your issue is not listed above, or none of the steps above resolve your issue, please contact our Customer Support team for further assistance.
Example:
Reason: Videos of different sizes may not respond well on mobile.
Solution: You will need to edit the source code in your product page and the Preference section by following the steps below:
For ShopBase/PlusBase products, go to Products > All products and click on the product you want to edit description of.
If you are using PrintBase, go to Campaigns > All campaigns and click on the campaign you want to edit description of.
If you want to edit a collection, go to Products > Collection and click on the collection you want to edit description of.
In Description, click the Source code </> to open the Source Code editor.
In Source Code, navigate to the following code:
Replace it with the following code:
The width and height of the video in your code can vary.
For example, if your code is <p><iframe src="https://www.youtube.com/embed/Sk1y14kX9sc?ab_channel=YUMMY" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></p>, replace it with <p class="custom-description-mobile-video"><iframe src="https://www.youtube.com/embed/Sk1y14kX9sc?ab_channel=YUMMY" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></p>
Click Save to save your source code.
Click Save changes to save your product after editing the description.
Go to Online store > Preferences.
In the Additional scripts, Head section, add the following style tag.
Click Save to finish.
Overview of Products
Overview of Campaign in PrintBase & ShopBase
Distorted or skewed description interface
Images not showing on the description
Partially video cutoff on mobile
Below is a list of possible errors, along with additional information about how to quickly resolve common interface errors and successfully create new product, campaign, or collection.
In this article
A. Distorted or skewed description interface
B. Images not showing on the description
C. Partially video cutoff on mobile
A. Distorted or skewed description interface
Examples:
3 consecutive separators are displayed between content sections in the description, instead of 1.
Product description is displayed as a pop-up instead of on the right or below the product form.
Reason: The description was copied from another site and contains excessive HTML and CSS codes.
Solution: There are 2 methods to solve this issue.
Method 01 (recommended for users with not much experience with HTML & CSS): To avoid errors, please only copy and paste plain text into the description and reformat to your preference using our description editor. To convert text to plain text, go to editpad.org and follow these steps:
Copy the text you want for the description.
Open editpad.org and paste the copied text in the input field.
Editpad.org will automatically convert your text to plain text. Copy this plain text and paste it into the description editor in your ShopBase admin.
Method 02 (recommended for users with prior experience with HTML & CSS): You can remove excessive code in the description editor using the following steps:
For ShopBase/PlusBase products, go to Products > All products and click on the product you want to edit description of.
If you are using PrintBase, go to Campaigns > All campaigns and click on the campaign you want to edit description of.
If you want to edit a collection, go to Products > Collection and click on the collection you want to edit description of.
In Description, click the Source code </> to open the Source Code editor.
In Source Code, find strings with the format: class="......" and remove the extra strings. (For example: class="product_collapse py12 brdr-bottom-1", class="product__description-html").
Example: This original code contains extra class="......" strings:
<div class="product_collapse py12 brdr-bottom-1">
<div class="toggle_content mt12">
<div class="product__description-html">
<div><img
src="https://img.btdmp.com/files/10051315/2019/11/26/1574762616068a6695e5.png"
alt=""/></div>Then, you will need to remove the extra class="..." in the code. Your revised code should look like this:
<div>
<div>
<div>
<div><img
src="https://img.btdmp.com/files/10051315/2019/11/26/1574762616068a6695e5.png"
alt=""/></div>Click Save to save your source code.
Click Save changes to save your product after editing the description. Then, you can click View to double check the description interface on the storefront.
B. Images not showing on the description
Examples:
Reason: Because the image is being saved on an external system, it will take longer to load. Furthermore, because of the reliance on external systems, image quality will be unstable, and images may not be loaded in some circumstances.
Solution: To ensure the image loading speed on your storefront and provide a better viewing and buying experience to your customers, it is recommended that you re-upload the images to ShopBase in the following 3 steps:
For ShopBase/PlusBase products, go to Products > All products and click on the product you want to edit description of.
If you are using PrintBase, go to Campaigns > All campaigns and click on the campaign you want to edit description of.
If you want to edit a collection, go to Products > Collection and click on the collection you want to edit description of.
In Description, remove the broken image.
Click on the position where you want to insert the image and click on the Insert/Edit Image button.
In the Insert/Edit Image dialog, upload the image from your device and click on Save.
Click Save changes to save your product after editing the description. Then, you can click View to double check the description interface on the storefront.
If your issue is not listed above, or none of the steps above resolve your issue, please contact our Customer Support team for further assistance.
C. Partially video cutoff on mobile
Example:
Reason: Videos of different sizes may not respond well on mobile.
Solution: You will need to edit the source code in your product page and the Preference section by following the steps below:
For ShopBase/PlusBase products, go to Products > All products and click on the product you want to edit description of.
If you are using PrintBase, go to Campaigns > All campaigns and click on the campaign you want to edit description of.
If you want to edit a collection, go to Products > Collection and click on the collection you want to edit description of.
In Description, click the Source code </> to open the Source Code editor.
In Source Code, navigate to the following code:
<p><iframe src="https://www.youtube.com/embed/example-video-link" width="xxx" height="xxx" allowfullscreen="allowfullscreen"></iframe></p>Replace it with the following code:
<p class="custom-description-mobile-video"><iframe src="https://www.youtube.com/embed/example-video-link" width="xxx" height="xxx" allowfullscreen="allowfullscreen"></iframe></p>The width and height of the video in your code can vary.
For example, if your code is <p><iframe src="https://www.youtube.com/embed/Sk1y14kX9sc?ab_channel=YUMMY" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></p>, replace it with <p class="custom-description-mobile-video"><iframe src="https://www.youtube.com/embed/Sk1y14kX9sc?ab_channel=YUMMY" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></p>
Click Save to save your source code.
Click Save changes to save your product after editing the description.
Go to Online store > Preferences.
In the Additional scripts, Head section, add the following style tag.
<style>
@media (max-width: 768px) {
.custom-description-mobile-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.custom-description-mobile-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
</style>Click Save to finish.
Related articles
Overview of Products
Overview of Campaign in PrintBase & ShopBase
Updated on: 13/09/2022
Thank you!