When adding content from other sources to the description of your products and collections, you may encounter some errors on the storefront, such as:
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
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:
Method 02 (recommended for users with prior experience with HTML & CSS): You can remove excessive code in the description editor using the following steps:
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.
</> to open the Source Code editor.
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>
B. Images not showing on the description
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.
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
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.
</> to open the Source Code editor.
<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>
<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>