{"id":111496,"date":"2019-02-15T17:00:00","date_gmt":"2019-02-15T17:00:00","guid":{"rendered":"https:\/\/avada.io\/blog\/show-a-photo-gallery-on-your-site\/"},"modified":"2026-04-08T10:44:08","modified_gmt":"2026-04-08T03:44:08","slug":"show-a-photo-gallery-on-your-site","status":"publish","type":"post","link":"https:\/\/avada.io\/blog\/show-a-photo-gallery-on-your-site\/","title":{"rendered":"Show a Photo Gallery on your Site"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">For every e-commerce site, the photo <a href=\"https:\/\/avada.io\/blog\/shopify-gallery-apps\/\" target=\"_blank\" rel=\"noreferrer noopener\">galleries<\/a> which showcase your products are undoubtedly necessary to gain customers\u2019 trust and attention. However, adding a nicely-displayed photo gallery in Jekyll can be such a challenge for beginners and inexperienced people. With the purpose of solving the problem for people who have troubles implementing a photo gallery, this instructional writing on <strong>how to show a photo gallery on your site<\/strong> will be a great help for your website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Depending on how the gallery will be shown, there are two solutions to your problem: using front matter and using collections. Please read these following steps carefully and learn how to show <a href=\"https:\/\/avada.io\/blog\/photo-editor\">a photo gallery<\/a> on your site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><em>Related Posts:<\/em><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/avada.io\/blog\/insert-a-layout-collection-and-blog-to-a-static-site\">How to insert a layout, collection and blog to a static site in Shopify<\/a><\/li>\n\n\n\n<li>How to display a featured image on a product page by editing your theme code for non-sectioned themes in Shopify<\/li>\n\n\n\n<li><a href=\"https:\/\/avada.io\/blog\/how-to-choose-product-variants-by-clicking-a-variant-image\">How to choose product variants by clicking a variant image in Shopify<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-implement-a-photo-gallery-on-your-jekyll-site\">How to implement a photo gallery on your Jekyll site<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#the-front-matter-method\"><strong>The Front Matter method<\/strong><\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#step-1-create-photo-gallery.html-and-add-an-array-with-image-data\">Step 1: Create <code class=\"language-plaintext highlighter-rouge\">photo-gallery.html<\/code> and add an array with image data<\/a><\/li>\n\n\n\n<li><a href=\"#step-2-loop-over-the-array\">Step 2: Loop over the array<\/a><\/li>\n\n\n\n<li><a href=\"#step-3-add-some-css\">Step 3: Add some CSS<\/a><\/li>\n\n\n\n<li><a href=\"#step-4-adjust-the-functionality\">Step 4: Adjust the functionality<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#the-collection-method\"><strong>The Collection method<\/strong><\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#step-1-create-a-photo_gallery-collection\">Step 1: Create a <code class=\"language-plaintext highlighter-rouge\">photo_gallery<\/code> collection<\/a><\/li>\n\n\n\n<li><a href=\"#step-2-iterate-over-the-photo_gallery-collection\">Step 2: Iterate over the <code class=\"language-plaintext highlighter-rouge\">photo_gallery<\/code> collection<\/a><\/li>\n\n\n\n<li><a href=\"#step-3-add-a-weight-variable\">Step 3: Add a <code class=\"language-plaintext highlighter-rouge\">weight<\/code> variable<\/a><\/li>\n\n\n\n<li><a href=\"#step-4-order-the-collection-documents\">Step 4: Order the collection documents<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-front-matter-method\">The Front Matter method<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This is the most suitable way for you to add the photo gallery on one page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-1-create-photo-gallery.html-and-add-an-array-with-image-data\">Step 1: Create <code class=\"language-plaintext highlighter-rouge\">photo-gallery.html<\/code> and add an array with image data<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The first thing to do is forming <code class=\"language-plaintext highlighter-rouge\">photo-gallery.html<\/code>. Then, in the front matter, add an array with image data.<\/p>\n\n\n\n<div class=\"language-plaintext highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code>\n---\nlayout: default\nimages:\n  - image_path: \/images\/cakes\/apple-pie.jpg\n    title: Apple Pie\n  - image_path: \/images\/cakes\/birthday-cake.jpg\n    title: Birthday Cake\n  - image_path: \/images\/cakes\/black-forest.jpg\n    title: Black Forest\n  - image_path: \/images\/cakes\/brownie.jpg\n    title: Brownie\n  - image_path: \/images\/cakes\/cheese-cake.jpg\n    title: Cheese Cake\n  - image_path: \/images\/cakes\/chocolate-cake.jpg\n    title: Chocolate Cake\n  - image_path: \/images\/cakes\/fruit-cake.jpg\n    title: Fruit Cake\n  - image_path: \/images\/cakes\/lamington.jpg\n    title: Lamington\n  - image_path: \/images\/cakes\/lemon-cake.jpg\n    title: Lemon Cake\n---\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-2-loop-over-the-array\">Step 2: Loop over the array<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">After getting the data in front matter, in order to output the images in a grid, you need to loop over the array.<\/p>\n\n\n\n<div class=\"language-plaintext highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code>\n...\n&lt;ul class=\"photo-gallery\"&gt;\n  {% for image in page.images %}\n    &lt;li&gt;&lt;img src=\"{{ image.image_path }}\" alt=\"{{ image.title}}\"\/&gt;&lt;\/li&gt;\n  {% endfor %}\n&lt;\/ul&gt;\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-3-add-some-css\">Step 3: Add some CSS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, adding some CSS will make your photo gallery display nicely.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn4.avada.io\/media\/shopify\/rDoC0jf.jpg\" alt=\"photo gallery\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-4-adjust-the-functionality\">Step 4: Adjust the functionality<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to reorder items and extend the structure to adjust the functionality, add a link field to the array.<\/p>\n\n\n\n<div class=\"language-plaintext highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code>\n...\n- image_path: \/images\/cakes\/lemon-cake.jpg\n  title: Lemon Cake\n  link: \/lemon-cake.html\n...\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">After that, you need to output the link in an <code class=\"language-plaintext highlighter-rouge\">a<\/code> when outputting the images<\/p>\n\n\n\n<div class=\"language-plaintext highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code>\n...\n&lt;ul class=\"photo-gallery\"&gt;\n  {% for image in page.images %}\n    &lt;li&gt;\n      &lt;a href=\"{{ image.link }}\"&gt;\n        &lt;img src=\"{{ image.image_path }}\" alt=\"{{ image.title}}\"\/&gt;\n      &lt;\/a&gt;\n    &lt;\/li&gt;\n  {% endfor %}\n&lt;\/ul&gt;\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-collection-method\">The Collection method<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to display the photo gallery on multiple pages or have a lot of metadata for each image then this is the best method for you.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-1-create-a-photo_gallery-collection\">Step 1: Create a <code class=\"language-plaintext highlighter-rouge\">photo_gallery<\/code> collection<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Firstly, create a <code class=\"language-plaintext highlighter-rouge\">photo_gallery<\/code> collection. You need to add metadata for a single image in each document in the collection, for instance, <code class=\"language-plaintext highlighter-rouge\">_photo_gallery\/lemon-cake.md<\/code>.<\/p>\n\n\n\n<div class=\"language-plaintext highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code>\n---\nimage_path: \/images\/cakes\/lemon-cake.jpg\ntitle: Lemon Cake\n---\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-2-iterate-over-the-photo_gallery-collection\">Step 2: Iterate over the <code class=\"language-plaintext highlighter-rouge\">photo_gallery<\/code> collection<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To iterate over the <code class=\"language-plaintext highlighter-rouge\">photo_gallery<\/code> collection, you can use liquid.<\/p>\n\n\n\n<div class=\"language-plaintext highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code>\n...\n&lt;ul class=\"photo-gallery\"&gt;\n  {% for image in site.photo_gallery %}\n    &lt;li&gt;&lt;img src=\"{{ image.image_path }}\" alt=\"{{ image.title}}\"\/&gt;&lt;\/li&gt;\n  {% endfor %}\n&lt;\/ul&gt;\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-3-add-a-weight-variable\">Step 3: Add a <code class=\"language-plaintext highlighter-rouge\">weight<\/code> variable<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code class=\"language-plaintext highlighter-rouge\">Weight<\/code> is a number that helps you to indicate the photo\u2019s position. Therefore, you can decide the photo order by adding a <code class=\"language-plaintext highlighter-rouge\">weight<\/code> variable to the front matter of the documents in <code class=\"language-plaintext highlighter-rouge\">photo_gallery<\/code>.<\/p>\n\n\n\n<div class=\"language-plaintext highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code>\n---\nimage_path: \/images\/cakes\/lemon-cake.jpg\ntitle: Lemon Cake\nweight: 1\n---\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-4-order-the-collection-documents\">Step 4: Order the collection documents<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, before outputting the photos, you have to order the collection documents by the <code class=\"language-plaintext highlighter-rouge\">weight<\/code>.<\/p>\n\n\n\n<div class=\"language-plaintext highlighter-rouge\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code>\n...\n{% assign sorted_photos = site.photo_gallery | sort: \"weight\" %}\n&lt;ul class=\"photo-gallery\"&gt;\n  {% for image in sorted_photos %}\n    &lt;li&gt;&lt;img src=\"{{ image.image_path }}\" alt=\"{{ image.title}}\"\/&gt;&lt;\/li&gt;\n  {% endfor %}\n&lt;\/ul&gt;\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">With this detailed tutorial on <strong>how to show a photo gallery on your site<\/strong>, we certainly ensure that you can manipulate those above steps and make your job easier. If you want to display a photo gallery using a JavaScript photo gallery, you can apply the same techniques. For <a href=\"http:\/\/sachinchoolur.github.io\/lightslider\/\" target=\"_blank\" rel=\"nofollow noopener\">lightSlider<\/a>, it expects the elements in a simple <code class=\"language-plaintext highlighter-rouge\">&lt;ul&gt;<\/code> structure in the HTML. I hope this article has been helpful to you, you can check out our other articles on <a href=\"https:\/\/avada.io\/blog\/catalog\">catalog<\/a> if you want to learn more about this topic.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>See more: <a href=\"https:\/\/avada.io\/blog\/shopify-gallery-apps\/\" target=\"_blank\" rel=\"noreferrer noopener\">Top Shopify Gallery Apps To Improve Store\u2019s Visual<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>For every e-commerce site, the photo galleries which showcase your products are undoubtedly necessary to gain customers\u2019 trust and attention. However, adding a nicely-displayed photo gallery in Jekyll can be such a challenge for beginners and inexperienced people. With the purpose of solving the problem for people who have troubles implementing a photo gallery, this [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[356,383],"tags":[],"class_list":["post-111496","post","type-post","status-publish","format-standard","hentry","category-shopify","category-shopify-devdocs"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Show a Photo Gallery on your Site in Shopify<\/title>\n<meta name=\"description\" content=\"Learn how to create a visually appealing photo gallery on your Shopify store, showcasing your products or brand story in an engaging and interactive way.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/avada.io\/blog\/show-a-photo-gallery-on-your-site\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Show a Photo Gallery on your Site in Shopify\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a visually appealing photo gallery on your Shopify store, showcasing your products or brand story in an engaging and interactive way.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/avada.io\/blog\/show-a-photo-gallery-on-your-site\/\" \/>\n<meta property=\"og:site_name\" content=\"Avada Commerce\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/avada.io\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-15T17:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-08T03:44:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn4.avada.io\/media\/shopify\/rDoC0jf.jpg\" \/>\n<meta name=\"author\" content=\"Sam\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@avadaio\" \/>\n<meta name=\"twitter:site\" content=\"@avadaio\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sam\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Show a Photo Gallery on your Site in Shopify","description":"Learn how to create a visually appealing photo gallery on your Shopify store, showcasing your products or brand story in an engaging and interactive way.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/avada.io\/blog\/show-a-photo-gallery-on-your-site\/","og_locale":"en_US","og_type":"article","og_title":"How to Show a Photo Gallery on your Site in Shopify","og_description":"Learn how to create a visually appealing photo gallery on your Shopify store, showcasing your products or brand story in an engaging and interactive way.","og_url":"https:\/\/avada.io\/blog\/show-a-photo-gallery-on-your-site\/","og_site_name":"Avada Commerce","article_publisher":"https:\/\/www.facebook.com\/avada.io\/","article_published_time":"2019-02-15T17:00:00+00:00","article_modified_time":"2026-04-08T03:44:08+00:00","og_image":[{"url":"https:\/\/cdn4.avada.io\/media\/shopify\/rDoC0jf.jpg","type":"","width":"","height":""}],"author":"Sam","twitter_card":"summary_large_image","twitter_creator":"@avadaio","twitter_site":"@avadaio","twitter_misc":{"Written by":"Sam","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/avada.io\/blog\/show-a-photo-gallery-on-your-site\/#article","isPartOf":{"@id":"https:\/\/avada.io\/blog\/show-a-photo-gallery-on-your-site\/"},"author":{"name":"Sam","@id":"https:\/\/avada.io\/#\/schema\/person\/cc9c647e3ec94d00dc61ae2e653cafb7"},"headline":"Show a Photo Gallery on your Site","datePublished":"2019-02-15T17:00:00+00:00","dateModified":"2026-04-08T03:44:08+00:00","mainEntityOfPage":{"@id":"https:\/\/avada.io\/blog\/show-a-photo-gallery-on-your-site\/"},"wordCount":578,"publisher":{"@id":"https:\/\/avada.io\/#organization"},"image":{"@id":"https:\/\/avada.io\/blog\/show-a-photo-gallery-on-your-site\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn4.avada.io\/media\/shopify\/rDoC0jf.jpg","articleSection":["Shopify","Shopify Devdocs"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/avada.io\/blog\/show-a-photo-gallery-on-your-site\/","url":"https:\/\/avada.io\/blog\/show-a-photo-gallery-on-your-site\/","name":"How to Show a Photo Gallery on your Site in Shopify","isPartOf":{"@id":"https:\/\/avada.io\/#website"},"primaryImageOfPage":{"@id":"https:\/\/avada.io\/blog\/show-a-photo-gallery-on-your-site\/#primaryimage"},"image":{"@id":"https:\/\/avada.io\/blog\/show-a-photo-gallery-on-your-site\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn4.avada.io\/media\/shopify\/rDoC0jf.jpg","datePublished":"2019-02-15T17:00:00+00:00","dateModified":"2026-04-08T03:44:08+00:00","description":"Learn how to create a visually appealing photo gallery on your Shopify store, showcasing your products or brand story in an engaging and interactive way.","breadcrumb":{"@id":"https:\/\/avada.io\/blog\/show-a-photo-gallery-on-your-site\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/avada.io\/blog\/show-a-photo-gallery-on-your-site\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/avada.io\/blog\/show-a-photo-gallery-on-your-site\/#primaryimage","url":"https:\/\/cdn4.avada.io\/media\/shopify\/rDoC0jf.jpg","contentUrl":"https:\/\/cdn4.avada.io\/media\/shopify\/rDoC0jf.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/avada.io\/blog\/show-a-photo-gallery-on-your-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/avada.io\/"},{"@type":"ListItem","position":2,"name":"Shopify","item":"https:\/\/avada.io\/category\/shopify"},{"@type":"ListItem","position":3,"name":"Shopify Devdocs","item":"https:\/\/avada.io\/category\/shopify-devdocs\/"},{"@type":"ListItem","position":4,"name":"Show a Photo Gallery on your Site"}]},{"@type":"WebSite","@id":"https:\/\/avada.io\/#website","url":"https:\/\/avada.io\/","name":"Avada Commerce","description":"Blog","publisher":{"@id":"https:\/\/avada.io\/#organization"},"alternateName":"Avada Commerce","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/avada.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/avada.io\/#organization","name":"Avada Commerce","alternateName":"Avada Commerce","url":"https:\/\/avada.io\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/avada.io\/#\/schema\/logo\/image\/","url":"https:\/\/avada.io\/wp-content\/uploads\/2023\/06\/Avada-logo.jpeg","contentUrl":"https:\/\/avada.io\/wp-content\/uploads\/2023\/06\/Avada-logo.jpeg","width":1200,"height":1200,"caption":"Avada Commerce"},"image":{"@id":"https:\/\/avada.io\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/avada.io\/","https:\/\/x.com\/avadaio","https:\/\/www.youtube.com\/@avadaio","https:\/\/www.linkedin.com\/company\/avadacommerce"]},{"@type":"Person","@id":"https:\/\/avada.io\/#\/schema\/person\/cc9c647e3ec94d00dc61ae2e653cafb7","name":"Sam","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/fdce01bbdb8b8eaa162f8ed372062707058abcd85e8b233af7cb4e01191c75f4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/fdce01bbdb8b8eaa162f8ed372062707058abcd85e8b233af7cb4e01191c75f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fdce01bbdb8b8eaa162f8ed372062707058abcd85e8b233af7cb4e01191c75f4?s=96&d=mm&r=g","caption":"Sam"},"description":"Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Vietnam. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.","sameAs":["https:\/\/wordpress-466542-3512282.cloudwaysapps.com","https:\/\/vn.linkedin.com\/in\/samng80"],"url":"https:\/\/avada.io\/authors\/sam\/"}]}},"meta_title":"How to Show a Photo Gallery on your Site in Shopify","meta_description":"Learn how to create a visually appealing photo gallery on your Shopify store, showcasing your products or brand story in an engaging and interactive way.","meta_keywords":"","feature_image_custom":"","updated_at_migrate":"2024-09-19T20:50:02+07:00","_links":{"self":[{"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/posts\/111496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/comments?post=111496"}],"version-history":[{"count":5,"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/posts\/111496\/revisions"}],"predecessor-version":[{"id":159296,"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/posts\/111496\/revisions\/159296"}],"wp:attachment":[{"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/media?parent=111496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/categories?post=111496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/avada.io\/wp-json\/wp\/v2\/tags?post=111496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}