One image for desktop, slideshow on mobile?

Tourist
3 0 0

Hello everyone!

 

It's my first post around here, I hope I'm posting in the right topic. I couldn't really find the answer to my situation so I'll ask here. So my problem with my webpage is that I have a "collage" of three images on my main page. On mobile, you can only view the middle image because it gets resized that way (the webpage to see for yourself: lonethrone.com (and yeah, I notice the cut on top for desktop, still working on it)).

 

How can I set up a slideshow for mobile while keeping the single image on desktop, thus seperating the mobile and desktop design? I would really appreciate any help on this, I'm fairly new to everything. Thanks a lot!

0 Likes
New Member
2 0 0

I have a similar issue whereby the slideshow, containing 3 images, is shown within the theme but doesn't appear when viewing the live site view desktop or mobile.

 

 

0 Likes
Astronaut
954 116 221

This is a very common question. The problem is background-images don't define the bounds of the elements they are applied to. I personally do not like using background images for this specific reason. I don't always want to have to give my element an absolute height. Instead I usually put the image directly in my element with an image tag. Here's kind of how they would be different:

 

//-----------------------Background image --------------------
<style>
.my-background-image {
position: relative;
width: 100%; height: 700px; background-size: cover; background-position: center center; }
@media (min-width: 992px){
height: 1000px;
} </style> <div class="my-background-image"> // some other code in here </div> //------Image inside element ----------------------> <style> .image-in-element{ position: relative; } .image-in-element img { width: 100%; } .desktop-image{ display: none; } .mobile-image{ display: block; } @media (min-width:992px){ .desktop-image { display: block; } .mobile-image { display: none; } } </style> <div class="image-in-element"> <img class="desktop-image" src="/desktop-image-path.jpg"> <img class="mobile-image" src="/mobile-image-path.jpg"> </div>

Obviously there's a few more lines of code for the image in the element as opposed to background image, but worth the trade off in control. So you'll need 2 images with this approach, because there's no way to get your original image to display the same as it does on desktop. The reason partially being that desktop screens are wider than tall, and phone screens are taller than wide. If you did have the same image in there, it'd be really small because it would scale with the dimensions of the screen. I've made some sections for clients that want this functionality, usually it's a static image though. I believe it wouldn't be too hard to tailor into a slideshow. But, that's basically how I would go about setting it up.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
2 0 0
Thank you, appreciate your expertise.
0 Likes
Tourist
3 0 0

Alright, so.. first of all, thanks a lot for the answer, I really appreciate it. Second, I have no clue about programming yet, so I'm not quite sure what I can do exactly to fix this problem lol. I'm aware that I would need three seperate images for mobile, I didn't plan to display the desktop-version on the mobile verson of the website. I wanted to take the three images seperately and put them in a slideshow that way. Also just for the future: Where or how exactly can I learn about how to find and edit something in the source codes? I will probably have many more question where the solution lies in code so I should learn that somehow. I hope my noob-ness can be tolerated and I'd really appreciate a very quick and short breakdown of where to find the code you showed me and what exactly it does.. Nevertheless, thanks a lot, you already helped! I'll already try and figure out myself what to do based on your answer.

0 Likes
Astronaut
954 116 221

I always recommend this video series to anyone who just starts:

https://www.skillshare.com/classes/Shopify-Essentials-for-Web-Developers-From-Store-Setup-to-Custom-...

 

All you need to do to watch it is make a Skillshare account, which is free. This video will help you "kind of" understand how to track things down in your code. It's definitely a good starting point. I'll give you a breakdown on some essential stuff to know.

 

So when you want to edit your code, you'll go to Online Store > Themes > Actions (on the theme you want to edit) > Edit Code.

 

From there you're taken to the code editor. You'll have a sidebar on the left that has folders with all the files used in your theme. Layout, Templates, Sections, Snippets, Assets, Config, and Locales. At the beginning, you can mostly omit the Config and Locales folders, you probably wont touch them. 

 

So the "Layout" folder is only going to have one file. It'll be theme.liquid. This is like it sounds, it's the "layout" of your theme. Anything you put inside theme.liquid will be on your entire site. Shopify is a very modular oriented design environment, meaning things are broken up into managable files of code, and then included in a page with Liquid logic. So when you open your theme.liquid you're going to see your main HTML structure, a bunch of javascript tags, links to stylesheets, etc. Everything you'd expect to see in a website. A very simplified version would look like this:

 

 

<!doctype html>
  <head>
{{ content_for_header }}
  </head>
  <body>
   {% section 'header' %}
  {{ content_for_layout }}
   {% section 'footer' %}
  </body>

