Go to Shopify website’s backend. Log in to your Shopify website’s backend
How to Add Mirror Widget to Shopify Website
In this guide
After you generate your social media feeds in your Mirror Widget account, you will need to copy the provided code from Publish Page as shown below
Adding Your Widget to a Specific Page
Go to
and select
Online Store
Customize
Select the right page from the dropdown menu at the top of the page
Click
Add Section
at the left part of the page
Choose
Custom Content
from the list
Tip
In case you use Shopify 2.0 Store, you need to choose the
Custom Liquid
option and paste the widget code to the
If you don't see
Custom Content
or
Custom Liquid
section, you need to create it yourself following section
code to the
section
create it yourself following section
widget code to the
HTML field
following section
Press
Add Block
and choose
Custom HTML
option
Click
Save
to save changes
Paste the widget installation code to
HTML field
. Set
Container Width
to 100%
.
Creating Custom Content Section
Go to
and select
Online Store
Actions
→
Edit Code
Scroll down to
Sections
header and click
Add a New Section
Name the new section
MIRROR-widget
and click
Create Section
Copy the code below
Replace the default code in the field
Click
Save
to save changes
Now follow the guide for adding Specific Page
All Pages
Go to
and select
Online Store
Actions
→
Edit Code
Click
Save
to save changes
Paste the widget installation code before the closing </body> tag
theme.liquid
Choose
file in
Layout
Specific Product Page
There are two ways of adding the widget. You can choose one of them depending on the page area where you’d like to see the widget
Description of the Product
Go to
the page where you’d like to add the widget
Products
the widget
Note
If you’d like to install the widget to the description section of your product or if your widget is a floating/popup one
Get to
HTML Editor
of the Description by clicking on
</>
icon. Paste the installation code there
code there
installation code there
on
Click
Save
to save changes
Any Placement on the Product Page
Online Store
Actions
Edit Code
Go to
and select
→
Note
You will find the second method suitable if you need to place the widget to any other area but description
main-product.liquid
Sections
Open
file in
folder of your Shopify 2.0
Tip
In case you use older versions of Shopify, you may need to choose
product.liquid
file instead
Create a block container for the widget. To do this, copy the code below
Paste the code block to the desired area
Now you need to insert a block of settings code. To do this, copy the code below
Tip
To quickly find the end of the section, hold down
Cmd+F/Ctrl+F
“settings”: [
and enter
Go to the last block that is
highlighted. Before it, you need to insert the code
insert the code
you need to insert the code
“blocks”: [
Find
section. The code should be inserted at the end of the section
of the section
be inserted at the end of the section
Add the comma
,
after the last curly brackets
}
and paste the code given above before
the last square brackets
]
of
“blocks”: [
section
above before
Go to
and select
Customize
Online Store
In the top dropdown menu select your
Product Pages
Add Block
Mirror Widget
Open the folder, click on
at the bottom of the folder and add
and add
Note
Depending on the theme of your Shopify shop, you can see
Product Information
or
Product Pages
Open the Mirror widget block by clicking on it
Select the desired product and paste the installation code to the section below
Click
Save
to save changes
All Product Page
Online Store
Actions
Go to
and select
→
Edit Code
main-product.liquid
Sections
Open
file in
folder of your Shopify 2.0
Tip
In case you use older versions of Shopify, you may need to choose
product-template.liquid
file instead
Find the place where you want to display the widget, paste the widget installation code there
Click
Save
to save changes
Was This Article Helpful?
Do you still have questions? Contact us
Products
Resources
© 2024 “REFLEKT” LLC. All rights reserved
Soon
Social Feed
