Shopify themes, liquid, logos, and UX
Highlight your online products by activating a lightbox when a customer clicks a product image.
This customization enables a lightbox for your website images. When an image is clicked, it's displayed as a highlighted overlay on the current page, while the rest of that page content is darkened and disabled.
The result looks like this:
You need a theme that already uses a lightbox plugin on product pages. You can find out if your theme uses one, by going to a product page on your storefront and clicking on your main product image. If the image opens up in a centered box on the screen with the background dimmed, then you have a lightbox.
Common lightbox plugins used by Shopify themes are:
You don't want every image on every page to open in a lightbox. In particular, images that are hyperlinks should be skipped. You still want your visitors to be able to click on those images to go to another web page.
In addition, if the original uploaded image is the same size as the image shown on the page, you want to leave that image alone and not have it open in a lightbox.
First, you need to edit your page.liquid
, blog.liquid
and article.liquid
templates.
In each template, locate the div
element that contains your page or blog post content. To the opening <div>
tag, add class="rte"
(“rte” indicates Rich Text Editor).
In detail, the steps you need to follow to achieve this are:
page.liquid
, blog.liquid
and article.liquid
to open them in the online code editor:page.liquid
is used for all specialized page content.blog.liquid
is used for the blog landing page.article.liquid
is used for each individual blog post page.div
element that wraps your content, and add rte
to its class
attribute. Add the class
attribute if it doesn't exist already.page.liquid
:<div class="rte"> {{ page.content }} </div>
blog.liquid
and article.liquid
:<div class="rte"> {{ article.content }} </div>
Now you need to add some JavaScript to your theme:
theme.liquid
to open the file in the online code editor.fancybox
, colorbox
or slimbox
.{% if template contains 'product' and settings.main_image_display == 'Lightbox' %} {{ 'jquery.fancybox-1.3.4.pack.js' | asset_url | script_tag }} {% endif %}
If you find the conditional statement, you must remove it.
</body>
tag, copy and paste the following:<script> jQuery(function() { jQuery('.rte img').not('a > img').each(function() { // Matching images that aren't already shown in their original size. var re = /(_small)|(_compact)|(_medium)|(_large)|(_grande)/; var src=jQuery(this).attr('src'); if (re.test(src)) { // Determining the URL to the original image. var href = src.replace(re, ''); // Activating lightbox. jQuery(this).wrap('<a></a>') .parent() .attr('href', href) .addClass('lightbox') .colorbox( { maxWidth:"95%", maxHeight:"95%", scalePhotos:true} ); } }); }); </script>
If your theme uses Colorbox, the customization is complete.
If your theme uses Slimbox or Fancybox, you need to make the following final edits:
For Fancybox, replace this:
.colorbox( { maxWidth:"95%", maxHeight:"95%", scalePhotos:true} );
with this:
.fancybox({ 'hideOnContentClick': true });
For Slimbox, replace this:
.colorbox( { maxWidth:"95%", maxHeight:"95%", scalePhotos:true} );
with this:
.slimbox();
TyW | Online Community Manager @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
I cannot find the colorbox, fancybox and lightbox options in my theme.liquid code.
Hello,
I added these to my code, but I couldn't figure out which box my theme used (Debut?). Either colorbox/lightbox/fancybox. Referring to the theme.liquid file.
nothing is showing up yet
User | RANK |
---|---|
136 | |
94 | |
90 | |
61 | |
53 |
Connect your PayPal account to allow your customers to checkout using the PayPal gateway a...
ByYour online store speed can enhance your store’s discoverability, boost conversion rates a...
ByShopping is at our fingertips with mobile devices. Is your theme optimized to be user-frie...
By