Placing Your Gallery
    • Dark
      Light

    Placing Your Gallery

    • Dark
      Light

    Article summary

    Products


    Visual UGC
    Supported plans

    Free, Pro, Premium, Enterprise

    eCommerce Platform

    Shopify, Shopify Plus, Adobe Commerce (Magento), BigCommerce, WooCommerce, Volusion, Salesforce Commerce Cloud, Custom

    Once you’ve finished choosing media for your gallery, and designing it to fit your brand, it’s time to embed your gallery on your site.

    The way you do this will depend on which eCommerce platform you’re using and where you’d like to place the gallery. The instructions below apply to both product galleries and custom galleries.

    If you’re using Shopify, we can place your gallery for you on your site. We’ll place it in a great location, just above the website footer on your homepage or product page. If you’re a Yotpo Reviews customer, we can also place your gallery above your Reviews Widget if you prefer.

    Available for:

    Shopify only

    1. In your Visual UGC admin, from the gallery page, click Place for me.
    2. Choose where you want us to place the gallery.
    3. You’re done! Go to your site to see your gallery live.

    If you want to place the gallery in a different location, you can generate the code and place it yourself. Just click Get the code and follow the instructions for placing it yourself.

    You can embed the gallery on any page of your site, for example, your product page, homepage, checkout page, or category page. Follow the instructions below according to which eCommerce platform you’re using.

    Before you start

    In order to embed the gallery on your site, you must first add Yotpo's JavaScript. If you already have a Reviews Widget on your site, then this will already be installed.

    For detailed installation instructions on installing the Reviews Widget and adding Yotpo’s JavaScript, choose the relevant article from the list below. In some cases, the JavaScript will be added automatically upon installing the widget. See individual articles for details.

    Shopify-specific instructions

    To embed the code:

    1. Go to your Shopify Themes menu.
    2. Click Actions > Edit Code.
    3. Use the table below to help you understand where to paste the code:
    Desired locationWhere to paste code
    On the product page, above the Reviews WidgetIn your product.liquid or main-product.liquid file, above the row that contains (yotpo-main-widget).
    On the product page, just above the footerIn your product.liquid or main-product.liquid file, underneath the last line of code.
    On the homepage, just above the footerIn your index.liquid file, underneath the last line of code. If you don't have this file (usually because you're using Online Store 2.0), you'll need to embed the gallery automatically.
    Please note:
    Depending on the theme you’re using, the file names you see in your account may not match those given in the table above. If you need any additional help, please contact Yotpo support.

    BigCommerce-specific instructions

    You can embed the gallery on your product page or on your homepage.

    To embed the code:

    1. Log into your BigCommerce account.
    2. From the homepage, select your store, and click Storefront.
    3. Navigate to My Themes > Advanced > Edit Theme Files.
    4. Use the table below to help you understand where to paste the code:
    Desired locationWhere to paste code
    On the product page, above the Reviews WidgetIn your product.html file, above the row that contains (yotpo-main-widget)
    On the product page, just above the footerIn your product.html file, underneath the last line of code
    On the homepage, just above the footerIn your home.html file, underneath the last line of code
    Please note:
    Depending on the theme you’re using, the file names you see in your account may not match those given in the table above. If you need any additional help, please contact Yotpo support.

    Was this article helpful?