Showcase - Shoppable Instagram Galleries for Shopify |

Getting Started
Welcome to Showcase's documentation! We've built Showcase from the ground up to be super easy to use, both as a store owner and as a developer, so you can get your clients setup with a customized gallery in no time at all.

In our documentation we'll cover the following topics:
Callbacks and Methods

Showcase has a number of event-based JavaScript callbacks that can be used to alter, enhance, or supplement default behavior. What you do with the callbacks is totally up to you and your imagination.
ready

The ready event is called before the Showcase widget has been initialized.
```
Showcase.ready();
```
init

The init event is called after the Showcase widget has been initialized.
```
Showcase.init();
```
showModal

The showModal event is called when a post is tapped and we're about to show the modal.
```
Showcase.showModal(post);
```
Returns: The post object that is about to be displayed
hideModal

The hideModal event is called when the modal viewer is dismissed.
```
Showcase.hideModal(post);
```
Returns: The post object that was visible in the viewer
beforeChange

The beforeChange event is called before we change the post displayed in the viewer (i.e. swiping left/right or tapping prev/next controls).
```
Showcase.beforeChange(current, next);
```
Returns: The post object currently visible in the viewer, and the next post that is about to be displayed.
afterChange

The afterChange event is called after we change the post displayed in the viewer (i.e. swiping left/right or tapping prev/next controls).
```
Showcase.afterChange(current, previous);
```
Returns: The post object currently visible in the viewer, and the previous post that was displayed.
loadMedia

The loadMedia event is called when new media has been added to the gallery (i.e. tapping the load more button).
```
Showcase.loadMedia(media);
```
Returns: The media array added to the gallery
tappedPost

The tappedPost event is called when a user has tapped a post in the gallery.
```
Showcase.tappedPost(post);
```
Returns: The post object that was tapped
viewedPost

The viewedPost event is called when a user has viewed a post in the viewer.
```
Showcase.viewedPost(post);
```
Returns: The post object that was viewed
viewedProduct

The viewedProduct event is called when a user has viewed a product in the viewer.
```
Showcase.viewedProduct(product);
```
Returns: The product object that was viewed
addedProduct

The addedProduct event is called when a user has added a product to the cart via the viewer.
```
Showcase.addedProduct(product);
```
Returns: The product object that was viewed
removedProduct

The removedProduct event is called when a user has removed a product from the cart via the viewer.
```
Showcase.removedProduct(product);
```
Returns: The product object that was viewed
changedCart

The changedCart event is called when the cart has been changed via the viewer (i.e. adding or removing products).
```
Showcase.changedCart(cart);
```
Returns: The updated cart object
beforeShowCart

The beforeShowCart event is called before the viewer displays the cart preview.
```
Showcase.beforeShowCart(cart);
```
Returns: The cart object
beforeHideCart

The beforeHideCart event is called before the viewer dismisses the cart preview.
```
Showcase.beforeHideCart(cart);
```
Returns: The cart object
showCart

The showCart event is called after the viewer displays the cart preview.
```
Showcase.showCart(cart);
```
Returns: The cart object
hideCart

The hideCart event is called after the viewer dismisses the cart preview.
```
Showcase.hideCart(cart);
```
Returns: The cart object
initiatedCheckout

The initiatedCheckout event is called when a user has initiated the checkout process from the viewer.
```
Showcase.initiatedCheckout(cart);
```
Returns: The cart object at time of checkout
overrideCheckout

The overrideCheckout event is called when a user has initiated the checkout process from the viewer.
When this event is called, the default checkout process is overridden and will not redirect the user to the checkout process.
```
Showcase.overrideCheckout(cart);
```
Returns: The cart object at time of checkout
loadMore

The loadMore method will fetch additional media and add it to the gallery (i.e. similar to tapping the load more button).
```
Showcase.loadMore();
```
Working with Callbacks & Methods

The easiest way to get started working with Showcase callbacks and methods is to add the following debug script to your Shopify theme, which will log all callback events and their respective return objects.

First, create a new theme snippet called "showcase-callbacks.liquid" and copy/paste the following script as the snippet contents.

