Shopify themes, liquid, logos, and UX
goedendag ik heb een vraag ik wil graag in het dawn thema aanpassingen doen met de prijs en de titel ik wil het graag hebben zoals op de afbeeldingen weet iemand hoe ik dat moet / kan doen ?
Hi @Daan7 ,
I zie dat je productpagina vergelijkbaar is met je screenshot => Dus is je probleem opgelost?
nee eigenlijk niet
Hi @Daan7 ,
Kunt u mij uw wensen specifieker omschrijven?
bij de eerste afbeelding waar de prijs onder de titel staat, zo is het nu bij alle producten en bij afbeelding 2 zo wil ik het eigenlijk ongeveer hebben en dat het automatish aangepast word want bij afbeelding 2 hoe ik het eigenlijk ongeveer wil hebben, had ik met een hoop moeite in elkaar gezet, maar dat voeg ik handmatig per product pagina toe, maar dat is ook niet de bedoeling, want dat heeft negatieve effect op de snelheid en kost een hoop tijd, heb jij enige idee hoe ik dat voor elkaar kan krijgen . ik moet wel vermelden dat ik weinig /geen kennis heb van codering.
Hi @Daan7 ,
You can follow this guide:
a. Goto Shopify Admin -> Online Store -> Themes
b. On your current theme, click ... -> Edit code
c. Follow 1 -> 2 -> 3 to search end of head tag
d. Add follow code, it can be fix your problem
<style>
@media screen and (min-width: 992px) {
.product__info-container .price.price--large {
position: absolute;
right: 100px;
top: 115px;
text-align: right;
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
}
.product__info-container .price.price--large .price__badge-sale {
color: #8B0000;
font-size: 16px;
font-weight: bold;
margin-bottom: -5px;
background: none;
}
.product__info-container .price.price--large s.price-item--regular {
text-decoration: line-through;
color: gray;
font-size: 14px;
}
.product__info-container .price.price--large .price-item--last {
font-size: 24px;
font-weight: 600;
color: #8B0000 !important;
}
}
</style>
You should will be see the result as here
ankjewel nog een paar vraagjes weet jij toevallig ook hoe ik de product titel groote aan kan passen ? en hier bij de afbeelding die ik stuurde klopt de uitleining niet als er geen korting op zit is der een mogelijk om de positie los van elkaar te kunnen aanpassen want als ik nu de uitleining wil aanpassen voor de normale prijs waar geen korting in zit dan word dus ook de posistie aangepast als der wel een korting opzit
voor de computer heb ik het nu goed gekregen dus dank daarvoor. maar voor de telefoon krijg ik het nog niet goed .
Hi @Daan7
Thank you for reaching out to the Shopify community. I'd be glad to assist you. Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?
Hi @Daan7
I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for "theme.liquid" file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for </head> tag and add the following code above </head> tag: https://prnt.sc/KWtKYyZkDtYJ
Here is the code for Step 3:
{% style %}
@media screen and (min-width: 1400px){
.product__title {
width: 50% !important;
}
.product__title + div {
width: 50%;
position: absolute;
top: 30px;
right: 0;
}
section.product__info-container {
position: relative;
}
.price.price--large.price--on-sale.price--show-badge {
display: flex !important;
flex-direction: column-reverse !important;
}
}
{% endstyle %}
Please let me know if it works. Thank you!
Best,
Daisy - Avada Support Team.
dankjewel nog een paar vragen hoe zou ik de titel kunnen verkleinen ? en hoe gaat het dan voor de mobiel er uit zien? en hoe kan ik bij bespaar 30 procent de zwarte label krijgen ? en dat er bespaar komt te staan met het bedrag wat er bespaard werd met de korting ? zoals op de afbeelding
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025