[New Era] Bundles AI: Auto-generate & sell the best performing bundles 🤖

Watch now
pickystory
Start free

How to Add a Gallery to Your Shopify Store in Less Than 5 Minutes

  • 5 minutes
  • Shopify How-To

The days when you had to write JavaScript or edit Liquid templates just to add a gallery are gone. We decided to make the process of embedding galleries much more straightforward, so non-techy merchants can easily use it without any coding. Nowadays, to add a gallery to your store, all you need to do is hover over the gallery’s desired position and copy the CSS selector of the element the gallery will be inserted after. Here’s how:

1. Find the element the gallery will be inserted after

Go to the desired page where you want to add the new shoppable gallery and hover over the desired area. In the example below we wish to add a new gallery under the header (the purple rectangle):

Right-click on the chosen area and click on Inspect:

Once you click on Inspect, the Developers Tools window will pop up (could also appear on the left/right side of the screen). Hover over the different HTML elements until the desired element is highlighted – in our case, the header highlighted in blue. We want to add the gallery right after the header so we’ll copy the header’s ID (marked in green) or the header’s Class (marked in blue). Just copy one of them.

 

Tip – try to pick the most specific element; in this scenario, we would prefer the ID instead of the Class because it is more specific – there is a higher chance that the element is unique. Either way, we can always use the Route Filter option to display the gallery only on the desired page.

Add to store

2. Paste the CSS selector and enable the gallery

Open PickyStory app and go to Widget settings. Paste the CSS selector to Custom location selector box. If you copied an element ID, you should add the pound sign (#) before the element. If using a class, add a dot (.) before the element. See examples below: 

Element’s Class:

After inserting the CSS selector just switch the toggle to enable the gallery.

Start now
"I really expect this app to be soon a must-have for every fashion store!"

MOST POPULAR

  • Customizable widgets
  • Desktop and mobile apps
  • Communication via chatbots
  • Customizable widgets
  • Desktop and mobile apps
  • Communication via chatbots
Back to top

Platform

Main tools

By use case

By industry

Resources

Company

PickyStory is the complete e-commerce upsell platform. PickyStory enables e-commerce brands to make personalized offers by helping customers to discover more products.

pickystory

© All rights reserved 2023

Icon

Not enough sales?

Capture every drop of revenue with PickyStory's complete upsell platform.

Button
pickystory

Get matched with the right partner. PickyStory will do all the work to connect you with one of our awesome partners.

Trusted by the fastest-growing
e-commerce brands

vertical logos
X
pickystory_full_for_black-background-1-min.png

See PickyStory in action

See live demo
pickystory

Convert more visitors into buyers with PickyStory's e-commerce conversion platform

By entering your email, you agree to receive marketing emails from PickyStory.


Trusted by the fastest-growing e-commerce brands

pickystory

Book a demo to learn more about PickyStory's e-commerce upsell platform

By entering your email, you agree to receive marketing emails from PickyStory.


Trusted by the fastest-growing
e-commerce brands

vertical logos