Then, include the new snippet at the end of your theme.liquid file with: {% include "showcase-callbacks" %}
```
<script>
  // Make sure Showcase is defined
  if ((typeof Showcase) === 'undefined') { Showcase = {}; }

  // Define event handlers, which will be called by Showcase
  Showcase.ready = function() {
    console.log('ready');
  };

  Showcase.init = function() {
    console.log('init');
  };

  Showcase.showModal = function(post) {
    console.log('showModal');
    console.log(post);
  };

  Showcase.hideModal = function(post) {
    console.log('hideModal');
    console.log(post);
  };

  Showcase.beforeChange = function(post) {
    console.log('beforeChange');
    console.log(post);
  };

  Showcase.afterChange = function(post) {
    console.log('afterChange');
    console.log(post);
  };

  Showcase.loadMedia = function(media) {
    console.log('loadMedia');
    console.log(media);
  };

  Showcase.tappedPost = function(post) {
    console.log('tappedPost');
    console.log(post);
  };

  Showcase.viewedPost = function(post) {
    console.log('viewedPost');
    console.log(post);
  };

  Showcase.viewedProduct = function(product) {
    console.log('viewedProduct');
    console.log(product);
  };

  Showcase.addedProduct = function(product) {
    console.log('addedProduct');
    console.log(product);
  };

  Showcase.removedProduct = function(product) {
    console.log('removedProduct');
    console.log(product);
  };

  Showcase.changedCart = function(cart) {
    console.log('changedCart');
    console.log(cart);
  };

	Showcase.beforeShowCart = function(cart) {
    console.log('beforeShowCart');
    console.log(cart);
  };

	Showcase.beforeHideCart = function(cart) {
    console.log('beforeHideCart');
    console.log(cart);
  };

	Showcase.showCart = function(cart) {
    console.log('showCart');
    console.log(cart);
  };

	Showcase.hideCart = function(cart) {
    console.log('hideCart');
    console.log(cart);
  };

  Showcase.initiatedCheckout = function(cart) {
    console.log('initiatedCheckout');
    console.log(cart);
  };

  Showcase.overrideCheckout = function(cart) {
    console.log('overrideCheckout');
    console.log(cart);
  };

  // Trigger loadMore method
  setTimeout(function(){
    console.log('loadMore');
    Showcase.loadMore();
  }, 2000);
</script>
```
Script Tag Attributes

Showcase has a built-in gallery editor that can be used to style your gallery and change its default behavior. However, sometimes you don't want the default behavior, you might want to switch from a grid based layout to a slider based layout or enable Infinite Scroll on only certain pages.

To make overriding the default gallery settings easier, we've added support for data attribute overrides on the script tag!
Quick Example

The following example shows how to switch from the default grid based layout to a slider based layout.

Default gallery style (grid)
```
<script src="https://www.showcasegalleries.io/embed/gallery/XXXX" data-gallery-id="XXX"></script>
```
Slider style gallery (via override)
```
<script src="https://www.showcasegalleries.io/embed/gallery/XXXX" data-gallery-id="XXX" data-gallery-style="slider"></script>
```
Title & Description

Show or hide the gallery title.
```
data-display-title="true"
```
Can be "true" for visible or "false" for hidden.

Override the default gallery title.
```
data-gallery-title="Your New Title"
```
Hint: Use this for dynamic gallery titles on product pages with.

Show or hide the gallery description.
```
data-display-description="true"
```
Can be "true" for visible or "false" for hidden.

Override the default gallery description.
```
data-gallery-description="Your New Description"
```
Layout

Change the gallery style to Grid, Collage, or Slider.
```
data-gallery-style="slider"
```
Can be "grid", "collage", or "slider".

Change the tagged product layout in the viewer.
```
data-gallery-product-style="list"
```
Can be "grid, or "list".

Change the number of columns.
```
data-columns="4"
```
Can be 1 through 6.

Change the number of rows.
```
data-rows="3"
```
Can be 1 through 6.

Force a limited number of posts to be returned, which can override auto calculated limit values.
```
data-force-limit="3"
```
Maximum accepted value is 36.

Adjust the sort order of the returned posts. The default order is descending (DESC), which will return the newest posts first. Ascending (ASC) will return oldest posts first. Random (RAND) will return posts in a random order -- paging is not recommended when using random, since duplicate posts can be returned.
```
data-sort="asc"
```
Can be "DESC", "ASC", or "RAND".
Options