So, you don't need to worry about {{ content_for_header }}. It inserts necessary Shopify scripts into the head, so don't delete it for any reason.  So as this is "theme.liquid", it will appear on every page of your site. Your header and footer are always going to be the same in most cases right? So essentially you are placing those pieces of code there with Liquid logic:

// -----------this is logic
{% something here %}

//------------this is output
{{ something here }} 

 

 

When you see something that says:

 

{% section 'footer' %}

It's referencing a section file named "footer.liquid" which you can find in your sections folder. If you see something like this:

 

 

 

{% include 'footer' %}

It's referencing a snippet file named footer.liquid that you can find in your snippets folder. The difference between a Section and a Snippet is that Sections can be customized in the editor by the end client. So when you press that purple customize button, anything that you can edit in there are section settings. You also can't nest sections in each other, but you can have as many snippets inside each other as you want. 

 

 

{{ content_for_layout }} is the meat of your site. It outputs all of your files from your Templates folder. So if you're on the home page, it outputs the code from "index.liquid". If you're on the cart page, it outputs the code from cart.liquid, etc all the way down the line. So your theme has your header at the top, whatever page you're on in the middle, and footer at the bottom. That's the basic gist of it, but there's some other stuff to know.

 

So you want to edit your home page, no problem! You know from reading my handy little walk through right here that if you want to edit the homepage of your site you go into index.liquid! Then you open it and the only thing you see is this:

 

 

{{ content_for_index }}

 

 

...wtf is that? So like I said earlier, all the stuff that you can edit in your customize editor are sections. There are 2 types of sections however. Static and Dynamic sections. Static sections are the kind you place on your page like I showed you earlier. Dynamic sections are the sections that you can click and drag to any place on your homepage. {{ content_for_index }} outputs all of your dynamic sections. So odds are if you're trying to make a new part to your homepage in a free theme, you'll need to do it via a Dynamic Section. 

 

Ok, you want to edit your collection page. You open collection.liquid and see:

 

{% section 'collection-template' %}

And you know from reading this fantastically informative post that you'll need to open "collection-template.liquid" in your sections folder. So you open that and it's a giant mess of code and looks super intimidating with a bunch of "if statements" and "for loops", yada yada yada. It looks mean but once you know how to track stuff down it's not so bad. Lets cover those things real quick. 

 

 

For loops are a way of doing something multiple times. So on your collection page you're going to want to list all of the products in that collection right? So instead of writing code for 500 products, you do it once so they're all consistent and if you ever want to edit anything in the future you only have to do it once. They will look something like this:

 

 

{% for product in collection.products %}
  {{ product.title }}
   <img src="{{ product.featured_image | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}" />
  {{ product.price }}
{% endfor %}

What this loop would do is for every product in whatever collection you're viewing in your browser, it would output the title, the image, and the price of every product. When you enter the forloop, you have access to the product object, which has a whole set of properties you can access to make conditional statements, so to cover if statements let's use the same example. Say you only want to show the price on one product for some reason. Let's say the product is called "Tea Cup". You could do the following:

 

 

 

{% for product in collection.products %}
  {{ product.title }}
   <img src="{{ product.featured_image | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}" />
  {% if product.handle == 'tea-cup' %}
    {{ product.price }}
  {% endif %}
{% endfor %}

Now it would only show the price for your product "Tea Cup". Alternatively there is an "unless" statement that works the same way, just in the opposite fashion:

 

 

{% for product in collection.products %}
  {{ product.title }}
   <img src="{{ product.featured_image | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}" />
  {% unless product.handle == 'tea-cup' %}
    {{ product.price }}
  {% endif %}
{% endfor %}

With this, it would show the price for everything except for your product "Tea Cup".

 

PHEW well, that was long winded. I didn't cover filters, and there's a lot of other stuff. But this is like the essential information if you're going to be trying to screw around with your code. Here's a liquid cheat sheet for reference:

https://www.shopify.com/partners/shopify-cheat-sheet

 

And here's a reference for all liquid objects:

 

https://help.shopify.com/en/themes/liquid/objects

 

You can message me if you have any questions, you will just have to enable messaging in your profile.

 

*collapses*

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted
Tourist
3 0 0

Oh wow, I did not not expect this. Thank you so incredibly much, you can't imagine how much I appreciate all your effort to answer me and help me out. This was really helpful, I'll look at the link you've given me as well and look up some more sources. And thank you so much for letting me message you, even though I don't feel comfortable doing that now because I felt bad at the end of that response hahaha. I appreciate it a lot, I think I got everything. Thank you wholeheartedly!

0 Likes
Astronaut
954 116 221

I was just being silly. Message me any time. 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like