Note: Adding custom HTML is not available to users of the Free Big Cartel plans
Adding your Instagram, Facebook or Twitter widget to Big Cartel is easy. Follow these steps to create your widget.
Once you've created your widget, follow the steps below to add it to your website.
You will now need to add it to your Big Cartel site:
Login to your Big Cartel website. Make sureyou are on a paid plan that supports adding Custom HTML.
On the dashboard, decide where you'd like toadd the widget. You can add it to each product underneath the description,create a new page to showcase your products or add it as Custom HTML tothe main page.
Adding the widget to Product Description
Select the Product you want to add the widget to
Paste the code snippet into the Description text box for the Product just after the Description line
Click on Save
Select View my shop and navigate to the product to see the widget beneath the Description.
This will display the widget as follows:
The above example widget was setup on the SnapWidget dashboard with a 7 x 7 grid. As you can see it is shown as a very small widget, the number of columns / rows can be changed on your SnapWidget dashboard. These changes will then be applicable wherever you display you widget.
The following examples use a 3 x 3 grid.
The width of your widget can also be changed in the snippet you pasted under Description (If it is done here it will only be applicable to this instance).
Change default width (100% - as in picture above)
overflow:hidden; width:100%; "></iframe>
To narrower (e.g. 75%)
overflow:hidden; width:75%; "></iframe>
Or wider (e.g. 125%)
overflow:hidden; width:125%; "></iframe>
You can also use a few HTML tags to improve the appearance of the widget on Big Cartel.
Including a <hr> tag will separate the Description and the widget with a horizontal line. Including a header (<h1>, <h2> or <h3>) will also allow you to provide a heading to your displayed widget.
Example with <hr> and <h1> tags added. Note that the heading is not centered in the displayed area.
<hr>
<h1>Our Products</h1>
<!-- SnapWidget -->
<script src="https://snapwidget.com/js/snapwidget.js"></script>
<link rel="stylesheet" href="https://snapwidget.com/stylesheets/snapwidget-lightbox.css" />
<script src="https://snapwidget.com/js/snapwidget-lightbox.js"></script>
<iframe src="https://snapwidget.com/embed/your_widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; "></iframe>
Same example with heading centered in the displayed area. We accomplish this by encapsulating the widget in a <div> area with the style set to text-align set to center.
<hr>
<div style="text-align:center;">
<h1>Our Products</h1>
<!-- SnapWidget -->
<script src="https://snapwidget.com/js/snapwidget.js"></script>
<link rel="stylesheet" href="https://snapwidget.com/stylesheets/snapwidget-lightbox.css" />
<script src="https://snapwidget.com/js/snapwidget-lightbox.js"></script>
<iframe src="https://snapwidget.com/embed/your_widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; "></iframe>
</div>
Create a new page to display your widget.
Go to your dashboard
Click on your store name (upper left-hand of page)
Under Your Shop select Customize your design
Select the Pages option and click on the + to add a page
Add a Page name
To insert your widget, select HTML (Edit as HTML)
Replace any content with your snippet and click on Done
Your new page will be shown on the Pages list. Click on Save and then Exit.
The link to your new page will then be displayed on your Big Cartel page
Click on the link (in this case Our Products). Your widget will then be displayed as follows on the newly added page.
Add the widget to the main page via Custom HTML.
Note: Only do this if you are experienced with HTML, wrong coding can mess up your main page. Best practice will be to copy the existing HTML and store this in a text file somewhere as backup.
Go to your dashboard
Click on your store name (upper left-hand of page)
Under Your Shop select Customize your design
Select the Advanced option and select Layout
Choose Custom and find a place in the HTML code where you want to add your widget (in this example we will add it just after the header)
Add a blank line between the
</header>and the<div>tags and insert your snippet.
Click on Done
Click on Save and then Exit
Similar to the other methods of adding your widget, you can change the appearance of your widget by changing the width of the widget of your widget, adding a <hr> tag, a header and center the widget on the page by encapsulating the widget in a <div> area.
Example of your widget displayed just below the main page header with a widget header, centered and the widget width set to 75%.