Include all Instagram content automatically.
```
data-enable-live-instagram-content="true"
```
Can be "true" to include all Instagram content or "false" to only include curated posts.

Enable or disable Add to Cart.
```
data-enable-add-to-cart="true"
```
Can be "true" to enable functionality or "false" to disable functionality.

Enable or disable Quick View.
```
data-enable-quick-view="true"
```
Can be "true" to enable functionality or "false" to disable functionality.

Enable or disable infinite scroll.
```
data-enable-infinite-scroll="true"
```
Can be "true" to enable functionality or "false" to disable functionality.

Enable or disable Google Analytics.
```
data-enable-google-analytics="true"
```
Can be "true" to enable functionality or "false" to disable functionality.

Enable or disable Slider Auto Play.
```
data-enable-auto-play="true"
```
Can be "true" to enable functionality or "false" to disable functionality.

Alter the default Auto Play speed.
```
data-auto-play-speed="5000"
```
Can be any positive number, defined in milliseconds. Setting the property to 5000 milliseconds will auto rotate the slider every 5 seconds.
Language

Override the gallery view's call to action.
```
data-language-gallery-cta="Shop Now"
```
Override the gallery view's load more button.
```
data-language-gallery-more="Load More"
```
Override the viewer's page title.
```
data-language-viewer-page-title="Shop the Look"
```
Override the viewer's featured products title.
```
data-language-viewer-featured-products-title="Shop the Look"
```
Override the product views's page title.
```
data-language-product-page-title="Product"
```
Override the product views's choose options page title.
```
data-language-product-choose-options="Choose Your Options"
```
Override the product views's add to cart button.
```
data-language-product-add-to-cart="Add to Cart"
```
Override the product views's sold out button.
```
data-language-product-sold-out="Sold Out"
```
Override the product views's learn more button.
```
data-language-product-learn-more="Learn More"
```
Override the cart views's page title.
```
data-language-cart-page-title="Cart"
```
Override the cart views's item label.
```
data-language-cart-item="Item"
```
Override the cart views's items label.
```
data-language-cart-items="Items"
```
Override the cart views's added to cart message.
```
data-language-cart-added-to-cart="Added  to cart!"
```
Override the cart views's removed from cart message.
```
data-language-cart-removed-from-cart="Removed from cart!"
```
Override the cart views's order summary label.
```
data-language-cart-summary="Order Summary"
```
Override the cart views's subtotal label.
```
data-language-cart-subtotal="Subtotal"
```
Override the cart views's shipping label.
```
data-language-cart-shipping="Shipping"
```
Override the cart views's taxes label.
```
data-language-cart-taxes="Taxes"
```
Override the cart views's total label.
```
data-language-cart-total="Total"
```
Override the cart views's calculated at checkout label.
```
data-language-cart-calculated-at-checkout="Calculated at Checkout"
```
Override the cart views's checkout label.
```
data-language-cart-checkout="Checkout"
```
Override the cart views's continue shopping label.
```
data-language-cart-continue-shopping="Continue Shopping"
```
Override the cart views's empty label.
```
data-language-cart-empty="Empty Cart"
```
Product Filters

Instead of managing individual galleries for each product, you can simply manage a single master gallery and use a product ID attribute to pull product-specific posts as needed.

If the script tag is included in the product template, you can use liquid to output the product ID dynamically by including .

Alternatively, a list of product IDs can be generated from a Collection or from the items in a customer's Cart. This list of IDs can then be used to create a Collection or Cart gallery dynamically.

Return only posts that have product ID 58577059856 tagged in them.
```
data-product-id="58577059856"
```
A comma seperated list of Shopify Product ID(s).
Theme Selectors

If Showcase's Add to Cart functionality is enabled, it's easy for your theme's cart count and cart totals to get out of sync with the actual cart object since we don't refresh the page when adding/removing items from the viewer.

Including the following data attributes to your script tag will have Showcase automatically update your cart count and totals as they change.

The CSS selector for the theme's cart count label. Inserts an integer.
```
data-cart-count-selector=".cart-count"
```
Returns: An integer such as "3".

