Shopify themes, liquid, logos, and UX
This question in regard to the layout of my website (www.aburacosmetics.com) on mobile, and potentially exploring the capabilities of the product pages to mimic something similar to this page (https://www.byredo.com/us_en/summer-rain-candle-240-g) which was created without Shopify. I would like to know if there is a way via Custom CSS to create a product page the displays a static product image, and on scroll, overlays the product description that is previously seen below the image over the image as shown above. Could someone possibly assist with creating a custom CSS that allows this via Shopify? If not, does anyone know of any themes that do the same? Please note that in order to fully see the capabilities I am describing, the link above should either be 'Inspected" in mobile view or accessed on a mobile device. This is also only in regard to our websites mobile view. Thank you!
Solved! Go to the solution
This is an accepted solution.
Yes, it is possible via CSS, but it requires a good CSS knowledge that requires adjusting CSS rules targeting multiple elements. I've linked a quick demo below, but you will also need to cater for desktop view and add a separate set of style rules for desktop. If you do not have working knowledge of CSS, please seek help from a professional, but as you can see it's possible and you do not need to find a different theme.
https://drive.google.com/file/d/1hZdJG1MuyDH7PbwV399M6Z6pvxhKhdxp/view?usp=sharing
This is an accepted solution.
Yes, it is possible via CSS, but it requires a good CSS knowledge that requires adjusting CSS rules targeting multiple elements. I've linked a quick demo below, but you will also need to cater for desktop view and add a separate set of style rules for desktop. If you do not have working knowledge of CSS, please seek help from a professional, but as you can see it's possible and you do not need to find a different theme.
https://drive.google.com/file/d/1hZdJG1MuyDH7PbwV399M6Z6pvxhKhdxp/view?usp=sharing
Hi,
Thank you for replying. So how will i make the adjustments?
Greetings
Hi Sennabura,
Sorry for the late reply. You'll need to make targeted HTML and CSS changes to achieve it. If you are not competent with HTML/CSS then I advise you hire a Shopify expert or get in touch with us.
Kind regards,
S
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025