Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hi! I have this custom liquid code, that autoplays a video on my site:
<style>
video {
display: block;
margin: 0 auto;
width: 100%;
}
@media screen and (max-width: 800px) {
video {
width: 100%;
}
}
</style>
<video controls autoplay loop playsinline muted>
<source src="https://cdn.shopify.com/videos/....mp4" />
</video>
Now i want to add an condition something like this: if the language chosen by the customer is unequal to German then show a different video
Do you think this is possible? If yes, I would really appreciate an solution 🙂
Thank you!
Solved! Go to the solution
This is an accepted solution.
Well, how did Thanos say? "Fine, I'll do it myself".
or in this case ChatGPT. So anyone else having this issue, here's the solution:
{% assign language = shop.locale %}
{% if language == 'de' %}
{% assign videosrc='https://cdn.shopify.com/...deutsches_video.mp4' %}
{% elsif language == 'en' %}
{% assign videosrc='https://cdn.shopify.com/...english_video.mp4' %}
{% else %}
{% assign videosrc='' %}
{% endif %}
{% if videoSrc != '' %}
<style>
video {
display: block;
margin: 0 auto;
width: 100%;
}
@media screen and (max-width: 800px) {
video {
width: 100%;
}
}
</style>
<video controls autoplay loop playsinline muted>
<source src="{{ videoSrc }}" />
</video>
{% endif %}
Possible to use liquid logic, if the language selector you are using or the theme by default has returns the language selection in the liquid.
Thank you for the quick answer. Do you happen to know how I could do that? or even could extend my provided code with the logic? I have English and German (main) selected in the store preferences.
I think I already posted how to do it.
btw if I know I already posted it, you need to go with a developer to check the code.
This is an accepted solution.
Well, how did Thanos say? "Fine, I'll do it myself".
or in this case ChatGPT. So anyone else having this issue, here's the solution:
{% assign language = shop.locale %}
{% if language == 'de' %}
{% assign videosrc='https://cdn.shopify.com/...deutsches_video.mp4' %}
{% elsif language == 'en' %}
{% assign videosrc='https://cdn.shopify.com/...english_video.mp4' %}
{% else %}
{% assign videosrc='' %}
{% endif %}
{% if videoSrc != '' %}
<style>
video {
display: block;
margin: 0 auto;
width: 100%;
}
@media screen and (max-width: 800px) {
video {
width: 100%;
}
}
</style>
<video controls autoplay loop playsinline muted>
<source src="{{ videoSrc }}" />
</video>
{% endif %}