The CSS selector for the theme's cart total label. Inserts a formatted currency.
```
data-cart-total-selector=".cart-total"
```
Returns: Formatted currency such as "$49.99".
Global Settings Overrides

Showcase has a built-in gallery editor that can be used to style your galleries individually. However, sometimes you want to make global overrides that are gallery agnostic, rather than using individual data attributes on each script tag.

For example, you might have two stores using the same Showcase gallery code. The primary store is in English and you'd like to change the language of the secondary site to Spanish. No problem -- Showcase makes this a breeze!

Just define a single Showcase.settings object and this will be used to override all Showcase gallery settings.
Quick Example

The following shows how to switch all galleries on your site from their gallery-defined layout to a slider based layout. Simply copy/paste the code below at the end of your theme.liquid file.

Note: The Showcase.settings object will override the default gallery settings, but inline data attributes on the script tag will override global settings.
```
<script>
			  Showcase.settings = {
			    gallery_style: 'slider'
			  }
			</script>
```
Note: Possible options are 'grid', 'slider', or 'collage'.
Title & Description

Show or hide the gallery title.
```
Showcase.settings.display_title = "true";
```
Can be "true" for visible or "false" for hidden.

Show or hide the gallery description.
```
Showcase.settings.display_description = "true";
```
Can be "true" for visible or "false" for hidden.
Layout

Change the gallery style to Grid, Collage, or Slider.
```
Showcase.settings.gallery_style = "grid";
```
Can be "grid", "collage", or "slider".

Change the tagged product layout in the viewer.
```
Showcase.settings.gallery_product_style = "grid";
```
Can be "grid or "list".

Change the number of columns.
```
Showcase.settings.gallery_columns = "3";
```
Can be 1 through 6.

Change the number of rows.
```
Showcase.settings.gallery_rows = "4";
```
Can be 1 through 6.

Force a limited number of posts to be returned, which can override auto calculated limit values.
```
Showcase.settings.force_limit = "3";
```
Maximum accepted value is 36.

Adjust the sort order of the returned posts. The default order is descending (DESC), which will return the newest posts first. Ascending (ASC) will return oldest posts first. Random (RAND) will return posts in a random order -- paging is not recommended when using random, since duplicate posts can be returned.
```
Showcase.settings.sort = "asc";
```
Can be "DESC", "ASC", or "RAND".
Options

Enable or disable Add to Cart.
```
Showcase.settings.enable_add_to_cart = "true";
```
Can be "true" to enable functionality or "false" to disable functionality.

Enable or disable Quick View.
```
Showcase.settings.enable_quick_view = "true";
```
Can be "true" to enable functionality or "false" to disable functionality.

Enable or disable infinite scroll.
```
Showcase.settings.enable_infinite_scroll = "true";
```
Can be "true" to enable functionality or "false" to disable functionality.

Enable or disable Google Analytics.
```
Showcase.settings.enable_google_analytics = "true";
```
Can be "true" to enable functionality or "false" to disable functionality.

Enable or disable Slider Auto Play.
```
Showcase.settings.enable_auto_play = "true";
```
Can be "true" to enable functionality or "false" to disable functionality.

Alter the default Auto Play speed.
```
Showcase.settings.auto_play_speed = "5000";
```
Can be any positive number, defined in milliseconds. Setting the property to 5000 milliseconds will auto rotate the slider every 5 seconds.
Styles & Colors

Define the gallery's padding to adjust the space between media items.
```
Showcase.settings.styles_padding = "3";
```
Can be any integer, which is defined in pixels.

