Shopify themes, liquid, logos, and UX
I like to edit this but in one row only cause it takes space
Hi @niceeee
To condense the text into one line, you could rewrite it as:
"Makerlab Electronics, 1231 Tomas Mapua Street, Santa Cruz, 1003 Manila, 00, Philippines - sales@makerlab-electronics.com"
This includes all the information from the original content but fits into a single line.
If you have other questions, I am willing to answer them more.
Best regards,
Daisy
Hi @Maxvdh
To add a moving orange dot and a progress bar indicating "unlock the fourth free" in the USP section of your Shopify product detail page (PDP), you can use custom CSS and Liquid. Here’s a simple example:
1- Liquid Code: Add this Liquid code where you want the bar to display.
<div class="usp-progress-bar">
<span class="progress-dot"></span>
<p>Add more items to unlock your fourth item for free!</p>
</div>
2- CSS Code: Add the following CSS to your theme's stylesheet to create the moving dot effect and style the progress bar.
.usp-progress-bar {
position: relative;
width: 100%;
height: 20px;
background-color: #f0f0f0;
border-radius: 10px;
overflow: hidden;
margin-top: 10px;
}
.progress-dot {
position: absolute;
width: 20px;
height: 20px;
background-color: orange;
border-radius: 50%;
animation: moveDot 4s linear infinite;
}
@keyframes moveDot {
0% { left: 0; }
100% { left: 100%; }
}
This will create a bar with a moving orange dot that visually represents progress. Adjust the Liquid and CSS to fit your theme better if needed.
For the cart drawer upsell, include similar Liquid and CSS within the cart drawer’s template or component.
If you have other questions, I am willing to answer them more.
Best regards,
Daisy
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025