Defining your link URL
To create a link in a page you must first define the URL (i.e. the address or destination) for your link depending upon whether you are linking to another web page or a file.
Linking to a web page
To obtain the URL for a web page you wish to link to, simply visit the page in your web browser and copy the complete URL from your browser’s address bar. For example, browsing this support article your address bar may look similar to..
..and copying this gives us the URL:
The above link is called an absolute URL because it includes the complete URL starting with
http. Always use an absolute URL when linking to pages outside of your shop.
When linking within your own shop, you can use a relative url starting with
/ instead of absolute URL (i.e. you do not need to include the
http://myshop.bigcartel.com part of the URL). For example, instead of..
http://myshop.bigcartel.com is your own shop, you can remove this shop address and use just..
You do not have to use relative URLs, as absolute URLs will always work, however using relative URLs to link to locations within your own shop can be useful because, should you ever change your Big Cartel account name or apply a custom domain in the future, you will not need to go back and change your links (as you will need to do if you used absolute URLs).
Linking to a file
Before linking to your file from your web page, you will need to upload it to a publicly accessible location on the internet. If you do not already have such a location, refer to support article How do I upload images or files for my Big Cartel page content?
You should now have a public URL for your file, for example:
Creating a link in visual edit mode
If you are creating page content in visual edit mode (the default page edit mode), you can create your link by highlighting the text you wish to convert to a link and then clicking the insert link icon in your edit toolbar. This tool will not work if you are in HTML edit mode.
Alternatively, you can insert your file link with more control and flexibility by entering into HTML edit mode - refer How do I switch to HTML edit mode? - and applying the following instructions.
Creating a link in HTML edit mode
To create a link in HTML mode, you will need to write a HTML link tag into your content editor (i.e. your Big Cartel page editor or product description area) as follows:
Where LINKURL = the destination URL for the link (defined in the first section of this article) and LINKTEXT could be any text you want to convert to link text.
Note that the link tag must be closed, i.e. it must end with
For example, let’s use our file URL from the first section of this article as our destination URL:
<a href="http://www.my-public-dropbox.com/my-file.pdf">Click here to view my pdf</a>
If you want your file to open in a new window, you can set the link tag’s target attribute to blank as follows:
<a href="http://www.my-public-dropbox.com/my-file.pdf" target="_blank">Click here to view my pdf in a new window</a>
Note that blank begins with an underscore, i.e.
Instead of link text, you can also create a link from an image as explained in section Adding a Link to Your Image of How do I insert an image into my Big Cartel shop page?
Styling a link in HTML edit mode
Aarcade themes include a built in class you can add to your link called
buttonish that will make it appear like a button. This can be helpful if you want your link to stand out as a main call to action for your visitors.
<a class="buttonish" href="http://www.my-public-dropbox.com/my-file.pdf" target="_blank">Click here to view my pdf in a new window</a>
As with any HTML element, you can also apply your own custom styles to achieve the appearance you desire. You can do this by adding your own class name and creating CSS in your custom style coding area - see Where do I add custom style code? - or by using inline styles:
<a style="background-color:#ffffaa;font-weight:bold;" href="http://www.my-public-dropbox.com/my-file.pdf" target="_blank">Click here to view my pdf in a new window</a>
For more information on creating custom styles and code, refer to How do I customise my theme beyond the standard settings?