Define the gallery's heading text color.
```
Showcase.settings.styles_headlines = "#333333";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's primary text color.
```
Showcase.settings.styles_text = "#555555";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's text color for prices.
```
Showcase.settings.styles_prices = "#999999";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's text color for sale prices.
```
Showcase.settings.styles_sale = "#36c069";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's text color for social icons.
```
Showcase.settings.styles_social = "#999999";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's border and panel colors.
```
Showcase.settings.styles_borders = "#efefef";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's text color for success messages.
```
Showcase.settings.styles_success = "#36c069";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's text color for error messages.
```
Showcase.settings.styles_error = "#ff6848";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's text color for primary buttons.
```
Showcase.settings.styles_button_text = "#ffffff";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's background color for primary buttons.
```
Showcase.settings.styles_button_background = "#333333";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's text color for checkout buttons.
```
Showcase.settings.styles_checkout_button_text = "#ffffff";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's background color for checkout buttons.
```
Showcase.settings.styles_checkout_button_background = "#36c069";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's text color for product indicators.
```
Showcase.settings.styles_indicator_text = "#333333";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's background color for product indicators.
```
Showcase.settings.styles_indicator_background = "#ffffff";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's border color for product indicators.
```
Showcase.settings.styles_indicator_border = "#333333";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's text color for media overlay Call to Action.
```
Showcase.settings.styles_overlay_text = "#ffffff";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's border color for media overlay Call to Action.
```
Showcase.settings.styles_overlay_text_border = "#ffffff";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's background color for media overlay Call to Action.
```
Showcase.settings.styles_overlay_background = "#000000";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's background opacity for media overlay Call to Action.
```
Showcase.settings.styles_overlay_opacity = "0.30";
```
Can be any value from 0 to 1.

Define the gallery's control color for the viewer.
```
Showcase.settings.styles_modal_controls = "#ffffff";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's modal background color for the viewer.
```
Showcase.settings.styles_modal_background = "#000000";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's modal background opacity for the viewer.
```
Showcase.settings.styles_modal_opacity = "0.75";
```
Can be any value from 0 to 1.

Define the gallery's modal body color for the viewer.
```
Showcase.settings.styles_background = "#ffffff";
```
Can be any Hex, RGB, or RGBA value.

Define the gallery's text alignment for the gallery title.
```
Showcase.settings.styles_title_text_align = "center";
```
Can be "left", "right", or "center".

Define the gallery's text transform for the gallery title.
```
Showcase.settings.styles_title_text_transform = "none";
```
Can be "none", "capitalize", "lowercase", or "uppercase".

Define the gallery's text alignment for the gallery description.
```
Showcase.settings.styles_description_text_align = "center";
```
Can be "left", "right", or "center".

Define the gallery's text transform for the gallery description.
```
Showcase.settings.styles_description_text_transform = "none";
```
Can be "none", "capitalize", "lowercase", or "uppercase".
Language

Override the gallery view's call to action.
```
Showcase.settings.language_gallery_cta = "SHOP THE LOOK";
```
Override the gallery view's load more button.
```
Showcase.settings.language_gallery_more = "Load More";
```
Override the viewer's page title.
```
Showcase.settings.language_viewer_page_title = "Shop the Look";
```
Override the viewer's featured products title.
```
Showcase.settings.language_viewer_featured_products_title = "Shop the Look";
```
Override the product views's page title.
```
Showcase.settings.language_product_page_title = "Product";
```
Override the product views's choose options page title.
```
Showcase.settings.language_product_choose_options = "Choose Your Options";
```
Override the product views's add to cart button.
```
Showcase.settings.language_product_add_to_cart = "Add to Cart";
```
Override the product views's sold out button.
```
Showcase.settings.language_product_sold_out = "Sold Out";
```
Override the product views's unavailable button.
```
Showcase.settings.language_product_unavailable = "Unavailable";
```
Override the product views's learn more button.
```
Showcase.settings.language_product_learn_more = "Learn More";
```
Override the cart views's page title.
```
Showcase.settings.language_cart_page_title = "Cart";
```
Override the cart views's item label.
```
Showcase.settings.language_cart_item = "Item";
```
Override the cart views's items label.
```
Showcase.settings.language_cart_items = "Items";
```
Override the cart views's added to cart message.
```
Showcase.settings.language_cart_added_to_cart = "Added to cart!";
```
Override the cart views's removed from cart message.
```
Showcase.settings.language_cart_removed_from_cart = "Removed from cart!";
```
Override the cart views's order summary label.
```
Showcase.settings.language_cart_summary = "Order Summary";
```
Override the cart views's subtotal label.
```
Showcase.settings.language_cart_subtotal = "Subtotal";
```
Override the cart views's shipping label.
```
Showcase.settings.language_cart_shipping = "Shipping";
```
Override the cart views's taxes label.
```
Showcase.settings.language_cart_taxes = "Taxes";
```
Override the cart views's total label.
```
Showcase.settings.language_cart_total = "Total";
```
Override the cart views's calculated at checkout label.
```
Showcase.settings.language_cart_calculated_at_checkout = "Calculated at Checkout";
```
Override the cart views's checkout label.
```
Showcase.settings.language_cart_checkout = "Checkout";
```
Override the cart views's continue shopping label.
```
Showcase.settings.language_cart_continue_shopping = "Continue Shopping";
```
Override the cart views's empty label.
```
Showcase.settings.language_cart_empty = "Empty Cart";
```
Product Filters

