How to Install Code
Help / How to Install Code
CONTENT
Shopify
Go to Shopify website’s backend. Log in to your Shopify website’s backend
How to Add Mirorr Widget to Shopify Website
In this guide
After you generate your social media feeds in your Mirorr Widget account, you will need to copy the provided code from Publish Page as shown below
Adding Your Widget to a Specific Page
1
Go to
and select
Online Store
Customize
2
Select the right page from the dropdown menu at the top of the page
3
Click
Add Section
at the left part of the page
4
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
5
Press
Add Block
and choose
Custom HTML
option
6
Paste the widget installation code to
HTML field
7
Click
Save
to save changes
Set
Container Width
to 100%
Creating Custom Content Section
1
Go to
and select
Online Store
Actions
Edit Code
2
Scroll down to
Sections
header and click
Add a New Section
3
Name the new section
MIRROR-widget
and click
Create Section
Сюда вставить код, чтобы его скопировали
4
Copy the code below
5
Replace the default code in the field
6
Click
Save
to save changes
7
Now follow the guide for adding Specific Page
All Pages
1
Go to
and select
Online Store
Actions
Edit Code
2
theme.liquid
Choose
4
Click
Save
to save changes
3
Paste the widget installation code before the closing </body> tag
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
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
1
Go to
the page where you’d like to add the widget
Products
the widget
2
Get to
HTML Editor
of the Description by clicking on
</>
icon. Paste the installation code there
code there
installation code there
on
3
Click
Save
to save changes
Any Placement on the Product Page
Online Store
Actions
Edit Code
1
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
2
Open
file in
folder of your Shopify 2.0
Shopify 2.0
Tip
In case you use older versions of Shopify, you may need to choose
product.liquid
file instead
Сюда вставить код, чтобы его скопировали
3
Create a block container for the widget. To do this, copy the code below
4
Paste the code block to the desired area
Сюда вставить код, чтобы его скопировали
5
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
and enter
“settings”: [
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”: [
6
Find
section. The code should be inserted at the end of the section
of the section
be inserted at the end of the section
7
Add the comma
,
after the last curly brackets
}
and paste the code given above before
the last square brackets
]
of
“blocks”: [
section
above before
8
Go to
and select
Customize
Online Store
9
In the top dropdown menu select your
Product Pages
Add Block
Mirror Widget
10
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
11
Open the Mirror widget block by clicking on it
12
Select the desired product and paste the installation code to the section below
13
Click
Save
to save changes
All Product Page
1
Go to
and select
Online Store
Actions
Edit Code
main-product.liquid
Sections
2
Open
file in
folder of your Shopify 2.0
Shopify 2.0
Tip
In case you use older versions of Shopify, you may need to choose
product-template.liquid
file instead
3
Find the place where you want to display the widget, paste the widget installation code there
4
Click
Save
to save changes
Was This Article Helpful?
Do You Have Any Questions?
Perhaps we haven’t added some information yet. If you don’t understand something, you can ask a question through the form
Thanks
Your Data was Sent
Successfully!
Ok, It’s Clear
Button Close