Making Portions of Website Viewable on Mobile or Desktop Only - Gain Theme

Technical Q&A
,
1

I’m creating a shop and would like different images and elements to appear depending on whether it is on mobile or desktop. Some of these sections, you can upload different pictures depending on this exact characteristic but I’d like to have a bit more customizability. For example, certain buttons on top of images in my slideshow look great on desktop but awful on mobile. As it currently stands, the button can either exist or not exist on both, not toggleable for one.

I’ve read several other solutions in this FAQ for editing the CSS but unlike other themes, Gain does not give me an option to edit the code from clicking the ellipses in the theme library.

If there is another work around to edit the code for the Gain theme or a way to add just a snippet of code to be added to the custom CSS section for the slideshow or any other elements, I don’t mind creating duplicates of the pieces I need differ from Desktop to Mobile and tag each one accordingly.

Any help on this matter would be greatly appreciated.

If a different theme is necessary, perhaps a suggestion for another theme that offers editable code and allows for bundles, live cart pricing updates, etc. or performs well in mobile conversions.

Thanks!

2

For paid themes if you haven’t purchased it you cannot access it’s source code.

If the theme is paid for try another browser to verify you cannot access the theme code, if you can access the code in another browser you will want to clear the first browser cache.

If that doesn’t work contact shopify support about your paid theme not giving you access to the theme code.

At minimum to make style changes while previewing an unpaid premium theme use the add css feature in the visual theme editor.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css