Instead of managing individual galleries for each product, you can simply manage a single master gallery and use a product ID attribute to pull product-specific posts as needed.

Return only posts that have product ID 58577059856 tagged in them.
```
Showcase.settings.product_id = "58577059856";
```
A comma seperated list of Shopify Product ID(s).
Theme Selectors

The CSS selector for the theme's cart count label. Inserts an integer.
```
Showcase.settings.cart_count_selector = ".cart-count";
```
Returns: An integer such as "3".

The CSS selector for the theme's cart total label. Inserts a formatted currency.
```
Showcase.settings.cart_total_selector = ".cart-total";
```
Returns: Formatted currency such as "$49.99".
Working with Global Settings

The easiest way to get started working with Showcase global settings is to add the following boilerplate script to your Shopify theme, which will override all default gallery settings. You can then remove unneeded properties.

First, create a new theme snippet called "showcase-globals.liquid" and copy/paste the following script as the snippet contents.

Then, include the new snippet at the end of your theme.liquid file with: {% include "showcase-globals" %}

Note: The {% raw %} open and close tag are needed if you include any Liquid in your settings object. Otherwise, Shopify will render the result on page load.
```
{% raw %}
<script>
    // Define Showcase object
  	if ((typeof Showcase) === 'undefined') { Showcase = {}; }

  	// Define global Showcase.settings overrides
  	Showcase.settings = {
      // TITLE & DISPLAY
      display_title: "true",
      display_description: "true",

      // LAYOUT
    	gallery_style: "grid",
    	gallery_columns: "3",
    	gallery_rows: "4",
    	gallery_product_style: "grid",

      // OPTIONS
    	enable_add_to_cart: "true",
    	enable_quick_view: "true",
      enable_infinite_scroll: "false",
    	enable_google_analytics: "true",
    	enable_auto_play: "false",
    	auto_play_speed: "5000",

      // STYLES & COLORS
      styles_padding: "3",
      styles_headlines: "#333333",
      styles_text: "#555555",
      styles_prices: "#999999",
      styles_sale: "#36c069",
      styles_social: "#999999",
      styles_borders: "#efefef",
      styles_success: "#36c069",
      styles_error: "#ff6848",
      styles_button_text: "#ffffff",
      styles_button_background: "#333333",
      styles_checkout_button_text: "#ffffff",
      styles_checkout_button_background: "#36c069",
      styles_indicator_text: "#333333",
      styles_indicator_background: "#ffffff",
      styles_indicator_border: "#333333",
      styles_overlay_text: "#ffffff",
      styles_overlay_text_border: "#ffffff",
      styles_overlay_background: "#000000",
      styles_overlay_opacity: "0.30",
      styles_modal_controls: "#ffffff",
      styles_modal_background: "#000000",
      styles_modal_opacity: "0.75",
      styles_background: "#ffffff",
      styles_title_text_align: "center",
      styles_title_text_transform: "none",
      styles_description_text_align: "center",
      styles_description_text_transform: "none",

      // LANGUAGE
    	language_gallery_cta: "SHOP THE LOOK",
    	language_gallery_more: "Load More",
    	language_viewer_page_title: "Shop the Look",
    	language_viewer_featured_products_title: "Shop the Look",
    	language_product_page_title: "Product",
    	language_product_choose_options: "Choose Your Options",
    	language_product_add_to_cart: "Add to Cart",
    	language_product_sold_out: "Sold Out",
    	language_product_unavailable: "Unavailable",
    	language_product_learn_more: "Learn More",
    	language_cart_page_title: "Cart",
    	language_cart_item: "Item",
    	language_cart_items: "Items",
    	language_cart_added_to_cart: "Added to cart!",
    	language_cart_removed_from_cart: "Removed from cart!",
    	language_cart_summary: "Order Summary",
    	language_cart_subtotal: "Subtotal",
    	language_cart_shipping: "Shipping",
    	language_cart_taxes: "Taxes",
    	language_cart_total: "Total",
    	language_cart_calculated_at_checkout: "Calculated at Checkout",
    	language_cart_checkout: "Checkout",
    	language_cart_continue_shopping: "Continue Shopping",
    	language_cart_empty: "Empty Cart",

      // THEME SELECTORS
    	cart_count_selector: ".cart-count",
    	cart_total_selector: ".cart-total",

  }
</script>
{% endraw %}
```
Google Analytics

Showcase automatically tracks a number of key event metrics if you have Google Analytics enabled on your site. These events can be used to track engagement and performance directly in your GA Dashboard.

Make sure you have Google Analytics integrated into your shop. If you haven't enabled GA on your site, follow the steps in the Shopify setup guide.

The following event data can be found under Behavior > Events > Overview in your GA account. Refer to Reviewing Google Analytics for more information on how to analyze the data.
Gallery Loaded

Records the relative page URL (string) where the gallery was loaded.
```
{
				  eventCategory: "Showcase",
				  eventAction: "Gallery Loaded",
				  eventLabel: (relative page URL),
				  hitType: "event"
			}
```
Tapped Post

Records the absolute Instagram post URL (string) that was tapped.
```
{
				  eventCategory: "Showcase",
				  eventAction: "Tapped Post",
				  eventLabel: (absolute Instagram post URL),
				  hitType: "event"
			}
```
Viewed Post

Records the absolute Instagram post URL (string) that was viewed.
```
{
				  eventCategory: "Showcase",
				  eventAction: "Viewed Post",
				  eventLabel: (absolute Instagram post URL),
				  hitType: "event"
			}
```
Viewed Product

Records the product title (string) that was viewed.
```
{
				  eventCategory: "Showcase",
				  eventAction: "Viewed Product",
				  eventLabel: (product title),
				  hitType: "event"
			}
```
Added Product

Records the product title (string) and variant price (integer) that was added to the cart.
```
{
				  eventCategory: "Showcase",
				  eventAction: "Added Product",
				  eventLabel: (product title),
				  eventValue: (variant price in cents),
				  hitType: "event"
			}
```
Note: All prices are recorded in cents
Removed Product

Records the product title (string) and variant price (integer) that was removed from the cart.
```
{
				  eventCategory: "Showcase",
				  eventAction: "Removed Product",
				  eventLabel: (product title),
				  eventValue: (variant price in cents),
				  hitType: "event"
			}
```
Note: All prices are recorded in cents
Initiated Checkout

Records the page URL (string) where the checkout was initiated and the total cart value (integer).
```
{
				  eventCategory: "Showcase",
				  eventAction: "Initiated Checkout",
				  eventLabel: (relative page URL),
				  eventValue: (cart total in cents),
				  transport: "beacon",
				  hitType: "event"
			}
```
Note: All prices are recorded in cents
Data Deletion

Showcase takes the privacy of your data seriously. As a general rule of thumb, we automatically delete all user data once a customer has had the app uninstalled for 90 days.

If you would like to have your data deleted sooner, or have any other questions related to the privacy of your data, please don't hesitate to send us an email at [email protected]

Can't find the answer you're looking for?

We're here to help! Send us a message and we'll get back to you as soon as possible.

Contact Showcase Support

Documentation

Getting Started

Callbacks and Methods

ready

init

showModal

hideModal

beforeChange

afterChange

loadMedia

tappedPost

viewedPost

viewedProduct

addedProduct

removedProduct

changedCart

beforeShowCart

beforeHideCart

showCart

hideCart

initiatedCheckout

overrideCheckout

loadMore

Working with Callbacks & Methods

Script Tag Attributes

Quick Example

Title & Description

Layout

Options

Language

Product Filters

Theme Selectors

Global Settings Overrides

Quick Example

Title & Description

Layout

Options

Styles & Colors

Language

Product Filters

Theme Selectors

Working with Global Settings

Google Analytics

Gallery Loaded

Tapped Post

Viewed Post

Viewed Product

Added Product

Removed Product

Initiated Checkout

Data Deletion

Can't find the answer you're looking for?